/*--Initial------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@font-face{
    font-family: "Fredoka";
    src: url("/assets/fonts/fredoka.ttf")
}

:root{
    --accent-main:       rgb(255, 199, 038);
    --accent-light:      rgb(255, 251, 234);
    --accent-dark:       rgb(030, 036, 048);
    --accent-2:          rgb(036, 071, 201);
    --window-border:     rgb(000, 000, 000);
    --window-background: rgb(255, 255, 255);
    --text-main:         rgb(000, 000, 000);
    --text-gray:         rgb(100, 100, 100);
    --gray-light:        rgb(229, 231, 235);
    --gray-dark:         rgb(156, 163, 175);

    --border-radius-1: 1rem;
    --border-radius-2: 0.5rem;

    font-family: "Fredoka";
}
body{
    background-color: var(--accent-light);
    color:            var(--text-main);
    margin:           0px;
    overflow:      hidden;
}
a{
    color: var(--text-main);
    text-decoration:   none;
    font-weight:        500;
}
a:hover{
    text-decoration: underline;
}
.loading-screen{
    background-color: var(--accent-light);
    position: fixed;
    height:   100%;
    width:    100%;
    left:     0px;
    top:      0px;
    z-index:  100;
    inset:    0;
}
@keyframes fade-in{
    from {opacity:0;}
    to   {opacity:1;}
}
@keyframes fade-out{
    from {opacity:1;}
    to   {opacity:0;}
}

/*--Page---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.page{
    position: relative;
    height: 100vh;
    width:  100vw;

    justify-content: flex-start;
    align-items:     flex-start;
    display:         flex;
}
.side-bar{
    background-color: var(--accent-dark);
    flex-shrink: 0;
    height:   100vh;
    width:    15rem;
}
.side-title{
    color: var(--accent-main);
    font-size:  2rem;
    font-weight: 600;

    margin-bottom: 2rem;
    margin-left:   1rem;
    margin-top:    1rem;
}
.side-tabs{
    margin-left:        1rem;
    height:      fit-content;
    width: calc(100% - 2rem);
}
.side-tab{
    border-radius: var(--border-radius-2);
    color:       rgb(255, 255, 255);
    padding-left: 0.5rem;
    font-size:    1.2rem;
    font-weight:  500;
    height:       2rem;
    
    transition:  ease-in-out 0.1s;
    user-select: none;
    cursor:      pointer;

    justify-content: flex-start;
    align-items:     center;
    display:         flex;
}
.side-tab:hover{
    background-color: rgba(255, 255, 255, 0.1);
}
.side-tab:active{
    background-color: rgba(255, 255, 255, 0.2);
}
.side-tab-selected{
    background-color: var(--accent-main);
    color:            var(--text-main);
    cursor:           default;
}
.side-tab-selected:hover{
    background-color: var(--accent-main);
}
.side-tab-selected:active{
    background-color: var(--accent-main);
}
.side-button{
    position: absolute;
    left:     calc(2.5rem - 2px);
    width:    10rem;
    bottom:   1rem;
}
.main-page{
    overflow-x: hidden;
    overflow-y: auto;

    padding: 1.5rem;
    height:  100vh;
    width:   100vw;
}

@media (max-width: 768px){
    .side-bar{
        position:   fixed;
        left:       0;
        top:        0;
        height:     100dvh;
        z-index:    10;
        transition: transform ease-in-out 0.25s;
    }
    .side-bar-hidden{
        transform: translateX(-100%);
    }
}

/*--Windows------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.window{
    background-color:  var(--window-background);
    border-radius:     var(--border-radius-1);
    border:  2px solid var(--window-border);
    padding: 1rem;
}
.window-head{
    justify-content: center;
    align-items:     flex-start;
    display:         flex;

    margin-bottom: 1rem;
    font-size:     1.75rem;
    font-weight:   600;
}
.window-head-l{
    justify-content: flex-start;
}
.window-body{
    height: fit-content;
    width:  100%;
}
.window-foot{
    justify-content: space-evenly;
    align-items:     center;
    display:         flex;

    min-height: 4rem;
    width:      100%;
}

/*--Buttons------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
button{
    background-color:  var(--window-background);
    border-radius:     var(--border-radius-1);
    border:  2px solid var(--window-border);

    font-family: "Fredoka";
    font-size:    1.25rem;
    font-weight:  500;

    padding:   0.5rem;
    min-width:  10rem;
    cursor:   pointer;
    user-select: none;

    justify-content: center;
    align-items:     center;
    display:         flex;

    box-shadow: 0 4px 0 var(--window-border);
    transform:  translateY(0);
    transition: transform 0.1s ease, box-shadow 0.05s ease-in-out;
}
button:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 0 var(--window-border);
}
button:active{
    transform: translateY(4px);
    box-shadow: 0 0 0 var(--window-border);
}

.link-button{
    background-color:  var(--window-background);
    border-radius:     var(--border-radius-1);
    border:  2px solid var(--window-border);

    font-family: "Fredoka";
    font-size:    1.25rem;
    font-weight:  500;

    padding:  0.5rem;
    min-width: 10rem;
    cursor:  pointer;

    justify-content: center;
    align-items:     center;
    display:         flex;

    box-shadow: 0 4px 0 var(--window-border);
    transform:  translateY(0);
    transition: transform 0.1s ease, box-shadow 0.05s ease-in-out;

    color: var(--text-main);
    text-decoration: none !important;
}
.link-button:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 0 var(--window-border);
}
.link-button:active{
    transform: translateY(4px);
    box-shadow: 0 0 0 var(--window-border);
}

.button-accent{
    background-color: var(--accent-main);
}
.button-accent-2{
    background-color: var(--accent-2);
    color:   var(--window-background);
}
.button-accent-dark{
    background-color: var(--accent-dark);
    color:      var(--window-background);
}

button:disabled{
    cursor:     not-allowed;
    box-shadow: none;

    background-color:  var(--gray-light);
    border:  2px solid var(--gray-dark);
    opacity: 0.5;
    color:   var(--text-main);
}
button:disabled:hover{
    box-shadow: none;
    transform:  translateY(0);
}
button:disabled:active{
    box-shadow: none;
    transform:  translateY(0);
}

/*--Inputs-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
input[type=text], input[type=password], input[type=number], select{
    background-color:  var(--window-background);
    border-radius:     var(--border-radius-1);
    border:  2px solid var(--window-border);

    padding-left: 0.5rem;
    height:       2rem;

    font-family: "Fredoka";
    font-size:    1rem;
    font-weight:  400;

    -webkit-appearance:   none;
    -moz-appearance: textfield;
    appearance:      textfield;
}
select{
    cursor: pointer;
    height: 2.5rem;
}

/*--Mobile Display-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width:480px) and (orientation:portrait){
    :root{
        font-size:12px;
    }
}
@media only screen and (max-height:500px) and (orientation:landscape){
    :root{
        font-size:12px;
    }
}