/* IMPORTED FONTS */
@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@100..900&display=swap');

/* ANIMATIONS */
@keyframes topFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes downFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes widenLine80 {
    0% {
        transform: scaleX(0%);
    }
    100% {
        transform: scalex(80%);
    }
}

@keyframes widenLine60 {
    0% {
        transform: scaleX(0%);
    }
    100% {
        transform: scalex(60%);
    }
}

/* STYLES */
html{
    height: 100%;
    width: 100%;
    margin: 0;
}
body {
    top: 0vh;
    left: 0vw;
    margin: 0;
    height: 100%;
    width: 100%;
    background-color: rgb(132, 67, 151);
    overflow-x: hidden;
}
main{
    height: 100%;
    width: 100%;
    margin: 0;
}
h1{
    color: #ffffff;
    animation: topFadeIn 0.6s ease-out forwards;
    font-family: "Alexandria", Arial, sans-serif;
    -webkit-text-stroke: 6px, #241525;
    paint-order: stroke fill;
}
.top-bar{
    position: relative;
    top: 0;
    margin: right auto;
    width: 20vw;
    height: 4vh;
    max-width: 220px;
}
.top-bar-button1{
    position: relative;
    float: left;
    height: 100%;
    background: transparent;
    border: none;
    transition: transform 0.3s ease-in-out;
    aspect-ratio: 1;
    cursor: pointer;
}
.top-bar-button2{
    position: relative;
    float: right;
    height: 90%;
    background: transparent;
    border: none;
    transition: transform 0.3s ease-in-out;
    aspect-ratio: 1;
    cursor: pointer;
}
.top-bar-button1:hover{
    transform: scale(1.1);
}
.top-bar-button2:hover{
    transform: scale(1.1);
}
.top-bar-image-inverted{
    position: relative;
    top: 50%;
    left: 50%;
    height: 120%;
    transform: translate(-50%, -50%); 
    aspect-ratio: 0.96;
    filter: invert();
}
.top-gradient{
    position: relative;
    top: 0vh;
    left: 0vw;
    width: 100vw;
    height: 12.5vh;
    background-image: linear-gradient(to bottom, rgb(52, 26, 59), rgb(132, 67, 151));
    padding: 10px;
    text-align: center;
}
.under-text{
    color: #ffffff;
    animation: topFadeIn 1s ease-out forwards;
    font-family: Alexandria, sans-serif;
    font-style: italic;
    font-weight: 600;
    font-size: normal;
    opacity: 0.8;
}
h2{
    color: #ffffff;
    animation: topFadeIn 0.4s ease-out forwards;
    font-family: "Alexandria", Arial, sans-serif;
    -webkit-text-stroke: 6px, #241525;
    paint-order: stroke fill;
}
.about-me-text{
    color: #ffffff;
    font-family: "Alexandria", Arial, sans-serif;
    animation: downFadeIn 0.7s ease-out forwards;
}
.seperator_animated_80_percent{
    background-color: #ffffff;
    animation: widenLine80 0.5s ease forwards;
    height: 2px;
    fill: #ffffff;
    border-radius: 50px;
    margin: 0 auto;
}

.seperator_animated_60_percent{
    background-color: #ffffff;
    animation: widenLine60 0.8s ease forwards;
    height: 2px;
    fill: #ffffff;
    border-radius: 50px;
    margin: 0 auto;
}
.grid-container{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, 1fr);
    max-width: 80%;
    margin: 0 auto;
    padding-top: 2%;
    overflow-y: scroll;
    max-height: 300px;
}
.grid-container > div{
    display: flex;
    border: 4px solid white;
    margin: 0 auto;
    display: block;
    height: center;
    width: 95%;
    max-width: 95%;
}
.linked-video{
    border: 2px solid gray;
    background-color: black;
    position: relative;
    height: 52%;
    width: 80%;
    margin: 0 auto;
    
}
a{
    color: #f4bfff;
}
a:visited{
    color: #efa1ff;
}
.linked-video > iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
}
.project-title{
    color: #ffff;
    font-family: "Alexandria", Arial, sans-serif;
    width: 100%;
}
.project-description{
    color: #ffffff;
    font-family: "Alexandria", Arial, sans-serif;
    font-style: italic;
    width: 100%;
    font-size: 0.8vw;
}