body{
    background-color: #FFFFFF;
    margin: 0%;
}

h1{
    color: var(#000000);
}

.big{
    padding-top: min(2vmin,2vh);

    margin: 0;

    color: #000000;
    text-align: center;
    font-size: 5vmin;
    font-family: var(--font-default);
}

.medbig{
    padding-top: min(4vmin,4vh);

    margin: 0;

    color: #101010;
    text-align: center;
    font-size: 5vmin;
    font-family: var(--font-default);
}

.med{
    padding-top: min(2vmin,2vh);

    margin: 0;

    color: #202020;
    text-align: center;
    font-size: 4vmin;
    font-family: var(--font-default);
}

.medlow{
    padding-top: min(2vmin,2vh);

    margin: 0;

    color: #000000;
    text-align: center;
    font-size: 3.5vmin;
}

.low{
    padding-top: min(4vmin,4vh);

    margin: 0;

    color: #000000;
    text-align: center;
    font-size: 3vmin;
    font-family: var(--font-default);
}

span.low{
    font-weight:bold;
}

.smallspandisplay{
    padding-top: 0;
}

.yearspan{
    color: #202020;
}

.titlegrid {
    height: min(15vh,15vmin);
    display: grid;

    grid-template-columns: 13.5vw 3fr 13.5vw;
    grid-template-rows: repeat(1,1fr);
}

.calendarmonthgrid {
    display: grid;

    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: repeat(1,1fr);

    height: min(10vh,10vmin);
    background-color: #FFFFFF;

    border-style: solid solid none solid;
    border-width: 0.1vmin;
    border-radius: 2vmin 2vmin 0 0;
    border-color: #000000;

    overflow-y: show;

    padding: 1vmin 2vmin 1vmin 2vmin;

    margin-left: var(--grid-edge);
    margin-right: var(--grid-edge);

    flex-wrap: wrap;
}

.calendarmonthgrid-element{
    cursor: pointer;

    display: flex;
    justify-content: center;
    align-items: center;

    background-color: #FFFFFF;

    text-align: center;
    float:left;

    color: transparent;

    margin: 1vmin;
    border-radius: 2vmin;

    font-size: 3vmin;
    font-family: var(--font-default);

    border-color:transparent;
    border-style:solid;
    border-width:1vmin;

    border-radius:2vmin;
}

.calendarmonthgrid-monthdisplay{
    display: grid;

    grid-template-columns: 1fr, 1fr;
    grid-template-rows: 1fr;

    justify-content: center;
    align-items: center;

    background-color: #FFFFFF;

    text-align: center;
    float:left;

    color: #000000;

    margin: 1vmin;
    border-radius: 2vmin;

    font-size: 3vmin;
    font-family: var(--font-default);
}

.calendardaygrid {
    display: grid;

    grid-template-columns: repeat(7,1fr);
    grid-template-rows: repeat(1,1fr);

    height: min(5vh,5vmin);
    background-color: #FFFFFF;

    border-style:solid;
    border-width: 0.1vmin;
    border-radius: 2vmin 2vmin 0 0;
    border-color: #000000;

    overflow-y: show;

    padding: 1vmin 2vmin 1vmin 2vmin;

    margin-left: var(--grid-edge);
    margin-right: var(--grid-edge);

    border-radius: 0 0 0 0;

    flex-wrap: wrap;
}

.calendardaygrid-element{
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: #FFFFFF;

    text-align: center;
    float:left;

    border-style:solid;
    border-width: 0.1vmin;
    border-radius: 2vmin 2vmin 0 0;
    border-color: #000000;

    color: #000000;

    margin: 1vmin;
    border-radius: 2vmin;

    font-size: 3vmin;
    font-family: var(--font-default);
}

.calendargrid {
    display: grid;

    grid-template-columns: repeat(7,1fr);
    grid-template-rows: repeat(6,1fr);

    height: min(60vh,60vmin);
    background-color: #FFFFFF;

    overflow-y: show;

    padding: 2vmin 2vmin 2vmin 2vmin;

    margin-left: var(--grid-edge);
    margin-right: var(--grid-edge);

    border-radius: 0 0 2vmin 2vmin;

    border-style: none solid solid solid;
    border-width: 0.1vmin;
    border-color: #000000;

    flex-wrap: wrap;
}

.calendargrid-element, .calendargrid-element-today{

    display: flex;
    justify-content: left;
    align-items: left;

    background-color: #FFFFFF;

    transform: scale(1);

    text-align: left;
    float:left;

    color: #A0A0A0;

    margin: 1vmin;
    border-radius: 2vmin 2vmin 2vmin 2vmin;
    cursor: pointer;

    padding: 1vmin;

    border-width: 0.5vmin;
    border-color: #808080;
    border-style: solid;

    font-size: 2vmin;
    font-family: var(--font-default);
}

.calendargrid-inactive-element{

    display: flex;
    justify-content: center;
    align-items: center;

    background-color: #FFFFFF;

    text-align: center;
    float:left;

    color: #A0A0A0;

    margin: 1vmin;
    border-radius: 2vmin;

    padding: 1vmin;

    font-size: 2vmin;
    font-family: var(--font-default);

    border-width: 0.4vmin;
    border-color: #A0A0A0;
    border-style: solid;
}

.hiddenbuttonwrapper{
    background-color: transparent;

    border-color:transparent;
    border-style:hidden;
    border-width:0;

    border-radius:0;
}

.hamburgermenubutton{
    opacity: 0;
}