/* nice colors
#18263d, #1f2735

bgCol: #1f2735,
island-primary: #2b3445

*/

:root{
    --errorBox-bg:#F1FAEE;
    --errorBox-border:#457B9D;
    --errorBox-font: monospace;

    /* --font: 'Lato', sans-serif; */
    --blur: 4em;
    --gap: 2em;
    --fontsize: 2em;
    /* --border-radius: 6px; */
    --border-radius:0.8rem;

    /* --bckg-primary:#080808; */
    --bckg-primary:#0d0f11;
    --bckg-color:black;
    --bckg-secondary: #92a0a9;
    --text-primary:#ddd;
    /* --text-primary:#bbb8ae; */
    /* --text-primary:#92a0a9; */
    --text-secondary:black;
    --hsla: hsla(0, 0%, 22%, 0.9);
    --active:rgba(197, 229, 255, 0.15);
    --font:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight:600;

    --island-primary:var(--bckg-color);
    --island-secondary:#222225;
    --island-secondary-lighter:var(--btn-2nd-bg);
    /* --island-primary:#222225; */
    /* --island-secondary:var(--bckg-color); */

    --btn-color:black;

    --clear:rgba(0,0,0,0);

    --login-btn-text:var(--text-primary);
    --login-btn-bg:rgb(133, 48, 44);
    --login-btn-hover:rgb(107, 35, 31);

    --btn-color:var(--hsla);

    --btn-text:black;
    --btn-bg:#ccc;
    --btn-hover:#aaa;
    --btn-active:#888;

    --btn-2nd-text:var(--text-primary);
    --btn-2nd-bg:#222;
    --btn-2nd-hover:#333;
    --btn-2nd-active:#444;

    --btn-sel:rgba(77, 166, 244, 0.478);

    /* --grad-bckg:linear-gradient(50deg, rgba(9, 50, 76, 0.79), rgba(61, 61, 61, 0.71) 20%, rgba(25, 58, 108, 0.55) 90%); */
    --grad-bckg:linear-gradient(50deg, rgba(3, 17, 26, 0.79), rgba(20, 26, 37, 0.71) 20%, rgba(15, 35, 65, 0.55) 90%);

    /* --grad-primary:linear-gradient(90deg,rgb(27, 58, 149),rgb(13, 83, 153)); */
    /* --grad-primary:linear-gradient(90deg,rgb(138, 26, 11),rgb(186, 48, 1)); */
    /* --grad-primary:linear-gradient(90deg,seagreen,darkseagreen); */
    --accent-primary:rgb(101, 6, 185);
    --grad-primary:linear-gradient(90deg,rgb(77, 34, 178),rgb(101, 6, 185));
    --grad-alt:rgb(18, 60, 60);
    --grad-disabled:hsl(258, 0%, 42%);
    /* --grad-disabled:linear-gradient(90deg,hsl(258, 0%, 42%),hsl(272, 0%, 37%)); */
    /* --grad-alt:linear-gradient(90deg,rgb(25, 45, 45),rgb(25, 45, 45)); */

    /* --shadow:rgba(255,255,255,0.05); */
    --shadow:rgba(0,0,0,0.5);

    --br:0.5rem;
    --br-secondary:1rem;

    --shadow-primary:0px 3px 5px rgba(0,0,0,0.1);
    --shadow-secondary:0px 5px 10px rgba(0,0,0,0.1);

    --bckg-loading:var(--bckg-primary);

    --warn-bg:firebrick;
    --warn-hover:rgb(122, 25, 25);
    --warn-text:white;
    --pending-bg:#907f25;
    --pending-hover:#6c5f1f;
    --pending-text:white;

    color-scheme:dark;

    --default-animation-time: 0.2s;
    --longer-animation-time: 0.8s;

    /* Global Scaling */
    /* --global-scale:1;
    transform:scale(var(--global-scale));
    transform-origin:0px 0px;
    width:calc(100% * 1 / var(--global-scale)); */


    /*  */

    /* --bckg-color:#1f2735;
    --island-primary:#2b3445; */

    /* --grad-bckg:linear-gradient(50deg, rgba(0, 0, 0, 0.79), rgba(0, 0, 0, 0.71) 20%, rgba(15, 35, 65, 0.55) 90%); */
    /* --grad-bckg:linear-gradient(50deg, rgba(56, 52, 52, 0.79), rgba(49, 44, 44, 0.71) 20%, rgba(34, 50, 74, 0.55) 90%); */
    
    /* --bckg-color:#1d2027;
    --island-primary:#060708;
    --island-secondary:#2e3138;
    --warn-bg:rgb(122, 25, 25);
    --warn-hover:rgb(90, 22, 22);
    --btn-2nd-bg:rgb(70, 70, 76); */
}
/* body{
    & .card{
        background-color:var(--island-secondary);
    }
} */

body{
    /* transform-origin:top left; */
    /* transform:scale(0.9); */
    /* width:calc(100vw * (1 / 0.9)); */
    /* position:relative; */
    
    color:var(--text-primary);
    font-family:var(--font);
    -webkit-tap-highlight-color:transparent;

    padding-bottom:3rem;
    
    --view-mode:DESKTOP;

    /* background:linear-gradient(50deg, rgba(3, 17, 26, 0.79), rgba(20, 26, 37, 0.71) 20%, rgba(15, 35, 65, 0.55) 90%) !important; */
    background:var(--grad-bckg);
    background-repeat:no-repeat !important;
    background-attachment:fixed !important;
    
    /* Cool Background */
    /* background:url("https://www.pixeden.com/media/k2/galleries/131/001-subtle-light-pattern-background-texture.jpg"); */
    overflow-y:scroll;
    overflow-x: hidden;
    /* background-color: var(--bckg-color); */
    transition:background-color 0.2s;
}
/* 
Use box-sizing: content-box; on any items using position: absolute; and position: relative; 
to avoid problems with how size of an elm is computed 
*/
* {
    box-sizing: border-box; 
    margin: 0;             
    padding: 0;
}



/* 
    The variables below are for the color theme of the website. If you want to change them
    to make them match the color theme, make sure to update both sets of variables
    so that the theme switch works.

    to caleb: they're intentionally not in :root :)

    from caleb: these are now located in "dark_theme.css" and "light_theme.css"
*/

/* Styling for the error messages */

.errorBox {
    height: 150px;
    width: 250px;
    background-color: var(--errorBox-bg);
    border: 2px solid var(--errorBox-border);
    font-family: var(--errorBox-font);
    font-weight:normal;
    border-radius: 15px;

    display:flex;
    flex-direction:column;
    gap:20px;
    justify-content:center;
    padding:20px;

    box-shadow:0px 5px 10px rgba(0,0,0,0.5);

    transition:all 0.2s;
}

/* ErrorBox okay button */
.errorBox button{
    /* position: absolute;
    top: 100px;
    left: 102.5px; */
    padding:5px;
    background-color: #E63946;
    border-radius: 10px;
    color: white;
}

.material-icons {
    /* position: absolute;
    top: 30px;
    left: 43%;
    text-align: center;
    translate: 50%, 0px; */
    text-align: center;
    /* color: red; */
    user-select:none;
}
.material-icons, .material-symbols-outlined{
    max-width:60px;
    user-select:none;
    -webkit-user-select: none;
}

/* ErrorBox message div */
.errorBox p{
    /* position: absolute;
    top: 25px;
    left: 32.5px;
    translate: 50%, 0px; */
    font-family: var(--errorBox-font);
    text-align: center;
}

