body{
    background-color:rgb(240,240,240);
    font-family:"Arial";
    user-select:none;
    overflow:hidden;
}
.head{
    border-bottom:1px solid rgb(50,50,50);
    background-color:rgb(70,70,70);
    color:rgb(255,255,255);
    justify-content:center;
    height:min(6vh,6vw);
    align-items:center;
    position:absolute;
    display:flex;
    width:100%;
    left:0px;
    top:0px;
}
.head-text{
    font-size:min(3vh,3vw);
    width:min(20vh,20vw);
    margin:min(1vh,1vw);
    height:100%;
    
    justify-content:center;
    align-items:center;
    display:flex;
}
.body{
    border:1px solid rgb(200,200,200);
    background-color:rgb(255,255,255);
    border-radius:min(1vh,1vw);
    transform:translate(-50%);
    height:min(60vh,60vw);
    width:min(70vh,70vw);
    position:absolute;
    top:min(9vh,9vw);
    left:50%;
}
.note-image{
    background-image:url("./Note Pictures/Starting Screen.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;

    position:absolute;
    height:50%;
    width:100%;
    left:0px;
    top:0px;
}
.button-holder{
    position:absolute;
    height:50%;
    width:98%;
    left:1%;
    top:50%;
}
.button-row{
    justify-content:center;
    align-items:flex-start;
    display:flex;
    height:33%;
    width:100%;
}
.button{
    aspect-ratio:1;
    margin:min(0.3vh,0.3vw);
    transform:translateY(0px);
    border-radius:min(1.5vh,1.5vw);
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;
    overflow:hidden;
    cursor:pointer;
    height:85%;
}
.button:hover{
    transform:translateY(-1px);
}
.button:active{
    transform:translateY(1px);
}
.button-mask-wrong{
    background-color:rgba(255,0,0,0.5);
    height:100%;
    width:100%;

    -webkit-animation:fadeIn ease-in-out 0.2s;
    -moz-animation:fadeIn ease-in-out 0.2s;
    animation:fadeIn ease-in-out 0.2s;
}
.button-mask-right{
    background-color:rgba(0,255,0,0.5);
    height:100%;
    width:100%;

    -webkit-animation:fadeIn ease-in-out 0.2s;
    -moz-animation:fadeIn ease-in-out 0.2s;
    animation:fadeIn ease-in-out 0.2s;
}

@keyframes fadeIn{
    from {opacity:0;}
    to {opacity:1;}
}
@-moz-keyframes fadeIn{
    from {opacity:0;}
    to {opacity:1;}
}
@-webkit-keyframes fadeIn{
    from {opacity:0;}
    to {opacity:1;}
}