root,
* {

    /* background: linear-gradient(to bottom, rgb(37, 0, 78), rgb(61, 27, 61), rgb(37, 0, 78)); */

    background-attachment: fixed;
    background-size: cover;
    -webkit-font-smoothing: subpixel-antialiased;

}

html {
    min-height: 100vh;
    -webkit-font-smoothing: subpixel-antialiased;
}

*[data-theme="dark"] {
    transition: 200ms;

    color: rgb(242, 240, 255);
    background: linear-gradient(to bottom, rgb(37, 0, 78), rgb(61, 27, 61), rgb(37, 0, 78));
    --collapse-button-bg-color: linear-gradient(90deg, rgb(68, 34, 107), rgb(89, 47, 133), rgb(87, 4, 182));
    --collapse-button-text-color: linear-gradient(21deg, rgb(0, 0, 0), rgb(89, 47, 133), rgb(119, 0, 255));
    --nav-gradient: linear-gradient(to bottom, rgb(37, 0, 78), rgb(61, 27, 61), rgb(37, 0, 78));
    --nav-item: linear-gradient(9deg, rgb(64, 0, 137) 10%, rgb(177, 88, 255) 30%, rgb(90, 49, 136) 40%);
    /* --nav-item: linear-gradient(90deg, rgb(255, 255, 255), rgb(217, 181, 255), rgb(176, 114, 246)); */
    --content-bg: linear-gradient(to bottom, rgb(60, 7, 120), rgb(47, 0, 98), rgb(90, 1, 103));
    --collapse-button-hover-bg-color: linear-gradient(90deg, rgb(255, 255, 255), rgb(217, 181, 255), rgb(176, 114, 246));
    --collapse-button-hover-text-color: rgb(7, 4, 7);
    --border-gradient: linear-gradient(9deg, rgb(129, 31, 240), rgb(241, 120, 241) 50% 90%, rgb(245, 236, 255) 99% 100%);
    --footer-bg: rgb(76, 39, 94);

}

*[data-theme="light"] {
    transition: 200ms;

    color: rgb(0, 0, 0);
    background: linear-gradient(to bottom, rgb(211, 251, 255), rgb(220, 249, 255), rgb(209, 253, 255));

    --collapse-button-bg-color: linear-gradient(90deg, rgb(214, 218, 255), rgb(183, 223, 255), rgb(159, 212, 252));
    --collapse-button-text-color: rgb(0, 0, 0);
    --nav-gradient: linear-gradient(to bottom, rgb(255, 255, 255), rgb(176, 197, 243), rgb(144, 190, 255));
    --nav-item: linear-gradient(9deg, rgb(56, 99, 187) 10%, rgb(88, 124, 255) 30%, rgb(33, 55, 133) 40%);
    --content-bg: linear-gradient(to bottom, rgb(217, 244, 255), rgb(195, 216, 255), rgb(138, 183, 255));

    --collapse-button-hover-bg-color: linear-gradient(90deg, rgb(124, 164, 255), rgb(22, 27, 79), rgb(26, 52, 137));
    --collapse-button-hover-text-color: rgb(255, 255, 255);
    --border-gradient: linear-gradient(9deg, rgb(0, 71, 186), rgb(36, 69, 255) 50% 75%, rgb(0, 187, 255) 85% 100%);
    --footer-bg: rgb(186, 212, 255);
    --alt-border: linear-gradient(9deg, rgb(0, 71, 186), rgb(36, 69, 255) 50% 75%, rgb(0, 187, 255) 85% 100%);

}