#errorBox-cont{
    position:absolute;
    display:flex;
    flex-direction:column-reverse;
    gap:10px;
    top:10px;
    left:50%;
    translate:-50% 0px;
    transition:all 0.2s;
}
#errorBox-cont > div{
    position:relative;
    /* top:10px; */
    /* left:50%; */
    /* translate:-50% 0px; */
}

.errorSpan {
    padding-top: 20px;
    color: #E63946;
}

/* 
Styling for the navbar / header
*/

/* Please call this class (or the 'grid' class) to keep code simple. */
.flex { 
    display: flex;
    gap: var(--gap);
}

.grid {
    display: grid;
    gap: var(--gap);
}

.active{
    --bg:var(--active) !important;
    transition-duration: 200ms;
}

.primary-header {
    align-items: center;
    justify-content: space-between;
    position: sticky;
    /* top: 8px; */
    top: 0px;
    padding-block: 8px;
    /* background-color: var(--bckg-color); made the navbar sticky so that the user can always open nav menu */
    transition-duration: inherit; /* bandaid fix for the header not changing colors at the same time as the rest of the website on theme switch */
    z-index:10;
    /* z-index:101; */
    height:84px;

    padding-left:1.5rem;
    padding-right:1.5rem;
}
.primary-header.solid-header{
    background-color:var(--bckg-color);
    /* padding-top:30px; */
}
.primary-header.menu-open{
    z-index:100;
}

.primary-navigation {
    list-style: none;
    align-items: center;
    justify-content: center;
    padding-right: 3rem;
    /* --gap:0.75em; */
    /* gap: 4em; */
}

.primary-navigation[data-visible="menu-open"] {
    transform: translateX(0%);
}

.primary-navigation > *{
    --border-radius:8px;
    --bg:var(--clear);
    padding:0.6em 2em;
    border-radius:var(--border-radius);
    user-select:none;
    background-color:var(--bg);
    transform: scale(1);
    transition-duration: 250ms;
    white-space:nowrap;
}
.primary-navigation > *:not(.login-btn)::after{
    content:"";
    position:absolute;
    width:0%;
    height:0px;
    border-bottom:solid 3px var(--text-primary);
    left:50%;
    transform:translate(-50%,26px);
    transition:width 0.1s ease-in;
}
.primary-navigation > *:not(.login-btn):hover::after, .primary-navigation > *:not(.login-btn).hover::after{
    width:60%;
}
.primary-navigation > *:not(.login-btn):hover, .primary-navigation > *:not(.login-btn).hover{
    cursor:pointer;
    /* background-color:rgba(30, 143, 255, 0.1); */
    /* transform: scale(1.05); */
    transition-timing-function: ease-in-out;
    background-color:var(--active);
}

.login-btn {
    text-transform: uppercase;
    font-family: var(--font);
    /* --bg:var(--login-btn-bg); */
    background:var(--grad-primary);
    /* background-color: #E63946; */
    /* border: 1px black solid; */
    border-radius: var(--border-radius);
    font-size: 1em;
    color:var(--login-btn-text);
    width:80px;
    text-align:center;
    box-shadow:var(--shadow-primary);
}

.login-btn:hover {
    cursor: pointer;
    --bg:var(--login-btn-hover) !important;
}

.logo {
    border-radius: var(--border-radius);
    width: 3rem;
    height: 0rem;
    /* color: var(--bckg-secondary); */
    color:var(--text-primary);
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:2.5rem;
    user-select:none;
    cursor:pointer;
    transition:rotate 0.7s cubic-bezier(0.05, 0.3, 0.05, 1);
    rotate:45deg;
}
.logo.light{
    rotate:90deg;
}
.logo.dark{
    rotate:0deg;
}

a { 
    all: unset; /* Removes default link styling */ 

    text-transform: uppercase;
    font-family: var(--font);
    color: var(--text-primary);
}

.sr-only {
    text-align: none;
    /* todo: figure out how to make this only visible to screen readers for ADA stuff */
}

.mobile-nav-toggle {
    display: none;
    background-color: transparent;
    margin-right:-2rem;
}

/* Code for the welcome message and info blurb */

.text-default { /* Doesn't style font-size because a lot of elements override it */
    font-family: var(--font);
    color: var(--text-primary);
}

.welcome-container {
    font-size: var(--fontsize);
    margin-inline: var(--gap);
    min-height: 100dvh;
    max-width: 100dvw;

    justify-items: center;
    gap: 0;
    grid-template-rows: 15% 1fr 1fr;
}

.welcome-message {
    justify-self: center;
    align-self: center;
}

.kc-text {
    font-size: 3em;
    gap: 0rem;
    justify-items: center;
}

/* Code for displaying contests */

.contests-section {
    margin: 2em;
    padding-top: 2em;
}

.contests-header {
    justify-content: center;
    font-size: 3em;
    text-transform: uppercase;
    text-align: center;
}

.contests a {
    justify-content: center;
}

.uppercase {
    text-transform: uppercase;
}

.contest-container {
    grid-template-columns: 1fr 1fr 1fr;
    padding: 3em;
    gap: 3rem;
}

.blur {
    border-radius: var(--border-radius);
    background-color: var(--bckg-color);
    background: hsl(0 0% 100% / 0.1);
    backdrop-filter: var(--blur);
}
.blur5{
    filter:blur(5px);
}

.contest {
    padding: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.478);
}

.contest-btn {
    padding: 1rem;
    /* align-self: center; */
    border: 1px solid var(--bckg-secondary);
}

.contest-btn:hover {
    cursor:pointer;
    transition-duration: 200ms;
    /* transform: scale(1.02);    */
}

.contest-thumbnail {
    border-radius: var(--border-radius);
    height: 20em;
    background-color: var(--bckg-secondary);
}

.browse-contests {
    margin-bottom: 3em;
    justify-content: center;
}

.browse-contests-btn {
    padding: 1rem;
    border: 1px solid var(--text-primary);
}

.login-prompt {
    color: var(--hsla);
}

/* Styling for the main.html page */ 

.main-container {
    margin: 2em;
}

.profile-btn{
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:0px;
    font-size:40px !important;
    /* margin-left:20px; */
    min-width:40px;
    width:40px;
    max-width:40px;
}

/* Flex Helpers */

