:root{

    --backgroundcolor : rgb(255, 255, 255);
    --panelcolor: rgb(0, 0, 0);

    --textcolor : rgb(44, 44, 44);
    --paneltextcolor: rgb(255, 255, 255);


    --margin: 5px;
    --padding: 5px;
    --boxshadow: 4px 4px 5px -2px rgba(0, 0, 0, 0.55);
    
    --border: 1px dotted rgb(85, 85, 85);
    --roundness: 5px;
    --smallroundness: 2px;


}
*{
    box-sizing: border-box;
    margin: 0%;
    padding: 0%;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    /* outline: 1px black dotted; */
}

body{

    background-color: var(--backgroundcolor);
    color: var(--textcolor);

}

input{

    color: var(--textcolor);

}

button{

    color: var(--textcolor);

}

.flex{
    display: flex;
}

.vertflex{
    display: flex;
    flex-direction: column;
}

.even{
    flex: 1 1 0;
}

.container{

    margin: var(--margin);
    padding: var(--padding);
    
    
}

.bordered{


    margin: var(--margin);
    padding: var(--padding);
    outline: var(--border);
    box-shadow: var(--boxshadow);
    background-color: transparent;
    border-radius: var(--roundness);

}

.panel{

    margin: var(--margin);
    padding: var(--padding);
    outline: var(--border);
    box-shadow: var(--boxshadow);
    border-radius: var(--roundness);
    background-color: var(--panelcolor);
    color: var(--paneltextcolor);
}

.inset{

    box-shadow: var(--boxshadow) inset;
    background-color: rgba(0, 0, 0, 0.15);


}

.centered{
    text-align: center;

}

.placeholder{
    height: 50px;

}

.divider{


    border-bottom: dashed 1px black;

}

.scrollable{

    overflow: auto;

}



/* SPECIFIC */

#window{

    height: 100dvh;
    width:  100dvw;

}

#sidepanel{

    width: 250px;

}

.questiontext{

    margin-top: 20px;
    margin-bottom: 10px;

}

.answergrid{

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: auto;
    align-items: center;
    margin-bottom: 20px;

}

.answerbutton{

    width: 400px;
    height: 100px;
    border: none;
    background-color: transparent;
    transition: background-color 0.25s ease;
    transition: border-radius 0.5s ease;
    transition: transform 0.5s ease;
}

.answerbutton:hover{
    background-color: rgb(181, 234, 255);
    transform: scale(1.05);
}

.loggedanswer{


    background-color: rgb(125, 225, 255) !important;
}



#footer{
    height: 100px;
}