@font-face {
    font-family: "UnifrankturMaguntia"; /* set name */
    src: url("/font/UnifrakturMaguntia-Regular.woff"); /* url of the font */
}
@font-face {
    font-family: "playwriteGBJ"; /* set name */
    src: url("/font/PlaywriteGBJ-VariableFont_wght.woff"); /* url of the font */
}


h1 {text-align: center;}
p {text-align: center;}
div {text-align: center;}
body {transition: background-color 0.7s ease, color 0.7s ease;
    margin: 0; 
    background-color: #F2F2F2; 
    color: #1E1E1E;}
.box {width: 100%; height: 100px; 
    position: relative; 
    display: flex; 
    justify-content: center; align-items: center;
    white-space: normal; margin-top: -5px; margin-bottom: -5px;}
/* buttons section*/
input {display: none;}
.images img{display: none; cursor: pointer;}
#img1:checked ~ .images .i1,
#img2:checked ~ .images .i2,
#img3:checked ~ .images .i3,
#img4:checked ~ .images .i4,
#img5:checked ~ .images .i5,
#img6:checked ~ .images .i6 {display: block;}

a{color: #0D4EB7;}

@media (prefers-color-scheme: dark) {
    body{
        transition: background-color 0.7s ease, color 0.7s ease;
        margin: 0;
        background-color: #1E1E1E;
        color: #F2F2F2;
    }

    .box {width: 100%; height: 100px; 
    position: relative; 
    display: flex; 
    justify-content: center; align-items: center;
    white-space: normal; margin-top: -5px; margin-bottom: -5px;}
    a{color: #2f7bf6;}
}