/* regular */
.flx{
    display:flex;
    align-items:center;
}
/* with a gap */
.flx-gap{
    display:flex;
    align-items:center;
    gap:10px;
}
.flx-gap3{
    display:flex;
    align-items:center;
    gap:0.5rem;
}
/* justify space-between */
.flx-sb{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
/* justify centered */
.flx-c{
    display:flex;
    justify-content:center;
    align-items:center;
}
/* children all have "full width" or width at 100% */
.flx-fw{
    display:flex;
    justify-content:center;
    align-items:center;
}
.flx-fw > *{
    width:100%;
}
.flx-btn{
    display:flex;
    justify-content:center;
    gap:1rem;
    align-items:center;
    padding-right:1.25rem;
    width:auto !important;
}
/* Flex end */
.flx-end{
    display:flex;
    justify-content:end;
    align-items:center;
}

/* Buttons */

button,a.button{
    font-size:15px;
    padding:0.65rem 0.75rem;
    font-family:system-ui;
    border-radius:0.5rem;
    border:none;
    background-color:var(--btn-bg);
    transition:all 0.1s ease-out;
    /* transition:background-color 0.1s ease-out; */
    color:var(--btn-text);
    text-transform:capitalize;
    cursor:pointer;
    text-align:center;
}
button:hover,a.button:hover{
    background-color:var(--btn-hover);
}
button:active,a.button:active{
    background-color:var(--btn-active);
}
.btn2{
    color:var(--btn-2nd-text);
    background-color:var(--btn-2nd-bg);
}
.btn2:hover{
    background-color:var(--btn-2nd-hover);
}
.btn2:active{
    background-color:var(--btn-2nd-active);
}

input[type="text"]{
    padding:0.8rem;
    font-size:18px;
    border:none;
    width:100%;
    border-radius:0.5rem;
    color:var(--text-primary);
    background-color:var(--col);
}
input[type="date"]{
    padding:0.8rem;
    font-size:18px;
    border:none;
    width:100%;
    border-radius:0.5rem;
    color:var(--text-primary);
    background-color:var(--col);
    font-family:var(--font);
}
input[type="datetime-local"]{
    padding:0.8rem;
    font-size:18px;
    border:none;
    width:100%;
    border-radius:0.5rem;
    color:var(--text-primary);
    background-color:var(--col);
}

.inputbox{
    /* --col:var(--bg); */
    width:100%;
    border-radius:0.75rem;
    background-color:var(--island-primary);
    padding:0.5rem;
    box-shadow:var(--shadow-primary);
}
.inputbox > div{
    /* background-color:var(--active); */
    display:flex;
    align-items:center;
    border-radius:0.5rem;
}
.inputbox input{
    background-color:var(--island-secondary);
}
.inputbox .icon{
    /* border-left:solid 1px var(--text-primary); */
    /* width:3.5rem; */
    width:2.7rem;
    line-height:2.7rem;
    color:var(--text-primary);
    padding-left:0.5rem;
}

.btn-go-to-top{
    visibility:hidden;
    position:fixed;
    bottom:70px;
    right:10px;
    margin-right:30px;
    width:3rem;
    height:3rem;
    background-color:var(--btn-bg);
    color:var(--btn-text);
    z-index:99;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    cursor:pointer;
    user-select:none;
    scale:0;
    box-shadow:var(--shadow-primary);
    transition:all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.btn-go-to-top.show{
    visibility:visible;
    scale:1;
}

.loading{
    --scale:1.5;
    --w:calc(1.3rem * var(--scale));
    --pad:calc(2.6rem * var(--scale));
    position:fixed;
    left:50vw;
    top:calc(50vh - 84px);
    transform:translate(-50%,-50%);
    color:var(--text-primary);
    width:calc(var(--w) * 3);
    height:calc(var(--w) * 3);
    padding:var(--pad);
    border-radius:1.5rem;
    pointer-events:none;
    opacity:0;
    transition:opacity 0.1s ease-out;
    z-index:99;
}
.loading.show{
    opacity:1;
}
.loading > div.label{
    font-size:21px !important;
    bottom:-59px;
}
.loading > div:nth-child(2){
    animation:Loading1 infinite 0.75s;
}
.loading > div:nth-child(3){
    left:0px;
    top:0px;
    animation:Loading2 infinite 0.75s;
}
.loading > div:not(.loading-bg){
    width:var(--w);
    height:var(--w);
    transform:translate(-50%,-50%);
    position:absolute;
    display:flex;
    justify-content:center;
    align-items:center;
    transition:all 0.3s;
    font-size:calc(28px * var(--scale));
}
.loading-bg{
    position:absolute;
    width:calc(var(--w) * 8);
    height:calc(var(--w) * 8);
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    background-color:var(--bckg-loading);
    border-radius:3rem;
    box-shadow:var(--shadow-primary);
}
@keyframes Loading1 {
    0%{
        left:calc(var(--pad) / 2 + var(--w) * 0);
        top:calc(var(--pad) / 2 + var(--w) * 0);
    }
    25%{
        left:calc(var(--pad) / 2 + var(--w) * 2);
        top:calc(var(--pad) / 2 + var(--w) * 0);
    }
    50%{
        left:calc(var(--pad) / 2 + var(--w) * 2);
        top:calc(var(--pad) / 2 + var(--w) * 2);
    }
    75%{
        left:calc(var(--pad) / 2 + var(--w) * 0);
        top:calc(var(--pad) / 2 + var(--w) * 2);
    }
    100%{
        left:calc(var(--pad) / 2 + var(--w) * 0);
        top:calc(var(--pad) / 2 + var(--w) * 0);
    }
}
@keyframes Loading2 {
    0%{
        left:calc(var(--pad) / 2 + var(--w) * 2);
        top:calc(var(--pad) / 2 + var(--w) * 2);
    }
    25%{
        left:calc(var(--pad) / 2 + var(--w) * 0);
        top:calc(var(--pad) / 2 + var(--w) * 2);
    }
    50%{
        left:calc(var(--pad) / 2 + var(--w) * 0);
        top:calc(var(--pad) / 2 + var(--w) * 0);
    }
    75%{
        left:calc(var(--pad) / 2 + var(--w) * 2);
        top:calc(var(--pad) / 2 + var(--w) * 0);
    }
    100%{
        left:calc(var(--pad) / 2 + var(--w) * 2);
        top:calc(var(--pad) / 2 + var(--w) * 2);
    }
}

input[type="number"]{
    width:75px;
    padding:0.5rem;
    font-size:16px;
    /* border:solid 1px var(--text-primary); */
    border-radius:0.4rem;
    color:var(--text-primary);
    /* background-color:var(--col); */
    background-color:var(--bckg-color);
    border:none;
}
button.checkbox{
    width:75px;
    padding:0.5rem;
    font-size:16px;
    /* border:solid 1px var(--text-primary); */
    border-radius:0.4rem;
    color:var(--text-primary);
    /* background-color:var(--btn-2nd-bg); */
    background-color:var(--bckg-color);
}
button.checkbox:hover{
    background-color:var(--btn-2nd-hover);
}
button.checkbox:active{
    background-color:var(--btn-2nd-active);
}

/*  */

.main-title{
    margin-left:2.5rem;
    font-family:Impact;
    /* font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; */
    font-style:italic;
    font-weight:400;
    font-size:30px;
    word-spacing:5px;
    letter-spacing:0.5px;
    user-select:none;
    white-space:nowrap;
    width:2px;
    cursor:pointer;
}

/* Media Queries */

@media (max-width: 10em){
    .main-title{
        visibility:hidden;
        width:0px;
        margin-left:0px !important;
    }
}
@media (max-width: 42em) {
    body{
        --view-mode:MOBILE;
    }
    div.missionDiv{
        width:100%;
    }
    div.cont-mission{
        flex-direction:column;
        justify-content:start;
    }
    .main-title{
        /* visibility:hidden; */
        /* width:0px; */
        margin-left:0px !important;
    }
    header.primary-header{
        /* overflow-x:auto; */
        /* overflow-y:hidden; */
        /* white-space:nowrap; */

        /* display:flex !important; */
        /* justify-content:space-between !important; */

        padding-left:0.5rem;
        padding-right:0.75rem;
    }
    .logo{
        margin-right:-2rem;
        font-size:34px !important;
    }
    .nav-toggle-icon{
        font-size:34px !important;
    }
    .l-quick-search{
        display:block;
    }
    .d-sort-search-cont{
        flex-direction:column;
        width:100%;
        gap:1rem !important;
    }
    div.notify-balloon{
        top:-3px;
        right:-3px;
    }
    div.dual-list{
        flex-direction:column;
        align-items:start;
    }
    div.dual-list > div{
        width:100%;
        max-width:unset;
        min-width:unset;
    }
    div.notification-manager{
        width:100%;
        right:0px;
    }
}
@media (max-width: 54em) {
    div.main-title{
        font-size:24px;
        margin:auto;
        position:absolute;
        left:50vw;
        transform:translate(-50%,0px) !important;
        width:fit-content;
    }
}

@media (max-width: 72em){
    div.cont-mission{
        z-index:10;
    }
    div.missionDiv.submit{
        margin-top:-80px !important;
    }
}

@media (max-width: 75em) { 
    :root {
        --fontsize: 1em;
    }

    .notification-triangle {
        visibility: hidden;
    }

    .primary-navigation {
        position: fixed;
        inset: 0 0 0 30%;
        flex-direction: column;
        padding: min(20dvh,10rem);
        z-index: 1000;
        gap: var(--gap, 2em);

        background-color: var(--bckg-primary);
        /* background: var(--hsla); */
        backdrop-filter: var(--blur);

        transform: translateX(100%);
        transition-duration: 400ms;
        transition-timing-function: ease;
    }

    .mobile-nav-toggle {
        /* height: 3rem; */
        display: block;
        box-sizing: border-box;
        /* position: absolute; */
        z-index: 9999;
        aspect-ratio: 1;
        /* top: 2rem; */
        /* right: 2rem; */
        border: 0;
        border-radius: var(--border-radius);
        margin-left:auto;
        /* border: 1px solid var(--text-primary); */
    }

    .nav-toggle-icon {
        color: var(--text-primary);
        background-color: transparent;
        transition:rotate 0.7s cubic-bezier(0.05, 0.3, 0.05, 1);
        rotate:45deg;
        font-size:2.5rem;
    }
    .nav-toggle-icon[data-visible="menu-open"]{
        rotate:90deg;
    }
    .nav-toggle-icon[data-visible="menu-closed"]{
        rotate:0deg;
    }

    .contests-section{
        margin: 1em;
        padding-bottom: 1em;
    }

    .contest-container{
        grid-template-columns: 1fr;
        margin-inline: 1em;
        padding: 0.5em;
        gap: 2rem;
    }

    .contest-thumbnail {
        height: 14em;
    }

    .welcome-container {
        grid-template-rows: 12% 35% 1fr;
    }

    .kc-text {
        font-size: 3em;
    }

    .info-blurb {
        text-align: center;
    }

    .profile-btn{
        margin:0px;
    }
}
@media (max-width: 21em){
    .main-title{
        font-size:18px !important;
        /* display:none; */
    }
    .logo{
        margin-right:-2rem;
        font-size:30px !important;
    }
    .nav-toggle-icon{
        font-size:28px !important;
    }
}

.disabled{
    filter:brightness(0.95) contrast(0.3);
    cursor:not-allowed;
    /* background-color:inherit; */
    /* border-radius:5px; */
    /* padding:5px; */
}

/* Join a contest button */

.special-btn{
    /* background-color:var(--btn-bg); */
    color:var(--btn-text);
    position: relative;
    text-decoration: none;
    font-size:20px;
    font-weight:500;
    padding:0.5rem 2rem;
    width:fit-content;
    user-select:none;
    border-radius:0.5rem;
}
.special-btn div:nth-child(2){
    width:100%;
    height:100%;
    background-color:var(--btn-bg);
    position:absolute;
    top:0px;
    left:0px;
    z-index:-2;
    border-radius:inherit;
}

.special-btn::before {
    background:var(--login-btn-bg);
    color:var(--login-btn-text);
    content: "";
    inset: 0;
    position: absolute;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s ease-in-out;
    z-index: -1;
    border-radius:0.5rem;
}

.special-btn:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

/*  */

body.theme-mint-slate{
    --grad-bckg:linear-gradient(50deg, #0b0d12 70%, #161c28 90%);
    --bckg-color:#23262d;
    --island-primary:#171a20;

    --island-secondary:#363841;
    --island-secondary-lighter:#3f424c;

    --accent-primary:rgb(35, 90, 90);
    --grad-primary:linear-gradient(90deg,rgb(35, 90, 90),rgb(7, 66, 70));

    --btn-2nd-bg:#4a4949;
    --btn-2nd-hover:#575757;
    --btn-2nd-active:#616161;
}
body.theme-berry-fluff{
    /* Berry Fluff Theme */
    /* --grad-bckg:linear-gradient(50deg, rgba(242, 250, 255, 0.79), rgba(255, 255, 255, 0.71) 20%, rgba(168, 204, 220, 0.55) 90%); */
    /* --grad-bckg:linear-gradient(90deg,rgb(255, 247, 254),rgb(255, 240, 234)); */
    --grad-bckg:linear-gradient(90deg,rgb(255, 247, 254),rgb(255, 245, 241));
    --bckg-color:#fefefe;
    --island-primary:var(--bckg-primary);
    --island-secondary:#eee;
    --island-secondary-lighter:#eee;
    --accent-primary:rgb(232, 152, 141);
    --grad-primary:linear-gradient(90deg,rgb(235, 121, 164),rgb(232, 152, 141));

    --btn-2nd-text:var(--text-primary);
    --btn-2nd-bg:#eee;
    --btn-2nd-hover:#ddd;
    --btn-2nd-active:#ccc;

    --grad-alt:rgb(48, 105, 141);
    /* --grad-alt:rgb(41, 82, 108); */
}
body.theme-icy-mint{
    /* Icy Mint Theme */
    --grad-bckg:linear-gradient(50deg, rgba(242, 250, 255, 0.79), rgba(255, 255, 255, 0.71) 20%, rgba(168, 204, 220, 0.55) 90%);
    --bckg-color:#fefefe;
    --island-primary:var(--bckg-primary);
    --island-secondary:#eee;
    --island-secondary-lighter:#eee;
    --grad-primary:linear-gradient(90deg,rgb(43, 147, 147),rgb(73, 168, 159));

    --btn-2nd-text:var(--text-primary);
    --btn-2nd-bg:#eee;
    --btn-2nd-hover:#ddd;
    --btn-2nd-active:#ccc;
}
body.theme-rust-bucket{
    /* Rust Bucket Theme */
    /* 9/11/23 */

    --grad-bckg:linear-gradient(50deg, #120f0b 70%, #322524 90%);
    --bckg-color:#2c2828;
    --island-primary:rgb(31, 29, 29);

    --island-secondary:#413936;
    --island-secondary-lighter:#4c453f;
    
    /* --grad-primary:linear-gradient(90deg,rgb(99, 75, 68),rgb(133, 105, 84)); */
    /* --grad-primary:linear-gradient(90deg,rgb(64, 33, 24),rgb(74, 25, 18)); */
    /* --grad-primary:linear-gradient(90deg,rgb(74, 28, 28),rgb(86, 14, 14)); */
    --accent-primary:rgb(120, 35, 35);
    --grad-primary:linear-gradient(90deg,rgb(120, 35, 35),rgb(132, 28, 28));

    --btn-2nd-bg:#4a4949;
    --btn-2nd-hover:#575757;
    --btn-2nd-active:#616161;
}

/*  */

button.sel{
    /* outline:solid 2px var(--text-primary); */
    position:relative;
}
button.sel::after{
    content:"";
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background-color:var(--btn-sel);
    z-index:1;
    border-radius:inherit;
}

/* Notification Menu Styling */

.notification-triangle {
    top: 67px;
    right: 162px;
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid var(--bckg-secondary);
    position: fixed;
    z-index: 99;
    opacity: 0;
}

.notification-manager {
    position: fixed;
    top: 75px;
    right: 30px;
    border-radius: 1em;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    justify-content: center;
    z-index: 100;
    max-height: 500px;
    width: 470px;
    overflow-y: scroll;
    gap: 0.5em;
    background-color: rgb(43, 44, 53);
    border-top-right-radius:0px;
    border-bottom-right-radius:0px;
}

.notification-manager.open-manager {
    padding: .5em;
    height: auto;
    background-color: var(--bckg-color);
}

.notification-manager.closed-manager{
    border: none;
    padding: 0px;
    height: 0px;
}

.noti-menu-top {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    border-radius: var(--border-radius);
    background-color: var(--bckg-primary);
    padding: 0.4em;
}

.noti-menu-header {
    justify-self: start;
    /* display: grid; */
    align-items: center;
    justify-content: start;
    color: var(--text-primary);
    background-color: var(--bckg-primary);
    border-radius: 0.5rem;
    padding: 1rem;
}
.noti-menu-header .material-symbols-outlined{
    width:3rem;
    height:3rem;
    margin-right:1rem;
    display:flex;
    justify-content:center;
    align-items:center;
    background-color:rgba(255,0,0,0.2);
}

.noti {
    padding: 1.2em;
}

.read-icon::before {
    content: "";
    z-index: inherit;
    background: red;
    position: absolute;
    top: 0px;
    right: 0px;
    border-radius: 50%;
    height: 10px;
    width: 10px;
    transition: color 0.3s ease;
}

.contest-link {
    display: grid;
}

.noti-menu-btn {
    justify-self: end;
}

.delete-all {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-content: space-around;  
    gap: 0.3em;
    background-color: inherit;
    color: var(--text-primary);
    border: 1px transparent solid;
    transition-duration: 0.5s;
    transition-timing-function: ease-in;
}

.delete-all:hover {
    border: 1px var(--text-primary) solid;
    background: inherit;
}

.three-section-noti {
    position: relative;
    border-radius: var(--border-radius);
    background: var(--bckg-primary);
    display: grid;
    grid-template-columns: 50% 3fr 1fr;
    gap: 0.5em;
    box-shadow:var(--shadow-primary);
}

.two-section-noti {
    position: relative;
    border-radius: var(--border-radius);
    background: var(--grad-bckg);
    display: grid;
    grid-template-columns: auto 12.5%;
}

.notification-header {
    display: grid;
    justify-content: start;
}

.notification-body {
    font-weight: lighter;
    display: grid;
    align-items: center;
}

.noti-section-1 {
    display: grid;
    grid-template-rows: auto 2fr 1fr;
    gap: 0.6em;
}

.noti-section-2 {
    display: grid;
    justify-content: end;
    grid-template-rows: 1fr;
}

.noti-section-3 {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 0.2em;
    justify-content: center;
}

.noti-section-3 > :hover{
    cursor: pointer;
}

.noti-section-3 > {
    border-radius: 2em;
    transition: background-color,width 0.25s;
    user-select: none;
}

.review-noti {
    position: relative;
    border-radius: var(--border-radius);
    padding: 1em;
    background: var(--bckg-primary);
    display: grid;
    grid-template-columns: 6fr 1fr 1fr;
    gap: 1em;
    box-shadow:var(--shadow-primary);
}

.option-section {
    justify-self: end;
}

.noti-link {
    display: grid;
    align-items: center;
    justify-self: end;
    background: var(--grad-primary);
    border-radius: var(--border-radius);
    color: white;
    padding: 1.5em;
    text-transform: capitalize;
}

.noti-link-div {
    display: grid;
}

.notification-date-time {
    display: grid;
    align-content:center;
    font-weight: lighter;
    text-transform: uppercase;
    font-size: smaller;
}

.review-link {
    display: grid;
    align-items: center;
    grid-template-columns:auto auto;
    gap: 0.5em;
    padding:1.5em;
}

.notification-title a {
    cursor: pointer;
    text-transform: capitalize;
}

.accept-reject-div {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 0.25em;
}

.accept-reject-div .material-symbols-outlined{
    font-variation-settings:'FILL' 1;
}

.accept-reject-link {
    border-radius: 5px;
    padding: 0.5em;
    text-transform: capitalize;
    font-weight: normal;
    color: var(--text-primary);
    display: grid;
    align-items: center;
    grid-template-columns: auto 1fr;
    gap: 0.5em;
}

.toggle-view-status{
    align-self: center;
    padding: 0.25em;
    border: 1px transparent solid;
}

.toggle-view-status:hover{
    border-color: white;
    border-radius: 0.2em;
}

.delete-prompt:not(.accept-reject-link) {
    border: 1px transparent solid;
    padding: 0.25em;
    align-self: center;
}

.delete-prompt:hover {
    border-color: white;
    border-radius: .2em;
}

.default-noti {
    background-color: var(--bckg-primary);
    border-radius: var(--border-radius);
    padding: 1em;
    display: flex;
    justify-content: center;
}

.notification-bell{
    color:var(--text-primary);
    padding:0.65rem 1rem;
    min-width:20px;
    position: relative; /* for position of noti dropdown */
    cursor: pointer;
    transition: 0.3s;
    max-width:24px;
    user-select: none;
}
.notification-bell:hover{
    background-color:var(--active);
}

.notification-bell.open-manager {
    background-color: var(--active);
    /* This doesn't work, will have to fix. -paul */
}

.toast-notification-menu .check{
    max-width:24px;
}

.toast-notification-menu {
    position: fixed;
    top: 100px;
    right: 30px;
    border-radius: 12px;
    background: #fff;
    padding: 20px 35px 20px 25px;
    box-shadow: 0 6px 20px -5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transform: translateX(calc(100% + 30px));
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35);
    visibility: hidden;
  }
  
  .toast-notification-menu.open {
    transform: translateX(0%);
    visibility: visible;
  }
  
  .toast-notification-menu .notification-content {
    display: flex;
    align-items: center;
  }
  
  .notification-content .check {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-image: linear-gradient(50deg, rgba(3, 17, 26, 0.79), rgba(20, 26, 37, 0.71) 20%, rgba(15, 35, 65, 0.55) 90%);
    color: white;
  }
  
  .notification-content .message {
    display: flex;
    flex-direction: column;
    margin: 0 20px;
  }
  
  .message .text {
    font-size: 16px;
    font-weight: 400;
    color: #666666;
  }
  
  .message .text.text-1 {
    font-weight: 600;
    color: #333;
  }
  
.close {
    position: absolute;
    top: 10px;
    right: 15px;
    padding: 5px;
    cursor: pointer;
    opacity: 0.7;
    color: var(--bckg-secondary);
  }
  
 .close:hover {
    opacity: 1;
  }
  
  .toast-notification-menu .progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
  
  }
  
  .toast-notification-menu .progress:before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-color: #4070f4;
  }
  
  .progress.open:before {
    animation: progress 4s linear forwards;
  }
  
  @keyframes progress {
    100% {
      right: 100%;
    }
  }

/* End Notification Menu Styling */

.hide{
    display:none !important;
}

button.warn{
    position:relative; 
    background-color:var(--warn-bg);
    color:var(--warn-text);
}
button.warn:hover,
button.warn:active{
    background-color:var(--warn-hover);
    /* filter:brightness(0.9); */
}
.pending{
    background-color:var(--pending-bg);
    color:var(--pending-text);
}
.pending:hover,
.pending:active{
    background-color:var(--pending-hover);
}
none button.warn::after{
    content:"";
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    /* background-color:rgba(255,0,0,0.3); */
    background-color:rgba(255,0,0,0.3);
    /* mix-blend-mode:lighten; */
    z-index:1;
    border-radius:inherit;
}

.confirm-box{
    position:absolute;
    padding:1rem;
    border-radius:var(--br);
    background-color:var(--bckg-primary);
    box-shadow:var(--shadow);
}

.dropdown-btn-cont{
    width:fit-content;
}
.dropdown-btn{
    background-color:var(--btn-2nd-hover);
    color:var(--btn-2nd-text);
    padding:0.6rem 1.5rem;
    font-size:14px;
    border-radius:0.5rem;
    user-select:none;
    text-align:center;
}
.dropdown-btn:hover, .dropdown-btn.dd-hold{
    background-color:var(--btn-2nd-active);
}
.dropdown-btn:active{
    background-color:var(--btn-2nd-active);
}
/* .dropdown-btn.btn-2nd{
    background-color:var(--btn-2nd-hover);
}
.dropdown-btn.btn-2nd:hover, .dropdown-btn.btn-2nd.dd-hold{
    background-color:var(--btn-2nd-active);
}
.dropdown-btn.btn-2nd:active{
    background-color:var(--btn-2nd-active);
} */
.dropdown{
    padding:0.4rem 0px;
    box-shadow:0px 5px 10px rgba(0, 0, 0, 0.2);
    min-width:200px;
    font-size:14px;
    display:flex;
    flex-direction:column;
    gap:3px;
    border-radius:0.5rem;
    position:absolute;
    width:fit-content;
    height:fit-content;
    background-color:var(--island-secondary);
    user-select:none;
    color:var(--btn-2nd-text);
    z-index:99;
    text-align:left;
}
.dropdown hr{
    border:none;
    border-top:solid 1px var(--btn-2nd-hover);
    margin:0.2rem 0px;
    /* border-top:solid 2px var(--btn-2nd-hover); */
}
.dropdown > div.split{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.dropdown > div.split > div:last-child{
    color:gray;
    font-style:italic;
}
.dropdown > div{
    margin:0px 0.4rem;
    padding:0.5rem;
    border-radius:0.3rem;
}
.dropdown > div:hover{
    /* background-color:var(--active); */
    background-color:var(--btn-2nd-hover);
}

/* Island-list styling without hover styling */
.island-group2{
    padding:0.4rem 0px;
    min-width:200px;
    font-size:14px;
    display:flex;
    flex-direction:column;
    gap:3px;
    border-radius:0.5rem;
    width:fit-content;
    height:fit-content;
    color:var(--btn-2nd-text);
    text-align:left;
}
.island-group2 > div{
    margin:0px 0.4rem;
    padding:0.5rem;
    border-radius:0.3rem;
}
.island-list{
    padding:0.4rem 0px;
    min-width:200px;
    font-size:14px;
    display:flex;
    flex-direction:column;
    gap:3px;
    border-radius:0.5rem;
    width:fit-content;
    height:fit-content;
    /* background-color:var(--island-secondary); */
    user-select:none;
    color:var(--btn-2nd-text);
    text-align:left;
}
.island-list > div{
    margin:0px 0.4rem;
    padding:0.5rem;
    border-radius:0.3rem;
}
.island-list > div:hover{
    background-color:var(--btn-2nd-hover);
}
.island-list > div.active{
    background-color:var(--bckg-color);
}
.island-list > div.active:hover{
    background-color:var(--btn-2nd-active);
}

.dbl-column{
    display:grid;
    grid-template-columns:1fr 1fr;
}

/* Basic Styling */
textarea{
    padding:0.5rem;
    outline:solid 2px var(--text-primary);
    width:100%;
    height:200px;
    resize:none;
    margin:0.5rem 0px;
    border:none;
    border-radius:0.3rem;
}

/* Util */
.hidden{
    visibility:hidden;
}

.visible{
    visibility:visible;
}

.btn-remove:hover{
    color:red;
}

/* button:not(.accent-btn):disabled{
    filter:brightness(0.8) contrast(0.3);
} */
/* button:disabled{
    cursor:not-allowed;
} */

.note{
    color:gray;
    font-style:italic;
}
.note-small{
    color:gray;
    font-style:italic;
    font-size:14px;
}

/* Toggle Button */
.toggle-btn{
    color:var(--btn-2nd-text);
    background-color:var(--island-primary);
    display:flex;
    align-items:center;
    gap:10px;
    padding-right:1rem;
    width:100%;
    white-space:nowrap;
}
.toggle-btn .material-symbols-outlined{
    color:firebrick;
    font-size:24px;
    max-width:24px;
}
.toggle-btn:hover{
    background-color:var(--island-secondary);
}
.toggle-btn:active{
    background-color:var(--btn-2nd-hover);
}
.toggle-btn > div:nth-child(2){
    text-align:center;
    width:100%;
}
/* Toggle Button Toggled */
.toggle-btn.toggled{
    background-color:var(--island-secondary);
}
.toggle-btn.toggled .material-symbols-outlined{
    color:lightseagreen;
}
.toggle-btn.toggled:hover{
    background-color:var(--btn-2nd-hover);
}
.toggle-btn.toggled:active{
    background-color:var(--btn-2nd-active);
}

.icon-loading{
    animation:SearchButtonLoading infinite 0.5s ease-in-out;
    width:max-content;
}
@keyframes SearchButtonLoading {
    0%{
        transform:rotate(0deg);
    }
    100%{
        transform:rotate(360deg);
    }
}

.accent-btn{
    background:var(--grad-primary);
    color:var(--login-btn-text);
    transition:all 0.3s ease-out;
    cursor:default;
    box-shadow:var(--shadow-primary);
}
button.accent-btn{
    cursor:pointer;
}
button.accent-btn:disabled{
    cursor:not-allowed;
}
.accent-btn:hover,
.accent-btn:active{
    filter:brightness(1.25);
}
.accent-btn:disabled,
button:disabled{
    background-color:var(--grad-disabled);
    filter:grayscale(1);
    color:white;
}
.accent-btn:disabled:hover,
button:disabled:hover{
    transition:all 0.3s ease-out;
    background-color:var(--grad-disabled);
    filter:grayscale(1) brightness(1.25);
    cursor:not-allowed;
}
textarea:disabled{
    /* filter:grayscale(1) brightness(0.8); */
    /* filter:blur(1px) brightness(0.9); */
    filter:none;
    cursor:not-allowed;
    /* color:white; */
}
.accent-btn.grayed{
    background:linear-gradient(90deg,rgb(109, 109, 109),rgb(152, 152, 152));
}

.indicate{
    animation:Indicate forwards 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes Indicate {
    0%{
        transform:scale(1);
    }
    50%{
        transform:scale(1.15);
        filter:brightness(1.25);
        border-radius:0.7rem;
    }
    100%{
        transform:scale(1);
    }
}

.island-sect{
    padding:0.5rem;
    border-radius:0.5rem;
    display:flex;
    gap:0.5rem;
    font:var(--font);
    white-space:nowrap;
}
.island-group{
    background-color:var(--island-primary);
    box-shadow:var(--shadow-primary);
    padding:0.5rem;
    display:inline-block;
    border-radius:0.75rem;
    display:flex;
    gap:0.5rem;
}
.vertical{
    flex-direction:column;
    /* gap:1rem; */
}
.island-group.medium{
    padding:1rem;
}
.island-group.large{
    padding:1.5rem;
}
.island-group.sub{
    font-size:16px;
}
.island-group.sub2{
    font-size:14px;
}
.island-group .island-group:not(.accent):not(.clear):not(.clear2){
    background-color:var(--active);
    box-shadow:none;
    width:100%;
    border-radius:0.5rem;
    /* Enabled these two border styles for awesome cell-shaded look */
    /* border:solid 1px gray; */
}
/* .island-group button:not(.warn):not(.accent-btn){
    border:solid 1px gray; 
*/
.island-group.accent{
    background:var(--grad-primary);
    color:white;
    box-shadow:var(--shadow-primary);
}
/* div.island-group.clear{
    background-color:rgba(0,100,255,0.03);
    border-radius:0.5rem;
} */
div.island-group.clear2{
    background-color:transparent;
    box-shadow:none;
    border-radius:0.5rem;
}

.island-flx{
    display:flex;
    align-items:center;
    gap:0.5rem;
    flex-direction:row;
    width:100%;
}
.island-flx > button{
    height:100%;
}
/* div.island.group > div.island-group.clear{
    background-color:transparent;
} */

.fill-line{
    width:100%;
    height:0px;
    border-top:dotted 3px var(--text-primary);
    min-width:0.75rem;
}

.sub-note{
    opacity:0.35;
    white-space:nowrap;
    gap:1.5rem;
    font-size:14px;
}

.blur-bckg{
    filter:blur(35px);
}

input.edit, textarea.edit{
    background:none;
    outline:none;
    outline:dashed 2px var(--text-primary);
    width:100%;
    box-shadow:var(--shadow-secondary);
}

.edit-pencil{
    transition:all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    rotate:0deg;
}
.edit-pencil.rotate{
    animation:EditPencilRotate 0.3s ease-in;
    /* animation:EditPencilRotate 0.6s cubic-bezier(0.175, 1.985, 0.82, 1.275); */
    --ang-dest:-45deg;
    rotate:var(--ang-dest);
}
@keyframes EditPencilRotate{
    0%{
        rotate:0deg;
    }
    25%{
        rotate:-55deg;
    }
    50%{
        rotate:-45deg;
    }
    75%{
        rotate:-40deg;
    }
    100%{
        rotate:-45deg;
    }
}

.icon-handshake{
    transition:all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    translate:0px 0px;
    rotate:0deg;
}
/* .icon-handshake:hover{
    animation:IconHandshake 0.3s ease-in;
    rotate:-45deg;
} */
@keyframes IconHandshake{
    0%{
        translate:0px 0px;
        rotate:0deg;
    }
    25%{
        translate:0px -2px;
        rotate:5deg;
    }
    50%{
        translate:0px 0px;
        rotate:0deg;
    }
    75%{
        translate:0px 1px;
        rotate:-5deg;
    }
    100%{
        translate:0px 0px;
        rotate:0deg;
    }
}

br.half{
    height:0px !important;
}

.accent-btn.accent-btn-alt{
    background:var(--grad-alt);
    color:white;
}

pre{
    font-family:var(--font);
    white-space:normal;
}

/* MissionCont Stuff */

@keyframes MissionDivOpen {
    0%{
        scale:0.9;
    }
    15%{
        scale:1.02;
    }
    50%{
        scale:1;
    }
    100%{
        opacity:1;
    }
}
@keyframes MissionDivOpenForIsland {
    0%{
        translate:0px 0px;
        scale:0.9;
        opacity:0.5;
    }
    15%{
        scale:1.02;
        translate:0px 0px;
    }
    50%{
        scale:1;
    }
    100%{
        opacity:1;
    }
}
@keyframes MissionDivOpenForIsland-Right {
    0%{
        translate:-20px 0px;
        scale:0.9;
        opacity:0.5;
    }
    15%{
        scale:1.02;
        translate:0px 0px;
    }
    50%{
        scale:1;
    }
    100%{
        opacity:1;
    }
}
@keyframes MissionDivOpenForIsland-Left {
    0%{
        translate:20px 0px;
        scale:0.9;
        opacity:0.5;
    }
    15%{
        scale:1.02;
        translate:0px 0px;
    }
    50%{
        scale:1;
    }
    100%{
        opacity:1;
    }
}
@keyframes MissionDivOpenForIsland-Up {
    0%{
        translate:0px 20px;
        scale:0.9;
        opacity:0.5;
    }
    15%{
        scale:1.02;
        translate:0px 0px;
    }
    50%{
        scale:1;
    }
    100%{
        opacity:1;
    }
}
@keyframes MissionDivOpenForIsland-Down {
    0%{
        translate:0px -20px;
        scale:0.9;
        opacity:0.5;
    }
    15%{
        scale:1.02;
        translate:0px 0px;
    }
    50%{
        scale:1;
    }
    100%{
        opacity:1;
    }
}
/* .missionDiv > div > hr:not(:nth-child(3)){
    margin:1.5rem 0px;
} */

.missionDiv > div{
    padding:1rem;
    border-radius:inherit;
    margin-bottom:1rem;
}
.cont-mission{
    width:100vw;
    height:0px;
    /* height:100%; */
    /* height:calc(100vh - 85px); */
    /* background-color:rgba(0,0,0,0.2); */
    /* background-color:var(--shadow); */
    position:absolute;
    left:0px;
    top:85px;
    z-index:10;
    display:flex;
    justify-content:center;
    align-items:start;
    gap:1rem;
}
.cont-mission > *:last-child{
    padding-bottom:1.5rem;
}
.cont-mission-back{
    display:none;
    position:absolute;
    left:0px;
    top:0px;
    width:100vw;
    height:calc(100vh - 84px);
    background-color:var(--shadow);
    /* background-color:var(--active); */
    z-index:0;
    backdrop-filter:blur(3px);
}
.missionDiv{
    border-radius:1rem;
    min-width:500px;
    width:500px;
    height:auto;
    animation:MissionDivOpen forwards 0.5s ease-out;
    /* transition:height 0.5s ease 1s; */
    transition:margin-top 0.2s cubic-bezier(0.165, 0.84, 0.44, 1), height 0.5s ease 1s;
    z-index:2;
}
.missionDiv:not(:nth-child(2)){
    z-index:1;
}
.missionDiv.submit{
    /* transition:margin-top 0.2s cubic-bezier(0.165, 0.84, 0.44, 1), height 0.5s ease 1s; */
    margin-top:5px !important;
    /* height:calc(100vh - 95px) !important; */
}
.missionDiv .header{
    display:flex;
    justify-content:space-between;
    /* font-style:italic; */
    font-size:22px;
    font-style:italic;
    align-items:center;
}
.missionDiv .label{
    font-style:italic;
    font-weight:300;
    margin-bottom:0.8rem;
    margin-top:-7px;
    opacity:0.7;
}
.missionDiv .date{
    display:flex;
    justify-content:space-evenly;
    align-items:center;
    font-size:20px;
    padding:0.5rem 1rem;
    background-color:var(--active);
    border-radius:50rem;
}
.missionDiv.custom .date{
    flex-direction:column;
    gap:0.5rem;
    border-radius:1rem;
}
.missionDiv .date > :nth-child(2){
    font-size:14px;
    font-style:italic;
    opacity:0.7;
}
.btn-close{
    padding:0.5rem;
    /* margin:-0.5rem; */
    border-radius:50%;
    transition:all 0.2s ease-out;
}
.btn-close:hover{
    background-color:var(--active);
}
.cont-mission .island-group .header{
    font-size:18px;
    white-space:nowrap;
    gap:2rem;
    font-style:italic;
}
.cont-mission .d-submit{
    gap:0.75rem;
}
.cont-mission .d-submit > *{
    width:100%;
}
.missionDiv.custom input{
    outline:dashed 2px var(--text-primary) !important;
    padding:var(--br) !important;
    border-radius:0px !important;
    border:none;
    font-size:18px;
}

.missionDiv.custom textarea {
    outline: dashed 2px var(--text-primary) !important;
    padding: var(--br) !important;
    border-radius: 0px !important;
    border: none;
    font-size: 18px;
}

div.vr{
    width:0px;
    border-right:solid 1px var(--text-primary);
    height:50%;
    display:none;
}

.mini-list{
    font-size:15px;
    font-weight:400;
    padding:0.25rem 0.75rem;
    border-radius:0.75rem;
    background-color:var(--island-primary);
    box-shadow:var(--shadow-primary);
}
.mini-list .island-group{
    background-color:var(--island-secondary);
    box-shadow:none;
}

.mini-list2{
    margin:0.25rem 0px;
    font-size:12px;
    font-weight:400;
    padding:0.25rem;
    border-radius:0.75rem;
    background-color:var(--island-primary);
    box-shadow:var(--shadow-primary);
    flex-direction:column;
    gap:0.1rem;
}
.mini-list2 > div{
    padding:0.25rem;
    border-radius:0.25rem;
}
.mini-list2 > div:nth-child(even){
    background-color:var(--active);
}
div.mini-list2 div.island-group{
    padding:0.5rem !important;
}

.clear-bg{
    background:none;
}

.outline:not(.sel){
    outline:solid 2px var(--island-secondary);
}

button.taller{
    padding:0.75rem 1rem;
    font-size:16px;
}
button.thinner{
    padding:0.5rem 1.5rem;
}
.icon-btn{
    padding:0.5rem 1.5rem;
    padding-right:1.8rem;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.5rem;
}

hr{
    opacity:0.3;
}

.positive-text{
    /* color:var(--grad-alt); */
    color:teal;
}
.negative-text{
    color:var(--warn-bg);
}

textarea.island-group{
    transition:none !important;
}

/* Info pages */

.info-page {
    margin: 0 10%;
}

/* .info-page-title {
    
} */

.info-page section {
    margin: 1em;
}

.info-page p {
    margin: 0.5em;
}

.section-label {
    color: var(--accent-primary)
}

/* .subsection-label {
   
} */

details {
    user-select: none;
    padding: 0.5em 0;
}

summary {
    display: flex;
    cursor: pointer;
}

summary::-webkit-details-marker {
    display: none;
}

.answer {
    padding-top: 0.5em;
    color: var(--accent-primary)
}

footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    width: 100%;
}

.footer-links {
    align-self: center;
    font-size: small;
}

.hr-footer {
    align-self: center;

    border: 1px solid var(--text-primary);
    width: 80%;

    margin-inline: 2em;
    margin-bottom: 2em;
    margin-top: 2em;
}

.btn-small{
    padding:0.5rem 0.75rem;
    display:flex;
    align-items:center;
    gap:0.5rem;
    justify-content:center;
}
.btn-small .material-symbols-outlined{
    font-size:18px !important;
}

/* Full Width */
.fw{
    width:100%;
}

.checked{
    font-variation-settings:'FILL' 1;
    color:teal;
    background-color:white;
    border-radius:0.2rem !important;
}

.dual-list{
    display:flex;
    width:100%;
    gap:0.5rem;
}
.dual-list > div{
    display:flex;
    flex-direction:column;
    max-width:50%;
    min-width:50%;
    width:50%;
    
    height:calc(100vh - 500px);
    min-height:400px;

    /* transition:width 0.1s ease-out, opacity 0.1s ease-out; */
}
div.dual-list-div{
    width:100%;
    background-color:var(--active);
    /* resize:vertical; */
    min-height:3rem;
    flex-grow:1;
    /* height:calc(100% - 100rem); */
}
.dual-list .heading{
    margin-bottom:0.5rem;
}

/* Prism JS Overrides */
.code-cont{
    padding:0.5rem;
    margin:-0.25rem;
    background-color:var(--island-secondary) !important;
    border-radius:5px;
    overflow:auto;
}
:not(pre)>code[class*=language-], pre[class*=language-]{
    background:none !important;
}
code[class*=language-], pre[class*=language-]{
    text-shadow:none !important;
}
pre[class*=language-]{
    padding:0rem !important;
    overflow:unset !important;
}

/*  */

.has-cursor{
    cursor:pointer;
}

.centered-item-cont > div{
    display:flex;
    justify-content:center;
    align-items:center;
}

.outlined-btn{
    /* border: solid 2px var(--text-primary); */
    background: none;
    background-color: rgba(100, 185, 255, 0.5);
    color: var(--text-primary);
}
.outlined-btn:hover,
.outlined-btn:active{
    background-color: rgba(186, 224, 255, 0.5);
}

.warn-text{
    color:var(--warn-bg);
    background-color:var(--warn-text);
    padding:0.3rem;
    border-radius:0.3rem;
}

/* Styling for home section */
.home-img {
    border-radius: 20px;
    box-shadow: 0 0 80px var(--accent-primary);
    max-width:80vw;
}

.home-img-container{
    display: grid;
    justify-content: center;
    grid-template-rows: auto;
    gap: 4em;
    align-items: center;
}

.home-container{
    display: grid;
    grid-template-rows: auto;
    padding: 10em;
    padding-top: 7em;
    display: grid;
    gap: 5em;
    justify-content: center;
}

.home-section{
    max-width: 100dvw;
    display: grid;
    display: grid;
    grid-template-rows: auto;
    justify-content: center;
    gap: 5em;
}

.home-title{
    font-size: 4em;
    display: grid;
    justify-content: center;
    text-align: center;
}

.home-title-nested-1{
    display: grid;
    grid-template-rows: auto auto;
    gap: 0.5em;
    justify-content: center;
}

.home-title-nested-2{
    font-size: 1.8rem;
    font-style: italic;
    display: flex;
    gap: 2em;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.caption{
    font-weight: bolder;
}

.signup {
    display: flex;
    justify-content: center;
}

.home-btn{
    text-transform: uppercase;
    font-weight: 600;
    font-size: large;
    padding-inline: 2em;
}

@media (max-width:950px) {
    .home-container{
        padding: 40px;
        padding-top: 70px;
    }

    .home-img{
        box-shadow: 0 0 30px var(--accent-primary);
    }

    .home-title{
        font-size: 2.5rem;
        gap: 1em;
    }

    .home-title-nested-2{
        display: grid;
        grid-template-rows: auto auto;
        gap: 2em;
    }
}

@media (max-width: 550px) {
    .home-title{
        font-size: 2rem;
        gap: 0.5em;
    }
}

.dashed-outline{
    border-left:solid 8px teal;
}

.badge-cont{
    position:relative;
    gap:0.5rem;
    background-color:var(--island-primary);
    border-radius:50%;
    /* border-radius:0.3rem; */
    /* padding-left:0.5rem; */
}
.badge-cont > div{
    /* position:absolute; */
    top:0px;
    left:0px;
    transition:transform 0.5s ease-out 0.1s, opacity 0.25s ease-out;
}
.badge-cont:hover > div:last-child{
    box-shadow:0px 10px 10px rgba(0,0,0,0.05);
}
.badge-cont:hover > div:first-child{
    opacity:1;
    transform:translateX(-100%);
    transition:transform 0.25s ease-out, opacity 0.5s ease-out 0.1s;
    box-shadow:0px 3px 5px rgba(0,0,0,0.1);
}
.badge-cont > div:first-child{
    position:absolute;
    font-size:14px;
    opacity:0;
    width:max-content;
    background-color:var(--island-primary);
    border-radius:0.5rem;
    padding:0.3rem 0.4rem;
    overflow:hidden;
    pointer-events:none;
}
.missionDiv .badge-cont{
    margin-right:10px;
}