@font-face {
    font-family: "cozette";
    src: url(../fonts/cozette.woff2);
}

@font-face {
    font-family: "vt323";
    src: url(../fonts/vt323.ttf);
}

@font-face {
    font-family: "dseg14-regular";
    src: url(../fonts/dseg14_modern_regular.woff2);
}


body {
    font-family: "vt323";
}

header {
    margin-top: 1em;
}

img { 
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}

footer {
    margin: 1em 0;
    text-align: center;
}

section p {
    text-align: justify;
    /*text-wrap: pretty;*/
}

h1 {
    padding: .5em .3em;
    font-family: "cozette";
}

h2 {
    padding: .1em .3em;
    font-family: "cozette";
}

h3 {
    padding: .1em .3em;
    font-family: "cozette";
}

a {
    font-family: "cozette";
    text-decoration: underline;
    cursor: pointer;
}

button {
    background: none;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    text-align: center;
}

.icon {
    width: 1em;
    height: 1em;
    line-height: 1;
    vertical-align: bottom;
}


.button:hover {
    cursor: pointer;
}

h2 .icon, h3 .icon {
    vertical-align: middle;
}

.clock {
    text-align: center;
}

#theme-toggle-label {
    display: inline-block;
    cursor: pointer;
    padding: .5em;
    margin: 1.5em;
}

#theme-icon {
    width: 24px;
    height: 24px;
    transition: transform 0.2s ease-in-out;
}

#theme-toggle:checked + #theme-icon {
    transform: rotate(360deg);
}

.button img {
    width: 100%;
    height: 100%;
}