:root {
    --color_block: rgb(243, 211, 160);
    --color_font_border: black;
    --color_fon: rgb(134, 166, 255);
    --color_link: black;
}

[data-theme="dark"] {
    --color_block: rgb(13, 21, 56);
    --color_font_border: #ffffff;
    --color_fon: rgb(0, 0, 0);
    --color_link: #ffffff;
}

span {
    color: var(--color_font_border);
}

#time_server {
    position: absolute;
    left: 80%;
    white-space: pre-line;
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--color_fon);
    color: var(--color_font_border);
    /*background-color: blue;*/
    /*background: url(../images/fon1.jpg);*/
    /*background-color: aqua;*/
}

div a {
    color: var(--color_link);
}

@media screen and (min-width: 960px)  {
    div {
        width: 20%;
        height: 10%;
        /*background-color: rgb(248, 207, 146);*/
        border-radius: 40px 0px 40px 0px;
        font-size: 20px;
        text-align: center;
        background-color: var(--color_block);
        border: 3px solid var(--color_font_border);
        /*rgb(248, 207, 146);*/
        /*rgb(243, 205, 36);*/
        /*border: 5px solid black;*/
        color: var(--color_font_border);
    }

    .stand {
        width: 30%;
        height: 15%;
        position: absolute;
        left: 32%;
        top: 5%;
    }
    
    .theory {
        position: absolute;
        top: 30%;
        left: 12%;
    }
    
    .carts {
        position: absolute;
        top: 50%;
        left: 37%;
    }
    
    .tests {
        position: absolute;
        top: 70%;
        left: 62%;
    }
    
    .link-1 {
        position: absolute;
        bottom: 80%;
        left: 37%;
    }
    
    .link-2 {
        position: absolute;
        bottom: 60%;
        left: 37%;
    }
    
    .link-3 {
        position: absolute;
        bottom: 40%;
        left: 37%;
    }
    
    .version {
        width: 40%;
        position: absolute;
        bottom: 1%;
        left: 27%;
        border: 0px;
        border-radius: 0%;
        background-color: var(--color_fon);
    }
}
@media screen and (max-width: 960px)  {
    div {
        width: 60%;
        height: 10%;
        /*background-color: rgb(248, 207, 146);*/
        border-radius: 40px 0px 40px 0px;
        font-size: 15px;
        text-align: center;
        background-color: var(--color_block);
        border: 3px solid var(--color_font_border);
        /*rgb(248, 207, 146);*/
        /*rgb(243, 205, 36);*/
        /*border: 5px solid black;*/
        color: var(--color_font_border);
    }

    .stand {
        width: 80%;
        height: 15%;
        position: absolute;
        left: 10%;
        top: 5%;
    }
    
    .theory {
        position: absolute;
        top: 30%;
        left: 20%;
    }
    
    .carts {
        position: absolute;
        top: 50%;
        left: 20%;
    }
    
    .tests {
        position: absolute;
        top: 70%;
        left: 20%;
    }
    
    .link-1 {
        position: absolute;
        bottom: 80%;
        left: 10%;
        width: 80%;
    }
    
    .link-2 {
        position: absolute;
        bottom: 60%;
        left: 10%;
        width: 80%;
    }
    
    .link-3 {
        position: absolute;
        bottom: 40%;
        left: 10%;
        width: 80%;
    }
    
    .version {
        width: 100%;
        position: absolute;
        bottom: 1%;
        left: 0%;
        border: 0px;
        border-radius: 0%;
        background-color: var(--color_fon);
    }
}