root,
* {

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

    background-attachment: fixed;
    background-size: cover;


}

html {
    height:100vh;
}

*[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(81, 0, 173) 10%, rgb(177, 88, 255) 30%, rgb(90, 49, 136) 40%);
    --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(244, 254, 255), rgb(220, 249, 255), rgb(209, 253, 255));

    --collapse-button-bg-color: linear-gradient(90deg, rgb(214, 218, 255), rgb(97, 178, 244), rgb(241, 246, 255));
    --collapse-button-text-color: rgb(14, 14, 151);
    --nav-gradient: linear-gradient(to bottom, rgb(255, 255, 255), rgb(176, 197, 243), rgb(144, 190, 255));
    --nav-item: linear-gradient(9deg, rgb(150, 141, 246) 10%, rgb(88, 124, 255) 30%, rgb(33, 55, 133) 40%);
    --collapse-button-hover-bg-color: linear-gradient(90deg, rgb(124, 164, 255), rgb(181, 187, 255), rgb(76, 36, 255));
    --collapse-button-hover-text-color: rgb(0, 22, 122);
    --border-gradient: linear-gradient(9deg, rgb(0, 71, 186), rgb(36, 69, 255) 50% 90%, rgb(0, 187, 255) 99% 100%);

}


a {
    color: inherit;
    background: none;

    text-decoration: wavy;
}



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

#main {
    margin: 0;
    display: grid;
    box-sizing: border-box;
    padding:  70px 0 0 0;

    height:100%;
    grid-template-rows: auto auto 2fr auto;


}

#themeButton {
    justify-content: right;
    position: fixed;
    margin: 0px;
    top: 0;
    margin-left: 90%;
    margin-top: 10px;
    z-index: 3;

}


#navBar {
    display: flex;


}

#myName {
    background: color;
    font-size: min(90px, 11vw);
    position: relative;
    margin-bottom: 20px;
    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;
}

#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;


}

#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: 0;

}

#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: 50ms;
    text-shadow: -1px -1px 0 #000;
    z-index: 1;
}

#allbutfooter {
    /* min-height: 1200%; */
}

#foot {
    justify-content: center;
    text-align: center;
    background: var(--footer-bg);
    width: 100%;
    bottom: 0;

}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
    background: var(--collapse-button-bg-color);
    color: var(--collapse-button-text-color);
    cursor: pointer;
    padding: 18px;
    width: 90%;
    outline: none;
    font-size: min(10vw, 70px);
    border-radius: 50px;
    /* border-width: min(9px, 2vw); */
    /* border-color: var(--border-gradient); */
    border: none;
    text-align: center;
    margin: 10px 10px 10px 10px;
}



.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 18px;
    overflow: hidden;
    background: none;
    transition: max-height 250ms ease-out;
}

#collapsibleContainer {
    position: flex;
    align-items: center;
    align-self: center;
    text-align: center;

}