html {
    background-color: #212629;
    color: rgb(209, 216, 222);
    
    font-family: 'Unageo', sans-serif;

    scroll-behavior: smooth;
}

body {
   display: flex;
   flex-direction: column;
   justify-content: center;
}

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

.fade-in {
    animation-name: fade-in;
    animation-duration: 1s;
    animation-timing-function: ease-out;

    justify-content: center;
    align-items: center;

    text-align: center;
    align-self: center;
}

nav {
    top:0em;
    position: sticky;
    display: flex;
    flex-direction: row;
    align-items: top;
    height: 4.5em;
    background-image: linear-gradient(#212629FF, #212629FF, #212629FF, #212629FF, #212629FF, #212629FF, #21262900);
    
    gap: 2em;
    padding-left: 0.2em;
    margin-top: -3em;
}

.header-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 0.3em;
}
.header-item h1 {
    font-size: x-large;
    color: rgb(209, 216, 222);
    transition: color 0.4s ease;
}
.header-item:hover h1 {
    color: rgb(255, 61, 215);
}

.header-dropdown-holder {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.header-dropdown-holder .header-item {
    align-self: flex-start;
}
.header-dropdown-button {
    background-image: none;
    background: none;
    border: none;
    appearance: none;
}
.header-dropdown-holder .header-dropdown-list {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    align-items: center;
    visibility: hidden;
    background-color: #212629;
    border-bottom-left-radius: 0.8em;
    border-bottom-right-radius: 0.8em;
    margin-top: -0.8em;
    gap: 0em;
    box-shadow: 0em 0.05em 0em 0.1em #0e0f0fff;
}
.header-dropdown-holder:hover .header-dropdown-list {
    visibility: visible;
}

.header-dropdown-list-item {
    font-size: 1em;
    color: rgb(209, 216, 222);
    transition: color 0.4s ease;
}
.header-dropdown-list-item:hover {
    color: rgb(255, 61, 215);
}


.header-text {
    font-size: x-large;
    color: rgb(209, 216, 222);
    transition: color 0.4s ease;
}
.header-text:hover {
    color: rgb(255, 61, 215);
}

.header-item .header-dropdown-arrow polyline {
    stroke: rgb(209, 216, 222);
    transition: stroke 0.4s ease;
}
.header-item:hover .header-dropdown-arrow polyline {
    stroke: rgb(255, 61, 215);
    rotate: 180deg;
}



.title {
    font-size: 5em;
    animation-name: glow-pink;
    animation-duration: 4s;
    animation-timing-function: ease-out;
    color: rgb(255, 61, 215);
    text-shadow: 0em 0em 0.05em rgb(255, 61, 215);
}


.cards-holder {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    justify-self: center;
    row-gap: 1.5em;
    column-gap: 1.5em;
    width: 90%;
    margin: 0 auto;
    margin-bottom: 3em;
}

.card {
    flex: 1 1 calc(30% - 1.5em);
    min-width: 20em;

    display: flex;
    flex-direction: column;
    align-items: center;
    /*visibility: hidden;*/
    background-color: #212629;

    border-bottom-left-radius: 0.8em;
    border-bottom-right-radius: 0.8em;
    border-top-left-radius: 0.8em;
    border-top-right-radius: 0.8em;

    box-shadow: 0em 0em 0em 0.1em #0e0f0fff;

}
.card-link {
    width: 100%;
}
.card-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 100%;
    background-color: #212629;

    border-top-left-radius: 0.8em;
    border-top-right-radius: 0.8em;

    box-shadow: 0em 0em 0em 0.1em #0e0f0fff;
}
.card-middle {
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    /* margin: 0 auto; */
    background-color: #212629;
}
.card-middle a img {
    flex-direction: column;
    margin: 0 auto;
    width: 100%;
    aspect-ratio: 1;
    object-fit: scale-down;
}
.card-middle button {
    background-color:#212629;
    align-self: center;
    height: 5em;
    border: none;
}
.card-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    width: 100%;
    height: 100%;
    background-color: #212629;

    border-bottom-left-radius: 0.8em;
    border-bottom-right-radius: 0.8em;

    box-shadow: 0em 0em 0em 0.1em #0e0f0fff;
    padding-bottom: 1em;
}
.card-bottom p {
    width: 90%;
    margin-bottom: -0.2em;
}

.links-holder {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 6em;
    margin-top: 2em;
    margin-bottom: 1.2em;
}
.links-holder a {
    width: 3em;
    height: 3em;
}
.links-holder a img {
    width: 3em;
    height: 3em;

    aspect-ratio: 1;
    object-fit: scale-down;
}


@keyframes fade-in {
    from {
        opacity: 0%;
    }
    to {
        opacity: 100%;
    }
}

@keyframes glow-pink {
    from {
        color: rgb(209, 216, 222);
        text-shadow: 0em 0em 0em rgb(255, 61, 215);
    }
    to {
        color: rgb(255, 61, 215);
        text-shadow: 0em 0em 0.05em rgb(255, 61, 215);
    }
}


@font-face {
    font-family: 'Unageo';
    src: url("assets/fonts/Unageo[wght\,ital].woff2");
}