/*    https://transfonter.org/    */
@font-face {
    font-family: snowdrift;
    src: url('./snowdrift.woff') format('woff');
}

::-webkit-scrollbar {
    display: none;
}

h1, p, hatch, div{
    width: 100%;
    color: snow;
    text-align: center;
    font-family: snowdrift, Georgia, 'Times New Roman', Times, serif;
}

html, body{
    margin: 0;
    width: 100%;
    height: 100%;
    font-size: 5vw;
    overflow-x: hidden;
}

h1{
    font-size: 2rem;
    margin-block-start: 0.2em;
    margin-block-end: 0.2em;
}

p{
    font-size: 1rem;
}

canvas{
    z-index: -1;
}

calendar_conteiner{
    width: 100%;
    height: 100%;
    font-size: 100vw;
}

@media (min-aspect-ratio: 7/6){
    calendar{
        font-size: 96%;
        margin-left: 2vw;
        display: grid;
        grid-template-columns: 0.125em 0.125em 0.125em 0.125em 0.125em 0.125em 0.125em 0.125em;
        grid-auto-rows: 0.125em;
        align-items: center;
    }
    hatch{
        font-size: 6%;
        border-width: 1vw;
    }
}
@media (max-aspect-ratio: 7/6){
    calendar{
        font-size: 96%;
        margin-left: 2vw;
        display: grid;
        grid-template-columns: 0.1667em 0.1667em 0.1667em 0.1667em 0.1667em 0.1667em;
        grid-auto-rows: 0.1667em;
        align-items: center;
    }
    hatch{
        font-size: 8%;
        border-width: 1.3333vw;
    }
}
@media (max-aspect-ratio: 3/5){
    calendar{
        font-size: 96%;
        margin-left: 2vw;
        display: grid;
        grid-template-columns: 0.25em 0.25em 0.25em 0.25em;
        grid-auto-rows: 0.25em;
        align-items: center;
    }
    hatch{
        font-size: 12%;
        border-width: 2vw;
    }
}

/*hatch in calendar*/
hatch{
    margin: 4%;

    border-style: solid;
    border-radius: 30%;
    
    box-sizing: border-box;

    text-align: center;

    height: 92%;
    width: 92%;

    border-color: rgb(158, 158, 158);
    background-color: #919191;
}

hatch:not([disabled]):hover{
    transform: scale(1.08, 1.08);
    transition-duration: 20ms;
}
hatch:not([disabled]):active{
    transform: scale(1.05, 1.05);
    transition-duration: 20ms;
}

hatch:not([disabled]){
    border-color: rgb(175, 93, 0);
    background-color: #BB2528;
}

#sky{
    background: none repeat scroll 0 0 #34283F;
}

#screenframe {
    background: none repeat scroll 0 0 #13071f;
}

.settingscontainer {
    font-family: Consolas, 'Courier New', monospace;
    font-size: 18px;
    text-align: left;
}

.settingscontainer > .setting {
    font-family: Consolas, 'Courier New', monospace;
    font-size: 18px;
    text-align: left;
}

.setting > .settinglabel {
    font-family: Consolas, 'Courier New', monospace;
    font-size: 18px;
    text-align: left;
    width: 20em;
}