@font-face{
    font-family: Montserrat;
    src: url(./font/Montserrat-Bold.ttf);
}

@font-face{
    font-family: OpenSans-Bold;
    src: url(./font/OpenSans-Bold.ttf);
}

@font-face{
    font-family: OpenSans-Regular;
    src: url(./font/OpenSans-Regular.ttf);
}

:root{
    --title-font: 1.5rem Montserrat;
    --subtitle-font: 1rem OpenSans-Bold;
    --text-font: 0.875rem OpenSans-Regular;

    /*--title-color-lm: #470068;
    --title-color-dm: #dc8fff;*/
    --title-color: #000000;

    /*--text-color-lm: #000000;
    --text-color-dm: #ffffff;*/
    --text-color: #000000;

    /*--bg-lm: rgb(248, 230, 255);
    --bg-dm: rgb(48, 0, 48);*/
    --bg-color: #ffffff;

    --el-bg-color: #470068;
    --box-bg-color: #000000;
    
    --el-shadow: inset 3px 3px 30px 0px rgba(0,0,0,0.2);
    --box-shadow: 3px 3px 30px 0px rgba(0, 0, 0, 0.5);

    --el-borderRadius: 50px;
    --box-borderRadius: 20px;

    /* Button Design */
    --main-btn-color: #ffffff;
    --secondary-btn-color: #FF7C00;

    --main-btn-bg: #FF7C00;
    --secondary-btn-bg: none;

    --main-btn-border: none;
    --secondary-btn-border: 2px solid #FF7C00;
}

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    transition: all ease-in-out .1s;
}

@keyframes l5{
    0%  {box-shadow: 20px 0 #FF7C00, -20px 0 #E2FF00;background: #F7390C }
    33% {box-shadow: 20px 0 #F7390C, -20px 0 #FF7C00;background: #E2FF00}
    66% {box-shadow: 20px 0 #E2FF00,-20px 0 #F7390C; background: #FF7C00}
    100%{box-shadow: 20px 0 #F7390C,-20px 0 #FF7C00; background: #E2FF00 }
}

@keyframes popdown{
    0% {opacity: 0; transform: translate(-50%, -100px);}
    100% {opacity: 1; transform: translate(-50%, 0)}
}

@keyframes popup{
    0% {opacity: 0; transform: translate(-50%, 100px);}
    100% {opacity: 1; transform: translateY(-50%, 0)}
}

body{
    background-color: var(--bg-color);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
}

.title{
    font: var(--title-font);
    color: var(--title-color);
}

.subtitle{
    font: var(--subtitle-font);
    color: var(--text-color);
}

.text{
    font: var(--text-font);
    color: var(--text-color);
}

.title, .subtitle, .text{
    padding: 0 0.625rem;
}

.c{
    color: var(--title-color);
}

button{
    border-radius:  var(--el-borderRadius);
    width: 100%;
    height: 2.1875rem; 
    cursor: pointer;
    font-weight: bold;
    transition: .1s all ease-in-out;
    padding: 0 1.25rem;
}

button:not(#logoutBtn){
    max-width: 12.5rem;
}

button:disabled{
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
}

.main-btn{
    color: var(--main-btn-color);
    background: var(--main-btn-bg);
    border: var(--main-btn-border);
}

.secondary-btn{
    color: var(--secondary-btn-color);
    background: var(--secondary-btn-bg);
    border: var(--secondary-btn-border);
}

.main-icon-btn{
    color: var(--main-btn-color);
    background: var(--main-btn-bg);
    border: var(--main-btn-border);
    width: 35px;
    padding: 0;
    margin: 0 10px;
}

button:hover{
    --main-btn-bg: #5d00ba;
    --secondary-btn-color: #5d00ba;
    --secondary-btn-border: 2px solid #5d00ba;
}

#logoutBtn{
    border-color: var(--title-color);
}

.success{
    color: rgb(0, 197, 0);
    fill: rgb(0, 197, 0);
}

.error{
    color: red;
    fill: red;
}

.note{
    color: #ff6f00;
    fill: #ff6f00;
}

.warn{
    color: yellow;
    fill: yellow;
}

input{
    border: none;
    background-color: var(--el-bg-color);
    width: 100%;
    /*max-width: 18.75rem;*/
    height: 2.1875rem;
    border-radius: var(--el-borderRadius);
    color: #ffffff;
    font-weight: bold;
    padding: 0 1.25rem;
    box-shadow: var(--el-shadow);
}

input:focus{
    border: var(--main-btn-border);
}

input::placeholder{
    color: #ffffff;
}

input[type="checkbox"]{
    visibility: hidden;
    display: none;
}

.checkbox-wrapper{
    cursor: pointer;
}

.checkbox-wrapper .toggle{
    position: relative;
    display: block;
    width: 40px;
    height: 20px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transform: translate3d(0, 0, 0);
}

.checkbox-wrapper .toggle:before{
    content: "";
    position: relative;
    top: 3px;
    left: 3px;
    width: 34px;
    height: 14px;
    display: block;
    background: #9A9999;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.checkbox-wrapper .toggle span{
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    display: block;
    background: white;
    border-radius: 10px;
    box-shadow: 0 3px 8px rgba(154, 153, 153, 0.5);
    transition: all 0.2s ease;
}

.checkbox-wrapper .toggle span:before{
    content: "";
    position: absolute;
    display: block;
    margin: -18px;
    width: 56px;
    height: 56px;
    background: var(--main-btn-bg);
    border-radius: 50%;
    transform: scale(0);
    opacity: 1;
    pointer-events: none;
}

.checkbox-wrapper input:checked + .toggle:before{
    background: #E2FF00;
}

.checkbox-wrapper input:checked + .toggle span{
    background: var(--main-btn-bg);
    transform: translateX(20px);
    transition: all 0.2s cubic-bezier(0.8, 0.4, 0.3, 1.25), background 0.15s ease;
    box-shadow: 0 3px 8px rgba(79, 46, 220, 0.2);
}

.checkbox-wrapper input:checked + .toggle span:before{
    transform: scale(1);
    opacity: 0;
    transition: all 0.4s ease;
}

.checkbox-wrapper:has(input[type="checkbox"]:disabled){
    opacity: .7;
}

.icon{
    fill: var(--title-color);
}

#auth{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 90;
    background-color: #ae00ff13;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#auth #login{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.25rem;
    border-radius: var(--box-borderRadius);
    background-color: var(--box-bg-color);
    box-shadow: var(--box-shadow);
    width: 100%;
    max-width: 25rem;
    height: 28.125rem;
}

#auth #login img{
    width: 75%;
    max-width: 500px;
}

#auth #login .title{
    text-align: center;
    width: 90%;
}

