@font-face {
    font-family: outline;
    src: url(../fonts/White\ On\ Black.ttf);
}

@font-face {
    font-family: Lemonmilk;
    src: url(../fonts/LEMONMILK-Regular.otf);
}

@font-face {
    font-family: VHS;
    src: url(../fonts/VCR_OSD_MONO_1.001.ttf);
}
body{
    margin: 0% auto;
    background: linear-gradient(#8b2cff,#180e42);
    display: flex;
    font-family: Lemonmilk;
    background-size: 100%, 100%;
    transition: 0s;
}

h1{
    font-family: outline;

}

a{
    text-decoration: none;
    color: #1f9288;
}

header{
    background: #28baae;
    color: #180e42;
    max-width: 10%;
    height: 220vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
}

header h1{
    font-size: 2.2vw;
}

header img{
    max-width: 80%;
    margin: 0% auto;
    border: #180e42 6px groove;
}

img{
    max-width: 100%;
    margin: 0% auto;
}

nav{
    display: flex;
    flex-direction: column;
}

nav a{
    margin: 0%;
    font-size: 1.8vw;
    text-decoration: none;
    font-family: outline;
    color: #180e42;
}

nav a:hover{
    margin: 0%;
    text-decoration: none;
    background: #ff6e25;
    transition: 1s;
}

main{
    color: #1f9288;
    font-size: 1.6vw;
    height: 100vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly   ;
}

article{
    background: whitesmoke;
    padding: 1%;
    border: #28baae 10px ridge;
}

article p{
    display: inline;

}

.center{
    margin: 0% auto;
    height: auto;
    max-width: 40%;
}

.Download{
    max-width: 10%;
    background: #28baae;
    padding: 1%;
    border: #28baae 10px solid;
    position: sticky;
    top: 0px;
    font-family: outline;
    color: #180e42;
    height: 3.4%;
}

.Chimera{
    background: #232323;
    color: white;
    font-family: VHS;
    max-width: 22%;
    height: auto;
    font-size: 1.2vw;
    margin: 1%;
}

.Chimera video{
    max-width: 50%;
    height: auto;
    display: inline;
    position: relative;
}

.photo{
    font-family: VHS;
    max-width: 30%;
    height: auto;
    font-size: 1.2vw;
    margin: 1%;
}

.photo img{
    max-width: 100%;
    height: auto;
}

.Alogo{
    background: black;
    color: #8268EE;
    max-width: 22%;
    height: auto;
    font-size: 1.2vw;
    margin: 1%;
}

.Alogo video{
    max-width: 50%;
    height: auto;
    display: inline;
    position: relative;
}

.wip{
    max-width: 22%;
    height: auto;
    font-size: 1.2vw;
    margin: 1%;
    background: #101010;
    color: yellow;
}

.wip img{
    max-width: 50%;
    height: auto;
    display: inline;
    position: relative;
}


@media only screen and (max-width: 800px) {

    main{
        color: #1f9288;
        font-size: 18px;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly   ;
        flex-direction: column;
    }

    body{
        margin: 0% auto;
        background: linear-gradient(#8b2cff,#180e42);
        display: flex;
        font-family: Lemonmilk;
        background-size: 100%;
        flex-direction: column;
        justify-content: center;
    }

    header{
        background: #28baae;
        color: #180e42;
        max-width: 100%;
        height: auto;
        width: 100%;
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: space-evenly;
    }
    
    header h1{
        font-size: 4vw;
    }
    
    header img{
        max-width: 100px;
        margin: 0%;
        border: #180e42 0px groove;
        height: auto;
    }
    
    nav{
        display: flex;
        flex-direction: column;
    }
    
    nav a{
        margin: 0%;
        font-size: 3vw;
        text-decoration: none;
        font-family: outline;
        color: #180e42;
    }
    
    nav a:hover{
        margin: 0%;
        scale: 110%;
        text-decoration: none;
    }

    .center{
        margin: 0% auto;
        height: auto;
        max-width: 100%;
        border: #28baae 10px ridge;
    }

    .center img{
        max-width: 100%;
        height: auto;
    }

    article{
        background: whitesmoke;
        padding: 1%;
        border: #28baae 10px ridge;
    }

    article p{
        display: inline;
    
    }

    .Download{
        max-width: 100%;
        background: #28baae;
        padding: 0%;
        border: #28baae 10px solid;
        font-family: outline;
        color: #180e42;
        height: auto;
    }

    .Download a:hover{
        background: #ff6e25;
    }

    .photo{
        font-family: VHS;
        max-width: 100%;
        height: auto;
        font-size: 1.2vw;
        margin: 0%;
    }
    
    .photo img{
        max-width: 100%;
        max-height: auto;
    }

    .Alogo{
        background: black;
        color: white;
        max-width: 100%;
        height: auto;
        font-size: 18px;
        margin: 0%;
    }
    
    .Alogo video{
        max-width: 100%;
        height: auto;
        display: inline;
        position: relative;
    }
    
    .wip{
        max-width: 100%;
        height: auto;
        font-size: 18px;
        margin: 0%;
    }
    
    .wip img{
        max-width: 100%;
        height: auto;
        display: inline;
        position: relative;
    }

    .Chimera{
        background: #232323;
        color: white;
        font-family: VHS;
        max-width: 100%;
        height: auto;
        font-size: 18px;
        margin: 0%;
    }
    
    .Chimera video{
        max-width: 100%;
        height: auto;
        display: inline;
        position: relative;
    }













}