@font-face {
    font-family: 'InreaBold';
    src: url('/fonts/InriaSerif-Bold.ttf') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'OpenLight';
    src: url('/fonts/OpenSans-Light.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
}


body,html, main {
    margin: 0;
    padding: 0;
    max-height: 100vh;
    max-width: 100vw;
    width: 100vw;
    height: 100vh;
    color: #c0c0c0;
    font-family: 'InreaBold';
    cursor: crosshair;
    overflow: hidden;
    min-width: 450px;
    background-color: black;
}

h1 {
    font-size: 107px;
    padding: 0;
    margin: 0;
    margin-left: -12px;
}

a {
    color: #800000;
    transition: color 0.3s ease;
    font-size: 24px;
    background-color: black;
}

a:hover {
    color: red;
}

a:visited {
    color: #800000;
}

p{
    background-color: black;
    font-family: 'GilroyMedium', sans-serif;
    color: #818181;
    width: fit-content;
}

h3 {
    font-family: "OpenLight", sans-serif;

    font-size: 17px;
    font-weight: bold;
}

.container {
    display: flex;
    flex-direction: row;
    position: absolute;
    z-index: 100000000000;
    width: 100%;
    height: 100%;
}

.welcome-container {
    width: 99%;
    min-height: 20px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 40px;
    position: relative;
    overflow: hidden;


        a {
            font-size: 60px;
            display: flex;
            flex-direction: row;
            line-height: 4px;
            width: fit-content;
            position: relative;
            text-decoration: none;
            white-space: nowrap;

            h1 {
                font-size: 24px;
                border-bottom: 30px solid transparent;
                margin-top: 22px;
                right: -128px;
                position: absolute;
                color: #818181;
                padding: 0 4px 0 8px;
            }
        }
}

.hidden {
    transform: translateX(-100%); /* Сдвиг контейнера влево */
    opacity: 0;
}




@media (max-width: 1200px) {
    body,html, main {
        max-height: 100%;
    }
    .container {
        flex-direction: column;
    }

    .welcome-container {
        width: 100%;
        padding: 28px 0;
        text-align: center;

        a {
            font-size: 36px;
            margin-top: 20px;

            h1 {
                font-size: 20px;
                margin-top: 17px;

            }
        }
    }
    .footer {
        display: none;
    }

}