@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined');
@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');


:root {
    --bg-color: #0a002c;
    --text-color: #ffffff;
    --main-color: #ae00ff;
    --secondary-color: #7700ff;
    --third-color: #6a00ff;
    --sb-track-color: #444b4e;
    --sb-thumb-color: #a017e0;
    --sb-size: 6px;
}

body {
    background-color: var(--bg-color);
    margin: 0;
    font-family: 'Poppins', sans-serif;
    overflow: auto;
}

img {
    -webkit-user-drag: none;
    display: block;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
    margin: 0;
    z-index: 1000;
    position: fixed;
    bottom: -15vh;
    width: 100%;
}

.bg-container {
    overflow: hidden;
}

#background {
    width: 100%;
    height: 99%;
    top: 0;
    left: 0;
    z-index: -999;
    position: fixed;
}

.box {
    position: fixed;
    bottom: 2%;
    left: -50%;
    transform: translateX(50%);
}

.wave {
    position: absolute;
    opacity: 0.4;
    width: 1500px;
    height: 1300px;
    margin-left: -150px;
    margin-top: -250px;
    background-color: rgba(4, 150, 207, 0.116);
    backdrop-filter: blur(15px);
    border-radius: 83%;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.wave.-one {
    animation: rotate 40000ms infinite linear;
    opacity: 0.05;
    backdrop-filter: blur(15px);
    border: 2px solid #19FFC9;
}

.wave.-two {
    animation: rotate 24000ms infinite linear;
    opacity: 0.1;
    border: 3px solid #19FFC9;
}

.aur_cont {
    margin: 35px auto 0;
    display: table;
    height: auto;
    position: fixed;
    right: 1%;
    top: 15%;
}

.aur_cont .aur {
    transform: skew(-0.06turn, 18deg);
    display: block;
    width: 0;
    min-height: 122px;
    float: left;
    margin-left: 100px;
    border-radius: 5% 52% 30px 20px;
    opacity: 1;
}

.aur_cont .aur.aur_1 {
    box-shadow: var(--secondary-color) 0px 0px 80px 20px;
    margin-top: 2px;
    animation: topup 7031ms infinite linear;
}

.aur_cont .aur.aur_2 {
    box-shadow: var(--main-color) 0px 0px 80px 20px;
    margin-top: 27px;
    animation: topup 10359ms infinite linear;
}

.aur_cont .aur.aur_3 {
    box-shadow: var(--secondary-color) 0px 0px 80px 20px;
    margin-top: 27px;
    animation: topup 5515ms infinite linear;
}

.aur_cont .aur.aur_4 {
    box-shadow: var(--third-color) 0px 0px 80px 20px;
    margin-top: -30px;
    animation: topup 11580ms infinite linear;
}

.aur_cont .aur.aur_5 {
    box-shadow: var(--secondary-color) 0px 0px 80px 20px;
    margin-top: 0px;
    animation: topup 6773ms infinite linear;
}

.aur_cont .aur.aur_6 {
    box-shadow: var(--main-color) 0px 0px 80px 20px;
    margin-top: 45px;
    animation: topup 8622ms infinite linear;
}

.aur_cont .aur.aur_7 {
    box-shadow: var(--third-color) 0px 0px 80px 20px;
    margin-top: 0px;
    animation: topup 11510ms infinite linear;
}

.aur_cont .aur.aur_8 {
    box-shadow: var(--secondary-color) 0px 0px 80px 20px;
    margin-top: 5px;
    animation: topup 10258ms infinite linear;
}

.aur_cont .aur.aur_9 {
    box-shadow: var(--main-color) 0px 0px 80px 20px;
    margin-top: 9px;
    animation: topup 12160ms infinite linear;
}

.aur_cont .aur.aur_10 {
    box-shadow: var(--third-color) 0px 0px 80px 20px;
    margin-top: -27px;
    animation: topup 12931ms infinite linear;
}

@keyframes drift {
    from {
        transform: rotate(0deg);
    }

    from {
        transform: rotate(360deg);
    }
}

@keyframes topup {

    0%,
    100% {
        transform: translatey(0px);
        opacity: 0;
    }

    50% {
        transform: translatey(150px);
        opacity: 0.1;
    }

    25%,
    75% {
        opacity: 1;
    }
}

@keyframes northern {
    0% {
        transform: translate(5%, -2%);
    }

    25% {
        transform: translate(10%, 7%);
    }

    40% {
        transform: rotate(-10deg);
    }

    60% {
        transform: translate(7%, -2%);
    }

    85% {
        transform: translate(6%, 3%) rotate(12deg);
    }

    100% {
        transform: none;
    }
}

/*
.nav {
    display: flex;
    flex-direction: row;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translate(-50%);
    backdrop-filter: blur(2px);
    background-color: transparent;
    width: auto;
    height: 58px;
    align-items: center;
    border: 1px solid var(--main-color);
    border-radius: 999px;
    
}
.navItemsParent{
    
}
.nav * {
    margin-left: 10px;
    margin-right: 10px;
}

.nav .navImage {
    margin-top: 0;
    width: 32px;
    height: 32px;
    margin: 6px;
    border-radius: 50%;
}

.nav hr {
    height: 100%;
    width: 2px;
    background: #646464;
    border: none;
    margin: 5px 3px;
}

.nav .right-div {
    position: absolute;
    right: 4px;
    display: flex;
    align-self: flex-end;
    justify-content: flex-end;
}
.nav .navItem {
    color: var(--text-color);
    text-decoration: none;
    font-size: 16px;
    display:flex;
    align-items: center;
    mix-blend-mode: difference;
}
.navShape{
    width: 100px;
    position: relative;
    left: -100px;
    height: 54px;
    background-color: var(--text-color);
    transition: all 0.2s ease-in-out;
    border-radius: 32px;
    z-index: -1;

}
.nav .navItem span.material-symbols-outlined {
    font-size: 26px;
    margin-right: 2px;
}

*/


.nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translate(-50%);
    backdrop-filter: blur(2px);
    background-color: transparent;
    width: calc(100% - 2px);
    height: 58px;
    align-items: center;
    align-content: center;
    align-self: center;
    border-radius: 0;
    z-index: 3;
    box-shadow: 2px 2px 10px var(--main-color);
}

