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

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

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

html{
    font-size: 30px;
    --margin-elements: 32px;
    cursor: default;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("../images/bg_texture172.png");
    background-repeat: repeat;
}

body{
    font-family: "Monocraft";
    display: flex;
}

.main-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
}

.welcome-container{
    align-items: center;
    display: flex;
    flex-direction: column;
    max-width: 500px;
    text-align: center;
}

.lang-btn{
    display: flex;
    right: 20px;
    top: 20px;
    position: absolute;
    align-items: center;
    justify-content: center;
}

.white-text{
    color: #ffffff;
    font-size: 30px;
}

.green-text{
    color: #35C82D;
    font-size: 30px;
}

.site{
    color: #BCBCBC;
    font-size: 30px;
}

.text-collector{
    font-size: 0px;
    margin-left: 60px;
    margin-right: 60px;
}

.text-collector-2{
    font-size: 0px;
}

.avatar{
    margin-top: var(--margin-elements);
    margin-bottom: var(--margin-elements);
    width: 158px;
    height: 158px;
    image-rendering: pixelated;
}

.gray-text{
    color: #E3E3E3;
    font-size: 30px;
}

.light-green-text{
    color: #91ED8C;
    font-size: 30px;
}

.margin-vert{
    margin-bottom: var(--margin-elements);
}

.description{
    font-size: 22px;
    color: #E3E3E3;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 0px;
    line-height: 28px;
    max-width: 550px;
}

.link-btn{
    margin-left: 18px;
    margin-right: 18px;
    width: 57px;
    height: 57px;
    image-rendering: pixelated;
    cursor: pointer;
}

.links-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: var(--margin-elements);
    margin-bottom: var(--margin-elements);
}

.github-img{
    background-image: url("../images/github_logo_pixel.png");
    background-size: cover;
}

@media (hover: hover) {
    .github-img:hover{
        background-image: url("../images/github_logo_pixel_hover.png");
    }
}

@media (hover: none) {
    .github-img:active{
        background-image: url("../images/github_logo_pixel_hover.png");
    }
}

.telegram-img{
    background-image: url("../images/telegram_logo_pixel.png");
    background-size: cover;
}

@media (hover: hover) {
    .telegram-img:hover{
        background-image: url("../images/telegram_logo_pixel_hover.png");
    }
}

@media (hover: none) {
    .telegram-img:active{
        background-image: url("../images/telegram_logo_pixel_hover.png");
    }
}

.discord-img{
    background-image: url("../images/discord_logo_pixel.png");
    background-size: cover;
}

@media (hover: hover) {
    .discord-img:hover{
        background-image: url("../images/discord_logo_pixel_hover.png");
    }
}

@media (hover: none) {
    .discord-img:active{
        background-image: url("../images/discord_logo_pixel_hover.png");
    }
}

.kwork-img{
    background-image: url("../images/kwork_logo_pixel.png");
    background-size: cover;
}

@media (hover: hover) {
    .kwork-img:hover{
        background-image: url("../images/kwork_logo_pixel_hover.png");
    }
}

@media (hover: none) {
    .kwork-img:active{
        background-image: url("../images/kwork_logo_pixel_hover.png");
    }
}

.dark-gray-text{
    color: #8C8C8C;
    font-size: 17px;
}

.lower-white-text{
    color: #E3E3E3;
    font-size: 17px;
}

.bottom-container{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.bottom-data{
    margin-left: 30px;
    margin-right: 30px;
}

.switch-img-text{
    background-image: url("../images/language_button.png");
    text-align:center;
    background-size: cover;
    image-rendering: pixelated;
    cursor: pointer;
    color: #BABABA;
    font-size: 17px;
    width: 30px;
    height: 30px;
}
@media (hover: hover) {
    .switch-img-text:hover{
        background-image: url("../images/language_button_hover.png");
        color: #D7D7D7;
    }
}

@media (hover: none) {
    .switch-img-text:active{
        background-image: url("../images/language_button_hover.png");
        color: #D7D7D7;
    }
}

.description-404{
    color: #ffffff;
    font-size: 30px;
}

.code{
    color: #35C82D;
    font-size: 150px;
}

.error-container{
    align-items: center;
    display: flex;
    flex-direction: column;
    text-align: center;
}