:root,
    /*Dark Purple*/
    :root.dark1 { 
        --background-color: #1e202c;
        --text-color: #bfc0d1;
        --reverse-text-color: #1e202c;
        --accent-1: #31323c;
        --accent-2: #bfc0d1;
        --accent-3: #60519b;
        --filter-color: #dda7ff7e;
        --box-shadow: 0px 0px 15px #dda7ff7e;
        --warning: #b80303;
        --progress-bar: #60519b;
        --percentage: #bfc0d1;
    }
    /*Dark Blue*/
    :root.dark2 {
        --background-color: #222831;
        --text-color: #d8d7ce;
        --reverse-text-color: #222831;
        --accent-1: #283b48;
        --accent-2: #d8d7ce;
        --accent-3: #00a6c0;
        --filter-color: #7ae8f878;
        --box-shadow: 0px 0px 15px #7ae8f878;
        --warning: #b80303;
        --progress-bar: #00a6c0;
        --percentage: #d8d7ce;
    }
    /*Dark Red*/
    :root.dark3 {
        --background-color: #323034;
        --text-color: #e2e2e2;
        --reverse-text-color: #28242a;
        --accent-1: #1e1e27;
        --accent-2: #e2e2e2;
        --accent-3: #df0139;
        --filter-color: #f76a8d89;
        --box-shadow: 0px 0px 15px #f76a8d89;
        --warning: #d9b328;
        --progress-bar: #df0139;
        --percentage: #e2e2e2;
    }
    /* Light Purple */
    :root.light1 {
        --background-color: #bfc0d1;
        --text-color: #1e202c;
        --reverse-text-color: #bfc0d1;
        --accent-1: #a399ca;
        --accent-2: #31323c;
        --accent-3: #60519b;
        --filter-color: #dda7ff7e;
        --box-shadow: 0px 0px 15px #dda7ff7e;
        --warning: #b80303;
        --progress-bar: #31323c;
        --percentage: #60519b;
    }
    /* Light Blue */
    :root.light2 {
        --background-color: #d8d7ce;
        --text-color: #222831;
        --reverse-text-color: #d8d7ce;
        --accent-1: #538089;
        --accent-2: #283b48;
        --accent-3: #00a6c0;
        --filter-color: #7ae8f878;
        --box-shadow: 0px 0px 15px #7ae8f878;
        --warning: #b80303;
        --progress-bar: #283b48;
        --percentage: #00a6c0;
    }
    /* Light Red */
    :root.light3 {
        --background-color: #e5dfd6;
        --text-color: #28242a;
        --reverse-text-color: #e5dfd6;
        --accent-1: #a64b4b;
        --accent-2: #1e1e27;
        --accent-3: #df0139;
        --filter-color: #f76a8d89;
        --box-shadow: 0px 0px 15px #f76a8d89;
        --warning: #d9b328;
        --progress-bar: #1e1e27;
        --percentage: #df0139;
    }
     

@font-face {
    font-family: Luminari;
    src: url("https://www.elsewherewriters.com/fonts/luminari/Luminari-Regular.ttf");
}


/** UNIVERSAL*/
html {
    scroll-behavior: smooth;
}
h1, h2, h3, h4, h5, h6, p {
    margin: 0;
    padding: 0;
}
h1, h2, h3, h4, h5, h6{
    font-family: Luminari;
}
p {
    font-family: Arial, Helvetica, sans-serif;
}
a {
    color: var(--accent-3);
}
.pulse {
    transition: all 0.2s ease;
    cursor: pointer;
}
/* .website-title {
    color: var(--accent-2);
} */
.pulse:active {
    transform: scale(1.3);
}
* {
    box-sizing: border-box;
}
/* MENU ICON */
.menu-icon-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}
.menu-bar {
    background-color: var(--accent-3);
    width: 100%;
    /* border: 0.5px solid var(--accent-2); */
}