.nav * {
    margin-left: 5px;
    margin-right: 5px;
}

.nav a:has(.navImage) {
    width: fit-content;
    height: auto;
}

.nav .navImage {
    width: 32px;
    height: 32px;
    margin: 6px;
    border-radius: 50%;
}

.nav .navImage:hover {
    -webkit-animation: rotate-center 0.25s linear forwards;
    animation: rotate-center 0.25s linear forwards;
}

/*
I USED A CSS ANIMATION THING, I DON'T CARE WHAT ANYONE THINKS, CAUSE I DON'T DO CSS, IM PROUD OF WHAT I'VE DONE SO FAR.
*/

/* ----------------------------------------------
 * Generated by Animista on 2024-9-18 21:7:34
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation rotate-center
 * ----------------------------------------
 */
@-webkit-keyframes rotate-center {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotate-center {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


.nav hr {
    height: 100%;
    width: 2px;
    background: #646464;
    border: none;
    margin: 5px 3px;
}

.nav .middle-div {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: center;
    margin: 6px 3px;
    justify-content: flex-end;
    color: var(--text-color);
}

.nav .right-div {
    position: absolute;
    right: 4px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: center;
    margin: 6px;
    justify-content: flex-end;
}


.nav .navItem {
    color: var(--text-color);
    text-decoration: none;
    font-size: 16px;
    display: flex;
    align-items: center;
    mix-blend-mode: difference;
}

.nav .navItem span.material-symbols-outlined {
    font-size: 26px;
    margin-right: 2px;
}

.nav .navItem .navText {
    position: relative;
    font-size: 16px;
    color: #FFFFFF;
    letter-spacing: 1px;
    z-index: 1;
}

.nav .navItem .navText:hover:before,
.nav .navItem .navText:hover:after {
    display: block;
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.8;
}

.nav .navItem .navText:hover:before {
    animation: glitch-it 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
    color: #9A16FF;
    z-index: -1;
}

.nav .navItem .navText:hover:after {
    animation: glitch-it 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
    color: #19FFC9;
    z-index: -2;
}

.page {
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: fixed;
    z-index: 2;
    width: 100vw;
    max-height: calc(100% - 62px);
    overflow-y: auto;
    backdrop-filter: blur(4px);
}

.popup {
    width: 100vw;
    height: 100vh;
    margin: auto;
    border-radius: 14px;
    z-index: 5;
    overflow: auto;
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    background-color: transparent;
    align-items: center;
    justify-content: center;
}

.popup .popup-close {
    position: fixed;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 30px;
    box-shadow: none;
    background-color: transparent;
    color: var(--text-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

.popup .popup-close span.material-symbols-outlined {
    font-size: 20px;
}

.popup .popup-close:hover {
    border: 1px solid var(--secondary-color);
}

.pfp {
    width: 120px;
    height: 120px;
}

.name {
    color: var(--main-color);
    font-size: 30px;
    text-align: center;
    margin-bottom: 2px;
}

.subname {
    color: var(--text-color);
    font-size: 20px;
    text-align: center;
    margin-bottom: 3px;
}

.definition,
.description {
    color: var(--text-color);
    text-align: center;
}

.definition {
    font-size: 12px;
}

.description {
    margin: 30px;
    font-size: 15px;
}

.link {
    text-decoration: none;
    color: var(--main-color);
}

.socials-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.socials-container hr {
    height: 100%;
    width: 2px;
    background: #929292;
    border: none;
    margin: 0px 4px;
}

.social {
    margin: 2px;
    color: var(--text-color);
    font-size: 48px;
    width: 48px;
    height: 48px;

    -webkit-user-drag: none;
}

.container ul {
    padding: 0;
    list-style: none;
}

.project {
    list-style: none;
    color: var(--text-color);
    padding: 4px 8px 2px 8px;
    backdrop-filter: blur(3px);
    border-radius: 10px;
    margin: 5px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    border: 1px solid var(--text-color);
}

.project img {
    width: 96px;
    height: auto;
    border-radius: 10px;
}

.project:hover {
    color: var(--main-color);
}

.project-image {
    max-width: 75%;
    height: auto;
}

.project-link {
    color: var(--text-color);
    text-decoration: none;
    font-size: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
}

.in-progress {
    font-size: 36px;
    color: var(--text-color);
}

.devs-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
}

.devs-container .dev-img img {
    width: 96px;
    height: auto;
    border-radius: 50%;
}

.devs-container .dev-name {
    color: var(--text-color);
    font-size: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
}

.devs-container .dev-name .name {
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.3s ease;

}

.devs-container .dev-name .name:hover {
    color: var(--hover-color);
}

.grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.banner {
    margin-top: 10vh;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    align-content: center;
    align-items: center;
}

.banner .name {
    position: sticky;
    font-size: 50px;
    font-weight: bold;
    letter-spacing: 3px;
    z-index: 4;
    color: var(--text-color);
    text-align: center;
    margin: 0;
    z-index: 2;
}

.banner .name:before,
.banner .name:after {
    display: block;
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.8;
}

.banner .name:before {
    animation: glitch-it 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
    color: #9A16FF;
    z-index: -1;
}

.banner .name:after {
    animation: glitch-it 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
    color: #19FFC9;
    z-index: -2;
}

@keyframes glitch-it {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translate(-2px, 2px);
    }

    40% {
        transform: translate(-2px, -2px);
    }

    60% {
        transform: translate(2px, 2px);
    }

    80% {
        transform: translate(2px, -2px);
    }

    to {
        transform: translate(0);
    }
}

.list {
    list-style: none;
    color: var(--text-color);
    padding: 4px 8px 2px 8px;
    margin: 5px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
}

.about-me {
    display: grid;
    grid-template-columns: 0.5fr 0.75fr;
    gap: 2em;
    padding: 2em;
}

.about-me .about,
.more .item {
    background: transparent;
    backdrop-filter: blur(3px);
    border-radius: 10px;
    padding: 1.5em;
}