:root{

    --backgroundcolor: rgb(230, 238, 123);
    --panelcolor: rgb(255, 255, 255);
    --panelcolor2: rgba(85, 156, 236, 0.7);
    --textcolor: black;
    
    --border: 1px black none;
    --boxshadow: 2px 2px 5px -1px rgb(0, 0, 0);


}


*{margin: 0%; padding: 0%; box-sizing: border-box;}


body{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    height: 100vh;
    width: 100vw;
    background-color: var(--backgroundcolor);
    color: var(--textcolor);
    background-image: 
        linear-gradient(rgba(247, 255, 175, 0.75), rgba(255, 255, 255, 0.75)),
        url("../static/resources/kotelett.jpg");

    background-size: cover;
    background-position: center;
}

button{
    border: none;
    margin: 5px;
    height: 30px;    
    background-color: var(--panelcolor);
    padding: 5px;
}

select{
    padding: 5px;
    background-color: transparent;
    border: 1px solid black;
    box-shadow: var(--boxshadow);
    width: 200px;
}

input{
    height: 20px;
}

.scrollable{
    overflow: scroll;
}

.centered{
    text-align: center;
}
.left{
    text-align: left;
}

.flex{
    display: flex;
}


.vertflex{

    display: flex;
    flex-direction: column;
}

.bordered{
    border: var(--border);
    box-shadow: var(--boxshadow);
}

.panel {

    background-color: var(--panelcolor);
}

.even{
    flex: 1 1 0;
}

.boxed{

    width: 75%;
    max-width: 450px;
    height: 500px;
    margin: auto;
}



/* Specific */

#mainmenu{

    display: flex;
    justify-content: flex-start;

}


.dayContainer{
    margin: 5px;
    background-color: var(--panelcolor);
    box-shadow: var(--boxshadow);
}

.smalltext{
    font-size: x-small;
}

.paidDay{

    border: gold 2px solid;
    background-color: rgb(255, 228, 75);

}

.dayData{
    width: 30%;
    align-content: center;
    text-align: center;
    font-size: 1rem;
    
}

.mealDiv{
    border-radius: 15px;
    align-content: center;
    background-color: var(--panelcolor);
    text-align: center;
}

.mealInputParent{
    display: grid;
    grid-template-columns: 1fr 10fr;
    gap: 5px;
    margin: 5px;
}


.loginBox{


    background-color: var(--panelcolor);
    padding: 20px;

}



.userGrid{

    display: grid;
    grid-template-columns: 4fr 4fr 4fr 1fr;
    background-color: var(--panelcolor);
    font-size: smaller;
}


.userSettingsGrid{


    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 5px;

}

.activeButton{
    background-color: var(--panelcolor2);
}


@media (min-width: 768px) {
  body {
    width: 50%;
    margin: auto;
  }
}