/** ANIMATION*/
.slide-right {
    animation: slide-right 0.3s linear 0s 1 normal forwards;
}
@keyframes slide-right {
	0% {
		opacity: 0;
		transform: translateX(-250px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
/* .slide-left {
    animation: slide-left 0.3s linear 0s 1 normal forwards;
} */
@keyframes slide-left {
	0% {
		opacity: 0;
		transform: translateX(250px);
	}

	100% {
		opacity: 1;
		transform: translateX(1px);
    }
}



/** SMALL PHONES*/
@media only screen and (min-width: 200px) {
    body {
        background-color: var(--background-color);
        color: var(--text-color);
        padding: 0px;
        margin: 0px;
        /* font-family: "Luminari"; */
        height: 100%;
        width: 100%;
    }
    h1 {
        font-size: 34px;
    }
    h2 {
        font-size: 28px;
    }
    p {
        font-size: 20px;
    }
    .logo img, .desktop-navContent, .container{
        display: none;
    }
    .nav-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1em 0 0em 0;
    }
    .mobileNav {
        display: block;
        z-index: 1;
        margin: 0em 1em;
        cursor: pointer;
        width: 3em;
        height: fit-content;
    }
    .menu-icon-wrapper {
        width: 3em;
        height: 3em;
        z-index: 3;
    }
    .menu-bar {
        width: 90%;
        height: 0.3em;
    }
    .mobileNav img{
        width: 3em;
        height: fit-content;
    }
    .navMenu {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: none;
        width: 45%;
        background-color: var(--accent-1);
        border-radius: 0px 0px 12px 0px;
        border-right: 2px solid var(--accent-3);
        border-bottom: 2px solid var(--accent-3);
        padding: 5em 1em 1em 1em;
    }
    .navContent {
        height: fit-content;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
    }
    .navContent a {
        text-decoration: none;
        color: var(--text-color);
        padding-bottom: 1em;
        font-size: 18px;
        font-family: luminari;
    }
    .projects {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
    }
    .user {
        display: flex;
        z-index: 2;
        cursor: pointer;
        justify-content: flex-end;
        align-items: center;
        width: fit-content;
        height: fit-content;
        padding: 0em 1em 0em 0em;
    }
    .pfp-wrapper {
        position: relative;
    }
    #pfp-overlay {
        position: absolute;
        width: 3em;
    }
    .user img{
        width: 3em;
        /* z-index: 2; */
        height: fit-content;
        cursor: pointer;
    }
    .userDropdown {
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        width: 40%;
        background-color: var(--accent-1);
        border-radius: 0px 0px 0px 12px;
        border-left: 2px solid var(--accent-3);
        border-bottom: 2px solid var(--accent-3);
        padding: 4em 1em 1em 1em;
    }
    .userContent {
        z-index: 1;
        display: flex;
        position: absolute;
        flex-direction: column;
    }
    .userContent a {
        text-decoration: none;
        width: 100%;
        color: var(--text-color);
        padding-bottom: 1em;
        font-size: 18px;
    }
    .userContent a:first-child {
        padding-top: 1em;
    }
    .dropdown-icon {
        width: 1em;
        height: fit-content;
    }
    .badge {
        width: 3.5em;
        height: fit-content;
        /* cursor: pointer; */
    }
    footer {
        display: grid;
        grid-template-columns: auto auto;
        justify-content: space-around;
        gap: 0.5em;
        padding: 1em 0.5em;
        border-top: 2px solid var(--accent-1);
    }
    #copyright, #contact, #logo-link {
        font-size: 14px;
    }
    #contact {
        grid-column: span 2;
        justify-self: center;
    }
    .mobileNav:hover .navMenu {
        display: block;
    }
    /* .popup {
        display: none;
        z-index: 10;
        position: absolute;
        justify-content: center;
        width: 100%;
        height: 100%;
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
    } */


    /** BADGE POPUPS*/
    .badge-wrapper {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .badgeToPopup {
        display: none;
        position: absolute;
        /* top: 0; */
        z-index: 2;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        width: 10em;
        min-height: 4em;
        background-color: var(--background-color);
        border: 3px solid var(--accent-3);
        border-radius: 16px 16px 16px 0;
        padding: 0.3em;
    }
    .badgeToPopup > h4 {
        text-align: center;
    }
    .badgeToPopup > p {
        font-size: 12px;
        text-align: center;
    }




    .not-found-container {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        text-align: center;
        height: 16em;
        margin-top: 1em;
    }
    .go-back-button {
        text-decoration: none;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--accent-2);
        border: 2px solid var(--accent-3);
        border-radius: 24px;
        width: 13em;
        height: 3.5em;
    }
    .button-container > p {
        font-size: 18px;
    }
    .announce-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 2em;
    }
    .announce-wrapper > h1, h3 {
        text-align: center;
    }
    .announce-wrapper > h1 {
        color: var(--warning);
    }
}




/** LARGE PHONES*/
@media only screen and (min-width: 326px) {
    h1 {
        font-size: 38px;
    }
    h2 {
        font-size: 32px;
    }
    p {
        font-size: 24px;
    }
    .badge {
        width: 4em;
        height: fit-content;
    }
    #copyright, #contact, #logo-link {
        font-size: 16px;
    }
}