/* *[data-theme="green"] {
    transition: 200ms;

    color: rgb(0, 0, 0);
    background: linear-gradient(to bottom, rgb(211, 251, 255), rgb(206, 255, 227), rgb(189, 229, 255));

    --collapse-button-bg-color: linear-gradient(90deg, rgb(214, 218, 255), rgb(183, 255, 229), rgb(159, 212, 252));
    --collapse-button-text-color: rgb(0, 0, 0);
    --nav-gradient: linear-gradient(to bottom, rgb(255, 255, 255), rgb(176, 243, 224), rgb(180, 218, 252));
    --nav-item: linear-gradient(9deg, rgb(56, 99, 187) 10%, rgb(88, 124, 255) 30%, rgb(33, 55, 133) 40%);
    --collapse-button-hover-bg-color: linear-gradient(90deg, rgb(57, 240, 79), rgb(13, 158, 102), rgb(16, 32, 121));
    --collapse-button-hover-text-color: rgb(255, 255, 255);
    --border-gradient: linear-gradient(9deg, rgb(0, 71, 186), rgb(36, 69, 255) 50% 75%, rgb(0, 255, 153) 85% 100%);
    --footer-bg: rgb(186, 212, 255);

} */




a {
    color: inherit;
    background: none;
    text-decoration: none;
}

h2 {
    font-size: min(30px, 8vh);
    margin: 0px 0px 0px 0px;
    padding: 20px 0 0px 0px;
}



#titlescreen {
    align-items: center;
    text-align: center;

}

#main {
    margin: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    justify-content: space-between;
    padding: min(50px, 5vh) 0 0 0;
    font-family: "Josefin Sans";
    min-height: 100vh;
    grid-template-rows: auto auto 2fr auto;


}

#themeButton {
    display: flex;
    text-align: right;
    padding-right: min(20px, 10vh);
}


#navBar {
    display: flex;
    flex-direction: right;
    justify-content: space-between;
}

#myName {
    background: color;
    padding-top: 0;
    font-size: min(130px, 16vw);
    font-family: "Oswald", sans-serif;
}


#navContainer {
    position: fixed;
    background: color;
    background: var(--nav-gradient);
    border-radius: 30px;
    padding: min(2vh, 20px);
    /* width: min(45vw, 300px); */
    font-family: "Comfortaa", sans-serif;
    margin: 0px;
    display: flex;
    justify-content: space-evenly;
    top: 0;
    margin-top: 10px;
    margin-left: 5px;
    transform-origin: center;
    flex-direction: none;
    z-index: 99;
}

#navContainer::before {
    background: color;
    content: "";
    position: absolute;
    inset: 0;
    gap: 10px;
    border-radius: 30px;
    padding: 3px;
    background: var(--border-gradient);
    mask:
        conic-gradient(#000 0 0) content-box,
        conic-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 23;


}

#navContainer ol {
    flex-shrink: 1;
    padding: 0px;
    margin: 0px;
    list-style: none;
    display: flex;
    justify-content: space-evenly;
    background: none;

}

#navContainer li {
    flex-shrink: 1;
    font-size: min(30px, 4vw);
    padding: 5px;
    background: none;
    z-index: 3;

}

#navContainer li:hover {
    flex-shrink: 1;

    background: var(--nav-item);
    border-radius: 10px;
    border-width: 10px;
    padding: 5px;
    color: rgb(255, 255, 255);

    transform: scale(1.2);
    transition: 100ms;
    text-shadow: -1px -1px 0 #000;
    z-index: 5;
}

#mission {
    padding: 0px min(3rem, 101px) 0px min(3rem, 101px)
}

@media (max-width: 500px) {
    .hide-mobile {
        display: none;
    }
}

@media (min-width: 500px) {
    .show-mobile {
        display: none;
    }
}





#foot {
    position: relative;
    justify-content: center;
    text-align: center;
    background: var(--footer-bg);
    max-width: 100%;
    bottom: 0;
    min-height: 30px;
    line-height: 30px;

}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
    position: relative;

    appearance: none;
    font-family: "Archivo Black", sans-serif;
    background: var(--collapse-button-bg-color);
    color: var(--collapse-button-text-color);
    cursor: pointer;
    width: 90%;
    outline: none;
    font-size: min(10vw, 50px);
    border-radius: 40px;
    border: none;
    padding: 5px 0px 5px 0px;
    transition: 200ms;

}

