/*     

* { padding: 0;  }  

orange=#fb8122
darkgrey#1d2228
lightgrey#e1e2e2
yellow logo18=#FFD500
*/

:root {

/*--headfootbody: #fb8122;*/
--headfootbody-orig: linear-gradient(90deg,rgba(251, 129, 34,1),rgba(251, 60, 34,1));
--headfootbody: linear-gradient(90deg, rgba(255, 213, 0,1),rgba(255,255,255,1));
--navigatehover: #e1e2e2;
--artnavdiv: #1d2228;
--artnavbodtext: white;
--logocolor:#FFD500;
}

.grid-container {
display: grid;
height: 100vh;
grid-template-columns: 10% 1fr 1fr 1fr 10%;
grid-template-rows: 50px 1fr 1fr 1fr 1fr 1fr;
gap: 5px 5px;
grid-template-areas:
". . . . ."
". Home-Splash Home-Splash Home-Splash ."
". Box1 Box2 Box3 ."
". . . . ."
". . . . ."
". . . . .";
}

.Home-Splash {grid-area: Home-Splash;}
.Tagline-Launch {grid-area: Tagline-Launch;}
.Box1{grid-area: Box1; }
.Box2{grid-area: Box2; }
.Box3{grid-area: Box3; }

[class^="Box"] {
margin:auto;
max-width:300px;
max-height:300px;
background-blend-mode: multiply;
background-repeat: no-repeat;
background-size: cover;
color:#e1e2e2;
color:var(--logocolor);
text-align:center;
padding:5px;
border:solid #e1e2e2 1px;
}

.Box1 > a:nth-child(1) > img:nth-child(1){width:100%;height:100%;filter: sepia(90%);}
.Box2 > a:nth-child(1) > img:nth-child(1){width:100%;height:100%;filter: sepia(90%);}
.Box3 > a:nth-child(1) > img:nth-child(1){width:100%;height:100%;filter: sepia(90%);}

html{
background: url('../img/back-1.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

body { 
margin: 5px;
font-family: 'Montserrat', sans-serif;
line-height: 1.7em;
background:rgba(0,0,0,.7);
color: var(--artnavbodtext);
max-width:1200px;
margin:5px auto;
}

h1{
text-align:center;
font-size:5rem;
font-family: 'Montserrat', sans-serif;
line-height:5rem;
//background: -webkit-linear-gradient(rgba(251, 60, 34,1),rgba(251, 129, 34,1));
background: -webkit-linear-gradient(180deg, rgba(255, 213, 0,1),rgba(255, 213, 0,1));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.tagline{
text-align:center;
color:#e1e2e2;
}

a:link { 
color:#e1e2e2;}

a:visited { text-decoration: none;
color:#e1e2e2;}

a:hover { text-decoration: none;
//color:#fb8122;
color:#FFD500;}

a:active { text-decoration: none;
color:#e1e2e2;}


/****************************************responsive*********************************************/
@media all and (max-width: 575px) {
.grid-container {
grid-template-columns: 1fr;
grid-template-areas:
". "
" Home-Splash "
" Box1 "
" Box2 "
" Box3 "
". ";
}	
h1{
font-size:4rem;
line-height:4rem;	
}
}

@media all and (max-width: 375px) {
h1{
font-size:2rem;
line-height:2rem;	
}
}