:root{
    
      --blue: #2E73E9; 
      --white: #f6fdf8;
      --tlime: linear-gradient(to bottom, rgba(255, 255, 255, 0.50), rgba(198, 235, 140, 0.50));
      --tgrey: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(228, 240, 239, 0.5));
      --olime: linear-gradient(to bottom, rgba(255, 255, 255, 0.60), rgba(198, 235, 140, 0.60));
      --green: #aade47;
      --black: #212f27;
      --grey: #A2B6AF;
      --shadow: rgba(205, 218, 222, 0.81);
    
}

html{
    
    background-image:url(https://zepn1.neocities.org/windows%20xp%20bliss%202.png);
    font-family:Windows Xp Tahoma;
    color: var(--black);
    justify-items: left;
    line-height: 25px
    
}

p{
    margin:0;
}

a{ 

    color: var(--blue)
}

body {
     margin: 0;
     padding: 0;
    justify-self: center !important;
}
    
hr {    
    display: block;
    border: solid 1px var(--grey);
    margin-top: 0.2em;
    width: 100%;
}

.hr2 {    
    display: block;
    border: solid 1px var(--grey);
    margin-top: 0.5em;
    width: 100%;
}

h1{
    font-family: times;
    font-size: 25px;
    letter-spacing: -1px;
    margin-bottom: 0;
    margin-top: 1.5em;
    
}

a.navbutton{
 
    font-family:times;
    font-size: 25px;
    color: var(--blue);
    border: 2px solid #ffffff00;
    padding: 0.1em;
    border-radius: 5px;
    cursor: pointer;
    transition-duration: 0.2s;
    text-decoration-line: none;
   
    }

a.navbutton:hover{
    
    color: var(--black);
    background-color: var(--white);
    filter: drop-shadow(0 0 2px var(--grey));
}

a.navbutton2{
    
    font-family:times;
    font-size: 25px;
    color: var(--grey);
    border: 2px solid #ffffff00;
    padding: 0.1em;
    border-radius: 5px;
    cursor: pointer;
    transition-duration: 0.1s; 
    text-decoration-line: none;
    
}

a.navbutton2:hover{
    
    color: var(--black);
    background-color: var(--white);
    filter: drop-shadow(0 0 2px var(--grey));

    
}

.header { 
    grid-area: header; 
    background-image: var(--tgrey);
    color: var(--black);
    border-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding: 0.4em;
    line-height: 1em;
    font-family:times;
    font-size: 50px;
    letter-spacing: -4px;
    
}
.menu {
    grid-area: menu; 
    border-radius: 10px;
    padding:0.5em;
    margin: 0.8em;
    width: 150px;
    background-color: var(--white);
    letter-spacing: -1px;
    height: fit-content;
}


.main { 
    grid-area: main; 
    background-image: var(--olime);
    color: var(--black);
    border-radius: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding: 0.75em;
    font-size: 25px;
    letter-spacing: -0.2px;
    word-wrap: normal;
    overflow-wrap: normal;
    width: 505px;
 

}


.footer { grid-area: footer; }

.container {
    display: grid;
    width: 733px;
    grid-template-areas:
    'menu header header header header header'
    'menu main main main main main'
    'menu footer footer footer footer footer';
    background-image: var(--tlime);
    border: solid 3px var(--white);
    border-radius: 15px;
    filter: drop-shadow(0 0 5px var(--shadow));
    justify-self: center !important;
    
}
.imageboxright{
    border: solid 2px var(--grey);
    background-color: var(--white);
    padding: 0.25em;
    width: fit-content;
    font-size: 20px;
    line-height: 15px;
    float: right;
    margin-left: 1.5em;
    
}

.imageboxleft{
    border: solid 2px var(--grey);
    background-color: var(--white);
    padding: 0.25em;
    margin-right: 1.5em;
    width: fit-content;
    font-size: 20px;
    line-height: 15px;
    float: left;
}

.imageboxcenter{
    border: solid 2px var(--grey);
    background-color: var(--white);
    padding: 0.25em;
    width: fit-content;
    font-size: 20px;
    line-height: 15px;
    justify-self: center;
}

.img{
    border: solid 2px var(--grey);
}