*{
    box-sizing: border-box;
}
a:link {
    color:black;
    text-decoration: none;
}

body{
    margin:0;
    background: black;
    display: flex;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif ;
    flex-flow: column wrap;
    text-wrap:balance;
    cursor:default;
}
.draggble{
    cursor: grab;
}
h1{
    position: relative;
    font-weight: 800;
    font-size: min(6vw,6vh);
    color:aquamarine;
    left: 20px;
}
img{
    opacity: 1;
    transform: scale(1);
    translate: 0;
}

.dad1{
    position:fixed;
    left:3vw;
    top: -3vw;
    z-index: 8;
    width: 8vw;
    mix-blend-mode: lighten;
    animation: pulse 2s linear infinite;
}
.pg1{
    position: relative;
    width: 100vw;
    aspect-ratio: 16/9;
    background-color: aliceblue;
    display: flex;
    overflow: hidden;
}
.pg1 img{
    z-index: 2;
    width: 100vw;
}
.no4{
    position: absolute;
    transform:translateX(-40%)
}
.no3{
    animation: run  linear infinite;
    animation-range: entry exit;
}
.pg1 h1{
    position: absolute;
    bottom: 18%;
    animation: run 3S linear infinite;
    color: black;
}

.pg2{
    position: relative;
    overflow: hidden;
    padding: 10%;
    width: 100vw;
    aspect-ratio: 4/3;
}
.pg2 h1{
    color: aliceblue;
    font-size: 6svw;
    margin: 15%;
}
.dragon{
    position: absolute;
    width: 100%;
    right: 0;
    top: 30%;
    z-index: -2;
    transition: 500ms ease-out;
}
/*src: YouTube Hyperplexed*/
.gradient{
    animation: background-pan 3s infinite linear;
    background: linear-gradient(
        to right,
        lightblue,
        rgb(12, 12, 121),
        aquamarine,
        lightblue
    );
    background-size: 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.photo1{
    width: 30%;
    top:0;
    resize: both;
    cursor: grab;
}
.pulse{
    animation: pulse 800ms ease-out infinite;
}
.rotate{
    animation: rotate 1s linear infinite alternate ;
}
button{
    background-color: aquamarine;
    font-size: 2vw;
    margin: 1vh;
}
button:hover{
    box-shadow: 0 0 10px 5px aquamarine;
    cursor: pointer;
}
button:active{
    mix-blend-mode: luminosity;
}
.letter{
    position: fixed;
    bottom:10vh;
    right:0;
    width: 70vw;
    padding: 0px 60px 0px 5px;
    z-index: 4;
    font-size: 3vh;
    color: 
    rgb(12, 12, 121);
    background-color: aquamarine;
    transition: 800ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.letter img{
    position: absolute;
    width:20%;
    right: -5%;
    top: 30%;
}
.hide{
    opacity: 0;
    transform: scale(65%);
    translate: 60%;
    animation-play-state: paused;
}

.array{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding:2%;
    border: solid 2px aquamarine;
    transition: 800ms ease-out;
}
.array.gradient:hover{
    translate: 20%;
}

.quizbtn{
    color:aliceblue;
    font-size: 2vh;
    text-align: left;
    height:fit-content;
    width: fit-content;
    background-color: transparent;
}
.heart{
    max-width: 90vw;
    min-height:90%;
    margin-left: -4%;
    margin-top: -20%;
    z-index: -5;
}




@keyframes background-pan{
    0%{
        background-position: 0% center;
    }
    100%{
        background-position: -200% center;
    }
}
@keyframes run {
    0%{
        transform: translateX(120%);
    }
    100%{
        transform: translateX(-20%);
    }
}
@keyframes rotate{
    to{
        transform: rotate(30deg);
    }
}
@keyframes pulse{
    0%{
        opacity: 0;
        transform: translate(0);
    }
    60%{
        opacity: 1;
        transform: translateY(5px);
        transform: translateX(2px);
    }
    100%{
        opacity: 1;
        transform: translateY(0px);
        transform: translateX(10px);
    }
}