/*--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);
    --window-border:     rgb(000, 000, 000);
    --window-background: rgb(255, 255, 255);
    --text-main:         rgb(000, 000, 000);
    --gray-light:        rgb(229, 231, 235);
    --gray-dark:         rgb(156, 163, 175);

    --border-radius-1: 1rem;

    font-family: "Fredoka";
}
body{
    background-color: var(--accent-light);
    color:            var(--text-main);
    margin:           0px;
}
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-out{
    from {opacity:1;}
    to   {opacity:0;}
}

/*--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: flex-start;
    align-items:     flex-start;
    display:         flex;

    margin-bottom: 1rem;
    font-size:     1.75rem;
    font-weight:   600;
}
.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;

    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:disabled{
    cursor:     not-allowed;
    box-shadow: none;

    background-color:  var(--gray-light);
    border:  2px solid var(--gray-dark);
    opacity: 0.5;
}
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]{
    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;
}

/*--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;
    }
}