#auth #login form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
    width: 100%;
}

#static{
    height: 100%;
    width: 18.75rem;
    background-color: var(--el-bg-color);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 0;
    overflow-y: auto;
}

#static *{
    color: var(--title-color);
}

#static > div{
    width: 90%;
    /*height: 100px;*/
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

#humburger{
    display: none;
}

#header{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

#header > div{
    display: flex;
    align-items: center;
    justify-content: center;
}

#header #bars{
    flex-grow: 1;
    width: 0;
}

#header #logo{
    flex-grow: 2;
}

#header #spc{
    flex-grow: 1;
    display: none;
}

#header #logo img{
    width: 100%;
}

#member{
    display: grid !important;
    grid-template-areas: "pfp displayName displayName displayName"
                         "pfp department department points"
                         "pfp position position points";
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    justify-items: left;
    align-items: center;
    width: 100%;
}

#member #pfp img{
    border-radius: 50%;
    width: 100%;
}

#member #pfp{
    grid-area: pfp;
    overflow: hidden;
    border-radius: 50%;
    background-color: var(--title-color);
    aspect-ratio: 1;
}

#member #displayName{
    grid-area: displayName;
}

#member #department{
    grid-area: department;
}

#member #position{
    grid-area: position;
}

#member #points{
    grid-area: points;
}

#navbar, #menu{
    gap: 20px;
}

#navbar > *, #menu > *:not(button){
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: left;
    gap: 10px;
    align-items: center;
    cursor: pointer;
    padding: 10px 10px;
    border-radius: 50px;
}

#navbar > *:hover, #menu > *:hover{
    background-color: #7800af7b;
}

.link.active{
    background-color: var(--bg-color);
}

#dynamic{
    height: 100%;
    width: calc(100% - 18.75rem);
    background-color: var(--bg-color);
    padding: 1.25rem 0.625rem;
    overflow-x: hidden;
    overflow-y: auto;
}

dialog.alert{
    z-index: 60;
    min-width: 350px;
    width: auto;
    max-width: 700px;
    position: fixed;
    top: calc(100vh - 100px);
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--el-bg-color);
    border: none;
    border-radius: var(--box-borderRadius);
    box-shadow: var(--box-shadow);
    padding: 10px 5px;
    animation: popup .1s linear;
}

dialog.alert > *{
    width: 100%;
}

dialog.alert .type > *{
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

dialog.prompt{
    z-index: 60;
    min-width: 400px;
    max-width: 700px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--el-bg-color);
    border: none;
    border-radius: var(--box-borderRadius);
    box-shadow: var(--box-shadow);
    padding: 10px 5px;
    animation: popup .1s linear;
}

dialog.prompt > *{
    width: 100%;
}
dialog.prompt form, dialog.prompt .inputs{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

dialog.prompt form, dialog.prompt .inputs input{
    margin: 10px 0 20px 0;
}

dialog.prompt .buttons{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    gap: 0.625rem;
}

@media screen and (min-width: 50px) and (max-width: 767px){
    /*Mobile Device Screens*/
    #auth #login{
        height: 100%;
        max-width: 100%;
        border-radius: 0;
    }
    #humburger{
        display: inline-block;
        cursor: pointer;
    }
    #static{
        position: fixed;
        top: 0;
        left: -100%;
        justify-content: space-between;
        padding: 60px 0;
        z-index: 80;
        transition: .1s all ease-in-out;
    }
    #static #header{
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 3.125rem;
        z-index: 70;
        flex-direction: row;
    }
    #header #logo img{
        width: 10.625rem;
    }
    #header #spc{
        display: inline-block;
    }
    #static #navbar{
        position: fixed;
        flex-direction: row !important;
        bottom: 0;
        left: 0;
        width: 100vw;
        height: 3.125rem;
        z-index: 70;
    }
    #static #navbar > div{
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0;
        height: 90%;
    }
    #static #navbar > div > span{
        display: none;
    }
    #header, #navbar{
        background-color: var(--el-bg-color);
    }
    #dynamic{
        width: 100%;
        height: calc(100% - 6.25rem);
    }
    dialog.alert{
        top: 70px;
        width: 90%;
        animation: popdown .1s linear;
    }
    dialog.prompt{
        min-width: 95%;
        max-width: 95%;
        top: 100px;
        left: 50%;
        transform: translateX(-50%);
        animation: popdown .1s linear;
    }
}
  
@media screen and (min-width: 767px) and (max-width: 991px){
    /*Large Screens*/
    #static{
        width: 30vw;
    }
    #dynamic{
        width: 70vw;
    }
}