/*--Initial------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
*{
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}
body{
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
    background-color:rgb(125, 40, 60);
    background-image:linear-gradient(to bottom, #A7A7A7 0%, #E4E4E4 51%);
    font-family: system-ui, -apple-system, -apple-system-font, 'Segoe UI', 'Roboto', sans-serif;
    font-size:min(3vh, 3vw);
    height:10lvh;
    width:100%;
    margin:0px;
    padding:0px;
    /* Padding to avoid the "unsafe" areas behind notches in the screen */
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);

    background-image:radial-gradient(circle, rgb(145, 60, 80), rgb(125, 40, 60));
    color:rgb(230, 220, 200);
    font-family:"Arial";
    font-weight:bold;
    user-select:none;
    
    overflow-x:hidden;
    overflow-y:hidden;
}
:root{
    --button-font-size:1.25rem;
    --button-height:3rem;
    --input-height:2rem;
    --font-size:1.5rem;
    --border-thin:0.1rem;
    --border-thick:0.2rem;
    --border-radius:0.5rem;
    font-size:min(2.5vh, 2.5vw);
}

.explain{
    transition:ease-in-out 0.05s;
    border-radius:100%;
    aspect-ratio:1;
    flex-shrink:0;
    height:1.5rem;

    justify-content:center;
    align-items:center;
    pointer-events:all;
    cursor:pointer;
    display:flex;
}
.explain:hover{
    transform:scale(1.1);
}
.explain:active{
    transform:scale(0.9);
}

/*--Animations---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@keyframes fade-in{
    from {opacity:0}
    to   {opacity:1}
}
@keyframes fade-out{
    from {opacity:1}
    to   {opacity:0}
}

/*--Elements-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.full-mask{
    background-color:rgb(155, 70, 90);
    position:absolute;
    height:100%;
    width:100%;
    left:0px;
    top:0px;
}
.mask{
    background-color:rgba(0, 0, 0, 0.75);
    position:absolute;
    display:none;
    height:100%;
    width:100%;
    left:0px;
    top:0px;
}
.screen{
    position:absolute;
    height:100%;
    width:100%;
    left:0px;
    top:0px;
}

/*--Window-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.window{
    border:var(--border-thick) solid rgb(60, 0, 5);
    box-shadow:0px 0px 10px rgba(0, 0, 0, 0.3);
    background-color:rgb(125, 40, 60);
    border-radius:var(--border-radius);
    transform:translate(-50%,-50%);
    height:fit-content;
    position:absolute;
    left:50%;
    top:50%;
}
.window-head{
    justify-content:center;
    align-items:center;
    display:flex;
   
    margin-bottom:1rem;
    font-size:1.5rem;
    width:100%;
}
.window-body{
    height:fit-content;
    font-size:1rem;
    width:100%;
}
.window-foot{
    justify-content:space-evenly;
    align-items:center;
    display:flex;

    margin-top:1rem;
    width:100%;
}
.window-foot > button{
    height:calc(var(--button-height) * 0.75);
}

/*--Input Elements-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
input[type=text],[type=password],[type=number],[type=email],[type=date]{
    border:var(--border-thick) solid rgb(60, 0, 5);
    background-color:rgb(105, 20, 40);
    border-radius:var(--border-radius);
    font-size:var(--font-size);
    color:rgb(230, 220, 200);
   
    font-family:"Arial";
    text-align:center;
    font-weight:bold;
    outline:none;

    width:min(18vh, 18vw);
    height:var(--input-height);
}
select{
    border:var(--border-thick) solid rgb(60, 0, 5);
    background-color:rgb(105, 20, 40);
    border-radius:var(--border-radius);
    height:var(--input-height);
    color:rgb(230, 220, 200);
    font-size:var(--font-size);
    width:min(18vh, 18vw);


    font-family:"Arial";
    text-align:center;
    font-weight:bold;
    outline:none;
}
textarea{
    border:0.25vh solid rgb(60, 0, 5);
    background-color:rgb(105, 20, 40);
    color:rgb(230, 220, 200);
    width:calc(100% - 2vh);
    font-family:"Arial";
    border-radius:1vh;
    font-size:2vh;
    resize:none;
    height:calc(100% - 2vh);
}

button{
    background-color:rgb(100, 10, 25);
    font-size:var(--button-font-size);
    height:var(--button-height);
    color:rgb(230, 220, 200);
    transform:translateY(0px);
    aspect-ratio:4.5;

    font-family:"Arial";
    white-space:nowrap;
    font-weight:bold;
    cursor:pointer;
    outline:none;

    border-radius:var(--border-radius);
    border-top:var(--border-thick) solid rgb(110, 20, 35);
    border-left:var(--border-thick) solid rgb(110, 20, 35);
    border-right:var(--border-thick) solid rgb(90, 0, 15);
    border-bottom:var(--border-thick) solid rgb(90, 0, 15);
}
button:hover{
    transform:translateY(-1px);
}
button:active{
    transform:translateY(1px);
}
button:disabled{
    cursor:default;
    opacity:0.5;
}
button:hover:disabled{
    transform:translateY(0px);
}
button:active:disabled{
    transform:translateY(0px);
}

/*--Masks Mobile-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width:420px) and (max-height:780px) and (orientation:portrait){
    :root{
        font-size:4vw;
    }
    .explain{
        font-size:1.5rem;
    }
}
@media only screen and (max-width:780px) and (max-height:420px) and (orientation:landscape){
    .explain{
        font-size:1.5rem;
    }
}