@font-face {
    font-family: banker;
    src: url(retro_banker.ttf);
  }
body{
    font-family: banker;
    background-color: rgb(18, 18, 36);
}
.page,.footer2{
    width:700px;
    background:rgb(47,47,73);
    margin: auto;
   
}
.header{
    height:6em;
    background-image: url(imgs/temp.png);
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
}

.section1, .section2{
    display:flex;
    height: 15em;
}
.nav{
    width: 10em; 
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    color:#eaecf8
}
ul{
    color:#3ff357;
    background-color: rgb(29, 31, 37);
    text-decoration: none;
    padding:0;
    margin:0;
    text-align: center;
    a{
        color:#3ff357;
        text-decoration: none;
        }
    
   
}
a{
    color:maroon;
    text-decoration: none;
}

li{
    background: linear-gradient(0deg,rgb(29, 31, 37), rgb(47, 47, 73) 100%);
    width:100%;
    list-style: none;
    padding: 3px;
    margin:auto;
    border-radius: 5px;
    p{
        margin:0;
    }
}
a{
li:hover:before {
    content:">";
    padding-right:5px;
}}

.main, .update{
    padding:1em;
    background-color: rgb(209, 202, 209);
    overflow: auto;
    width:100%;
    height: 13em;

}

div,li{
    outline: 2px black solid;
    outline-offset: -1px;
}
.show{
    width:30em;
    padding:0;
    margin:auto;
    height:100%;
    text-align: center;
    
    p{
        color:#eaecf8
    }
    img{
        background-color: #eaecf8;
        padding:0.2em;
        width:50%;
        max-height: 70%;
        margin:0.7em;
        transition: all .2s ease-in-out;
    }
    img:hover{
        transform:scale(2);
        
    }
    
}
.decor{
    height:50px;
    padding:4px;
    img{
        height:50px
    }
}
.buttons{
    padding:0.3em;
    text-align:center;display:flex;justify-content:space-evenly;
}
.footer{
    font-size: 0.8em;
    text-align: center;
    margin-top:0px;
    color:#eaecf8
}



@media (max-width: 700px) {
    .page,.show,.footer2{
        width:100%;
    }
    .header{
        background-size: cover;
        height:4em
    }
    .decor{
        height:auto;
    }
}
@media (max-width: 500px) {
    
    .page,.show,.nav{
        width:100%;
    }

    .section1, .section2{
        flex-direction: column;
        height:auto;
    }
    .main, .update{
        width:revert;
    }
    li{
        display:inline-block;
        offset:hidden;
        padding:0;
        text-align: center;
        height:2em;
        padding-top:0.2em
    }
    .buttons{
        flex-wrap: wrap;
    
    }
}