.collapsible::before {
    background: color;
    content: "";
    position: absolute;
    inset: 0;
    gap: 40px;
    border-radius: 40px;
    padding: 4px;
    background: var(--border-gradient);
    mask:
        conic-gradient(#000 0 0) content-box,
        conic-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

.active,
.collapsible:hover {
    background: var(--collapse-button-hover-bg-color);
    color: var(--collapse-button-hover-text-color);
    width: 100%;
    transition: 200ms;
}

.collapsible:not(hover) {
    background: var(--collapse-button-bg-color);
    color: var(--collapse-button-text-color);
}



.content {
    max-height: 0;
    padding: 0 0;
    overflow: hidden;

    transition: max-height 250ms ease-out;

}

.contentContainer {
    padding-bottom: 50px;
    gap: 0rem;
    display: flex;
    justify-content: space-evenly;
    overflow: auto;
}

@media (max-width: 600px) {
    .contentContainer {
        display: flex;
        flex: 100vh;
        flex-direction: column;
        gap: 2rem;
        min-height: 100vh;
        align-items: center;
    }
}




.contentBox {

    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: left;
    text-align: left;
    padding: 0px min(3rem, 101px) 0px min(3rem, 101px);
    margin-top: 0;
    margin-bottom: auto;
    background: var(--content-bg);
    border-radius: 30px;
    flex-basis: 50%;
    flex-grow: 1;
    margin-left: 4rem;
    margin-right: 4rem;
    min-height: min-content
}

.contentBox::before {
    background: color;
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 30px;
    padding: 3px;
    background: var(--border-gradient);
    mask:
        conic-gradient(#000 0 0) content-box,
        conic-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 23;
}


@media(max-width: 600px) {
    .contentBox {
        margin: 0px;
    }

}

.pfp {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    height: 300px;
    width: 300px;
    background: var(--content-bg);
    border-radius: 50%;
}

.pfp::before {
    background: color;
    content: "";
    position: absolute;
    inset: 0;
    gap: 10px;
    border-radius: 50%;
    padding: 3px;
    background: var(--border-gradient);
    mask:
        conic-gradient(#000 0 0) content-box,
        conic-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 23;
}





.row {
    display: flex;
    flex: 1;
    flex-direction: row;
    justify-content: space-evenly;
}


.projectContainer {
    display: flex;
    gap: 2rem;
    flex-direction: column-reverse;
    justify-content: space-evenly;
    overflow: auto;
}

.projectBox {
    height: 240px;
    display: flex;
    position: relative;
    flex-direction: column;
    text-align: left;
    padding: 0px min(3rem, 101px) 0px min(3rem, 101px);
    margin-top: 0;
    background: var(--content-bg);
    border-radius: 30px;
    flex-basis: 50%;
    flex-grow: 1;
    margin-left: 4rem;
    margin-right: 4rem;
    min-height: min-content;

}

.projectBox::before {
    background: color;
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 30px;
    padding: 3px;
    background: var(--border-gradient);
    mask:
        conic-gradient(#000 0 0) content-box,
        conic-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 23;
}




a.urlButton {
    margin-top: auto;
    padding: 20px 0px 20px 20px;
    position: relative;
    appearance: none;
    font-family: "Archivo Black", sans-serif;
    background: var(--collapse-button-bg-color);
    color: var(--collapse-button-text-color);
    cursor: pointer;
    width: 50%;
    outline: none;
    font-size: min(10vw, 25px);
    border-radius: 40px;
    border: none;
    margin-bottom: 20px;
}

@media (max-width: 600px) {
    .projectContainer {
        display: flex;
        flex: 100vh;
        flex-direction: column;
        gap: 2rem;
        min-height: 100vh;
        margin-bottom: 30px;
    }

    .projectBox {
        margin: 0px;
    }

    a.urlButton {
        width: 80%;
        font-size: min(4vw, 25px);
    }
}


.urlButton::before {
    background: color;
    content: "";
    position: absolute;
    inset: 0;
    gap: 40px;
    border-radius: 40px;
    padding: 4px;
    background: var(--border-gradient);
    mask:
        conic-gradient(#000 0 0) content-box,
        conic-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

.active,
.urlButton:hover {
    transform-origin: center;
    transition: 200ms;
}



#collapsibleContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3vh;
    box-sizing: border-box;
    padding: 10px 0px 10px 0px;
    text-align: center;


}