body {
    background:
            linear-gradient(
                    rgba(0, 0, 0, 0.7),
                    rgba(0, 0, 0, 0.7)
            ),
            url("../pictures/background.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: MinecraftFont;
}


@font-face {
    font-family: MinecraftFont;
    src: url(../MinecraftTen-VGORe.ttf);
}

#searchfield{
    margin-top: 5%;
}

#searchhead {
    color: white;
}

#searcharea {
    margin-top: 1%;
    z-index: 1;
    position: absolute;
    resize: none;
    width: 15%;
    font-size: 130%;
    font-family: MinecraftFont;
    background-color: transparent;
    border-color: transparent;
    width: 187px;
    height: 90px;
    overflow: hidden;
}
#sign {
    margin-top: 1%;
    z-index: 0;
}

.facename {
    color: white;
    margin-top: 8%;
    margin-left: 8%;
    float: left;
    font-size: 100%;
}

.faceimg {
    margin-top: 3%;
    margin-left: 3%;
    width: 15%;
    float: left;
}

.result {
    width: 18%;
    height: 80px;
    background-color: rgb(69, 68, 68);
    border-radius: 5px;
    border-style: solid;
    border-color: black;
}

#headfield {
    margin-top: 5%;
}

.imgField {
    margin-top: 3%;
    margin-left: 3%;
    width: 45%;
    float: left;
    padding: 5px;
}

.imgField_true {
    margin-top: 3%;
    margin-left: 3%;
    width: 45%;
    float: left;
    padding: 5px;
    background-color: green;
}
.imgField_false {
    margin-top: 3%;
    margin-left: 3%;
    width: 45%;
    float: left;
    padding: 5px;
    background-color: rgb(131, 6, 6);
}

.singlefield {
    width: 60%;
    height: 100px;
    display: grid;
    grid-template-columns: repeat(7, 2fr);
    border-radius: 5px;
    background:
            rgba(0, 0, 0, 0.2) url("../pictures/stone.webp");
    background-blend-mode: overlay;
    background-repeat: repeat;
    background-size: auto;
    background-position: 0 0;
    border-style: solid;
    border-color: black;
}

.true {
    padding: 15px;
    margin-top: 15%;
    font-size: 150%;
    color: white;
    background-color: green;
}

.false {
    padding: 15px;
    margin-top: 15%;
    font-size: 150%;
    color: white;
    background-color: rgb(131, 6, 6);
}

.Head {
    padding: 15px;
    margin-top: 15%;
    font-size: 150%;
    color: white;
}

#Title {
    font-size: 500%;
    color: white;
}

#infotext {
    color: white;
    font-size: 150%;
}

@media screen and (min-width: 1921px) {
    .imgField {
        margin-left: 5%;
        width: 35%;
    }
    .imgField_true {
        margin-left: 5%;
        width: 35%;
    }
    .imgField_false {
        margin-left: 5%;
        width: 35%;
    }
    .faceimg {
        width: 10%;
        font-size: 100%;
    }
}

@media screen and (max-width: 1600px) {
    .imgField {
        margin-left: 5%;
        width: 55%;
    }
    .imgField_true {
        margin-left: 5%;
        width: 55%;
    }
    .imgField_false {
        margin-left: 5%;
        width: 55%;
    }
    .Head {
        font-size: 125%;
    }
}
@media screen and (max-width: 1350px) {
    .imgField {
        margin-left: 5%;
        width: 7ch;
    }
    .imgField_true {
        margin-left: 5%;
        width: 7ch;
    }
    .imgField_false {
        margin-left: 5%;
        width: 7ch;
    }
    .Head {
        font-size: 100%;
    }
}

.Headlower {
    padding: 15px;
    margin-top: 4%;
    font-size: 120%;
    color: white;
}

#footfield {
    margin-top: 5%;
}

.singlefield_lower {
    font-size: 0.8vw;
    width: 60%;
    display: grid;
    grid-template-columns: repeat(7, 2fr);
    border-radius: 5px;
    background:
            rgba(0, 0, 0, 0.2) url("../pictures/stone.webp");
    background-blend-mode: overlay;
    background-repeat: repeat;
    background-size: auto;
    background-position: 0 0;
    background-position: 0 0;
    border-style: solid;
    border-color: black;
}


#moblist {
    margin-top: 10%;
    display: grid;
    grid-template-columns: 1fr;
    position: absolute;
    overflow-x: hidden;
    overflow-y: scroll;
    border: 5px solid black;
    border-radius: 5px;

    width: 265px;
    height: 700px;
    color-scheme: dark;
}

#moblist {
    scrollbar-width: thin;
}

#moblist::-webkit-scrollbar {
    width: 8px;
}

#moblist::-webkit-scrollbar-thumb {
    background-color: black;
    border-radius: 5px;
}

#moblist::-webkit-scrollbar-track {
    background-color: darkgray;
}

.singlemob {
    display: flex;
    align-items: center;
    height: 125px;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    padding-left: 5px;
    background:
            rgba(0, 0, 0, 0.2) url("../pictures/stone.webp");
    background-blend-mode: overlay;
    background-repeat: repeat;
    background-size: auto;
    background-position: 0 0;
}

.mobimg {
    width: 40%;
    margin-right: 10px; /* Adds a gap between the image and the text */
}

.mobtext {
    font-size: 115%;
    flex-grow: 1; /* Ensures text takes the remaining space next to the image */
}