body{
margin:50px;
font-family:cursive;
background-image:var(--background-image);
}

.container{
margin:10px;
display:grid;
  grid-template-areas:
    "header header header"
    "main main main"
    "main main main"
    "main main main";
  grid-template-columns: 1.1fr 2fr 1.1fr;
  gap:5px 5px;
}

.everything{
width:800px;  
height:auto;
margin-top:80px;  
margin-left:auto; 
margin-right:auto;
margin-bottom:0px;
border:5px double var(--border);
border-radius:20px;
background:var(--bgcolor);
}

.header{
grid-area:header;
background-image:var(--himage);
background-size:50px 50px;
height:150px;
border-radius:20px;
border:2px solid var(--hborder);
text-align:center;
overflow:hidden;
box-shadow:var(--hshadow);
}

.title{
font-family:glacier;
color:var(--title);
font-size:50px;
margin-bottom:0px;
margin-right:5px; 
margin-left:0px;
margin-top:50px;
text-align:center;
}

.img{
border:2px solid var(--img);
border-radius:10px;
margin:10px;
height:150px;
width:fit-content;
}

img{
      filter: url(filters.svg#grayscale);
      filter: gray;
      -webkit-filter: grayscale(1);
      -webkit-transition: all .5s ease-in-out;
     border-radius:7px;
     height:150px;
}

img:hover {
      filter: none;
      -webkit-filter: grayscale(0);
      -webkit-transform: scale(1.1);
}

button{
float:left;
margin-top:115px;
margin-left:10px;
height:31px;
width:88px;
}

.main{
grid-area:main;
overflow:scroll;
overflow-x:hidden;
width:100%;
}

.idk a:link, a:visited, a:active {
   background-color:transparent;
   color:var(--link);
   text-decoration: none;
}

.idk a:hover {
   background-color:transparent;
   color:var(--hover);
   text-decoration:none;
   font-style:italic;
}

.flex{
display:flex;
flex-direction:row;
justify-content:center;
}

.idk{
margin-top:25px;
margin-left:20px;
margin-right:30px;
margin-bottom:0px;
}

footer{
color: var(--p);
}