@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'); */

:root {
    background-color: #101010;
    color: white;
    font-family: "Poppins", Helvetica, Arial, sans-serif;
}

* {
    margin: 0;
}

body {
    width: 95vw;
    margin: 0 auto;
}

header {
    height: 98vh;
    display: flex;
    align-items: end;
}

header.page {
    height: 25vh;
    display: flex;
    align-items: end;
}

main {
    margin: 50px 0 0 0;
}

h1 {
    font-size: 5vw;
    filter: drop-shadow(0 0 5px #ffffff50);
    transform: translateX(2.5vw);
}

article {
    border-bottom: solid 1px white;
    margin: 0 0 25px 0;
}

a {
    color: white;
    text-decoration: none;
}

h2, h3 {
    display: inline-block;
    font-size: 3vw;
    filter: drop-shadow(0 0 5px #ffffff50);
    transform: translateX(2.5vw);
    cursor: pointer;
    transition: ease-in-out .2s;
}

h2 {
    font-size: 3vw;
}

h3 {
    font-size: 2vw;
}

h2::before, h3::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0vw;
    z-index: -1;
    transition: ease-in-out .2s;
    transform: translateX(-2.5vw);
}

h2:hover::before, h3:hover::before {
    width: 60vw;
}

p {
    margin: 5px 0 25px 2.5vw;
    width: 40vw
}

.cta-link {
    text-decoration: underline;
}

/* SUB PROJECTS */

.sub-project::before {
    background-color: white;
}

.sub-project:hover {
    color: black
}

/* COLOR SCREEN */

.color-screen::before {
 
    background: linear-gradient(90deg,red,orange,yellow,green,cyan,blue,violet);
}
.color-screen:hover {
    color: white
}

/* CONWAY STRUCTURES */

.conway-structures::before {
    background-color: #00ff00;
}

.conway-structures:hover {
    color: #0000ff;
}

/* FANCY SNOWFLAKES */

.fancy-snowflakes::before {
    background: linear-gradient(135deg, #b8ffb8 0%, #b8ffb8 25%, #ffb8b8 25%, #ffb8b8 50%, #b8b8ff 50%, #b8b8ff 75%, #fff4b8 75%, #fff4b8 100%);
}

.fancy-snowflakes:hover {
    color: white;
}

/* L URBAN */

.l-urban::before {
    background: #7d8080
}

.l-urban:hover {
    color: #e9d36f;
}

/* SNOWDOME */

.snowdome::before {
    background: white
}

.snowdome:hover {
    color: #9f9f9f;
}

/* SENKYS */

.senkys::before {
    background-color: #413a87;
}

.senkys:hover {
    color: white
}

/* 280 TO ZERO */

.to-zero::before {
    background-color: white;
}

.to-zero:hover {
    color: black
}

/* THREE.JS EXPERIMENTS */

.threejs-experiments::before {
    background-color: black;
}

.threejs-experiments:hover {
    color: white
}

/* LA MAISON JUNGLE */

.lmj::before {
    background-color: #31b572;
}

.lmj:hover {
    color: white
}

/* FISHHERD II */


@keyframes Color{
    0%{
        color:#00A9A9;
    }
    
    12.5%{
        color:#3FE86A;
    }
    
    25%{
        color:#7FD42A;
    }
    
    37.5%{
        color:#BF9415;
    }
    
    50%{
        color:#FB5154;
    }
    
    62.5%{
        color:#BF1595;
    }
    75% {
        color:#7F29D4;
    }
    87.5% {
        color:#3F6AE8;
    }
    100% {
        color:#00A9A9;
    }
}

@keyframes BackgroundColor{
    0%{
        background-color:#00A9A9;
    }
    
    12.5%{
        background-color:#3FE86A;
    }
    
    25%{
        background-color:#7FD42A;
    }
    
    37.5%{
        background-color:#BF9415;
    }
    
    50%{
        background-color:#FB5154;
    }
    
    62.5%{
        background-color:#BF1595;
    }
    75% {
        background-color:#7F29D4;
    }
    87.5% {
        background-color:#3F6AE8;
    }
    100% {
        background-color:#00A9A9;
    }
}

.fishherd-ii::before {
    animation: BackgroundColor 4s linear infinite;
}


.fishherd-ii:hover .fh2-letter1 {animation: Color 2s linear -1.1s infinite;}
.fishherd-ii:hover .fh2-letter2 {animation: Color 2s linear -1.0s infinite;}
.fishherd-ii:hover .fh2-letter3 {animation: Color 2s linear -.9s infinite;}
.fishherd-ii:hover .fh2-letter4 {animation: Color 2s linear -.8s infinite;}
.fishherd-ii:hover .fh2-letter5 {animation: Color 2s linear -.7s infinite;}
.fishherd-ii:hover .fh2-letter6 {animation: Color 2s linear -.6s infinite;}
.fishherd-ii:hover .fh2-letter7 {animation: Color 2s linear -.5s infinite;}
.fishherd-ii:hover .fh2-letter8 {animation: Color 2s linear -.4s infinite;}
.fishherd-ii:hover .fh2-letter9 {animation: Color 2s linear -.3s infinite;}
.fishherd-ii:hover .fh2-letter10 {animation: Color 2s linear -.2s infinite;}
.fishherd-ii:hover .fh2-letter11 {animation: Color 2s linear -.1s infinite;}


.fishherd-ii {
    display: flex;
    align-items: center;
    width: 95%;
}

/* POKIMAX IV */

.pokimax-iv::before {
    background-color: #A7A7A7;
}

.pokimax-iv:hover {
    color: #252525
}

/* SWARM */

.swarm::before {
    background-color: #479CFF;
}

.swarm:hover {
    color: #252525
}

/* APICHU */

.apichu::before {
    background-color: #46b6da;
}

.apichu:hover {
    color: #252525
}

/* STARQ */

.starq::before {
    background-color: #54ffbd;
}

.starq:hover {
    color: #252525
}

/* RANDOM WALK */

.random-walk::before {
    background-color: #eee5da;
}

.random-walk:hover {
    color: #252525
}

/* MARIO KART RANDOMIZER */

.mario-kart-randomizer::before {
    background-color: #fde2ff;
}

.mario-kart-randomizer:hover {
    color: #252525
}

/* SOMARICHU */

.somarichu::before {
    background-color: #ebfeff;
}

.somarichu:hover {
    color: #252525
}

/* LDAV6 */

.ldav6::before {
    background: linear-gradient(90deg, #191830 0%, #191830 70%, #ff0000 100%);
}

.ldav6:hover {
    color: white;
}

/* MKWR */

.mkwr::before {
    background: #e9c60f;
}

.mkwr:hover {
    color: white;
}

/* RANDOMZIERS */

.r::before {
    background: #f4eddd;
}

.r:hover {
    color: #353535;
}

@media screen and (max-width: 770px) {
    h2:hover::before, h3:hover::before {
        width: 95vw;
    }

    .page h2 {
        font-size: 5vw;
    }
}

@media screen and (max-width: 600px) {
    header { 
        height: auto
    }
    h2:hover::before, h3:hover::before {
        width: 95vw;
    }
    h1 {
        margin-top: 50px;
        font-size: 9vw;
    }
    h2, h3 {
        font-size: 5vw;
    }
}