/** TABLET*/
@media only screen and (min-width: 720px) {
    .navMenu {
        width: 25%;
    }
    .desktop-user {
        display: flex;
        /* position: relative; */
        justify-content: center;
        align-items: center;
    }
    .desktop-navContent, .projects-container > a {
        font-family: Luminari;
    }
    .desktop-user img{
        width: 3.5em;
        height: fit-content;
    }
    #pfp {
        position: relative;
    }
    #pfp-overlay {
        position: absolute;
        z-index: 1;
        width: 3em;
    }
    .userDropdown {
        width: 20%;
    }
    .badge {
        width: 5em;
        height: fit-content;
    }
    footer {
        display: flex;
    }
    #copyright, #contact, #logo-link {
        font-size: 18px;
    }
}
@media only screen and (min-width: 1000px) {
    .navMenu {
        width: 15%;
    }
    .userDropdown {
        width: 12%;
    }
    .not-found-container {
        margin-top: 3em;
    }
}



/** DESKTOP*/
@media only screen and (min-width: 1200px) {
    header {
        display:flex;
        flex-wrap: nowrap;
        align-items:center;
        width: 100%;
        height: 4em;
        margin: 0 0 1em 0;
        top: 0;
        background-color: var(--accent-1);
        position: sticky;
        z-index: 3;
    }
    .logo img{
        display: block;
        width: 5em;
        height: auto;
        margin: 0.5em 0 0 1em;
    }
    nav {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
    }
    .nav-bar {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        padding: 0;
    }
    .desktop-navContent {
        flex: 1;
        display: flex;
        flex-direction: row;
        text-align: center;
        align-items:center;
        justify-content: space-evenly;
    }
    .desktop-navContent a {
        font-size: 2em;
        color: var(--text-color);
        padding: 0 2em;
        text-decoration: none;
    }
    .desktop-navContent a:hover {
        text-shadow: var(--box-shadow);
    }
    .projects-container {
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center;
        height: 3.5em;
        cursor: default;
    }
    .desktop-user {
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center;
        height: 3.5em;
    }
    .projects-dropdown {
        display: none;
        position: absolute;
        top: 0;
        translate: 0 3em;
        z-index: 1;
        background-color: var(--accent-1);
        border: 2px solid var(--accent-3);
        border-radius: 16px;
        margin-top: 0.3em;
    }
    .user-content {
        display: none;
        position: absolute;
        z-index: 1;
        top: 0;
        right: 0;
        translate: 0 3.2em;
        width: 10em;
        background-color: var(--accent-1);
        border: 2px solid var(--accent-3);
        border-radius: 16px;
        margin-top: 0.3em;
    }
    .projects-dropdown a {
        font-size: 1.7em;
        padding: 0.5em;
    }
    .projects-container:hover .projects-dropdown {
        display: flex;
        flex-direction: column;
    }
    .projects-dropdown a:hover {
        background-color: var(--accent-3);
        color: var(--reverse-text-color);
    }
    .projects-dropdown a:hover:first-child {
        border-radius: 10px 10px 0 0;
    }
    .projects-dropdown a:hover:last-child {
        border-radius: 0 0 10px 10px;
    }
    /* .user-content {
        translate: -3em 7.2em;
        width: 10em;
    } */
    .user-content a {
        padding: 0.5em 0;
        font-size: 1.7em;
    }
    .user-content a:hover {
        background-color: var(--accent-3);
        color: var(--reverse-text-color);
    }
    .desktop-user:hover .user-content {
        display: flex;
        flex-direction: column;
    }
    .user-content a:hover:first-child {
        border-radius: 10px 10px 0 0;
    }
    .user-content a:hover:last-child {
        border-radius: 0 0 10px 10px;
    }
    #login {
        color: var(--accent-3);
    }
    .mobileNav, .navMenu, .project-dropDown-wrapper, .user {
        display: none;
    }
    .container {
        display: flex;
        justify-content: center;
        text-align: center;
        margin: 0.5em 0 1em 0;
    }
    .not-found-container {
        margin-top: 6em;
    }
    #pfp-overlay {
        width: 3.5em;
    }
}

/* @media only screen and (min-width: 1500px) {
    .user-content {
        translate: 0em 7.2em;
    }
} */
.show {
    display: block;
}
.showFlex {
    display: flex;
}
.hide {
    display: none;
}
#about-icon {
    color: var(--text-color);
}
.inactive {
    opacity: 0;
}
.required {
    color: var(--warning);
}