* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
}

html {
    scroll-behavior: smooth;
}

body {

    background: #315FC2;

    overflow-x: hidden;
    overflow-y: auto;

    font-family: "Inter", sans-serif;

}


/* ---------------------------- */
/* HERO */
/* ---------------------------- */

.hero {

    position: relative;

    width: 100vw;

    /*
        Первый холст теперь длиннее обычного экрана.
        Контент остаётся наверху,
        а снизу появляется большое пустое пространство.
    */

    min-height: 140vh;

}


/* ---------------------------- */
/* ABOUT */
/* ---------------------------- */

.about {

    position: absolute;

    top: 4.5vh;
    right: 4vw;

}

.about p {

    font-family: "IBM Plex Mono", monospace;

    font-size: clamp(18px, 1.7vw, 34px);

    line-height: 1.25;

    color: #9EA8CA;

}


/* ---------------------------- */
/* TITLE */
/* ---------------------------- */

.title {

    position: absolute;

    left: 3vw;
    top: 8vh;

}

.im {

    font-family: "IBM Plex Mono", monospace;

    font-size: clamp(60px, 8vw, 150px);

    color: white;

    letter-spacing: -0.05em;

    line-height: 0.85;

}

h1 {

    font-family: "IBM Plex Mono", monospace;

    font-weight: 400;

    font-size: clamp(120px, 15vw, 330px);

    letter-spacing: -0.06em;

    line-height: 0.82;

    color: white;

    white-space: nowrap;

    transform: translateY(2vh);

}

h2 {

    margin-top: 8vh;

    font-family: "Inter", sans-serif;

    font-weight: 300;

    font-size: clamp(24px, 2.5vw, 58px);

    color: #D0D0D0;

    letter-spacing: -0.02em;

}


/* ---------------------------- */
/* SOCIAL BUTTON */
/* ---------------------------- */

.socialButton {

    position: absolute;

    left: 3vw;
    bottom: 12vh;

    text-decoration: none;

    font-family: "Inter", sans-serif;

    font-size: clamp(26px, 2.4vw, 55px);

    color: #1B91FF;

    transition: .2s ease;

}

.socialButton span {

    color: #57AEFF;

}

.socialButton:hover {

    color: white;

    transform: translateX(10px);

}

.socialButton:hover span {

    color: white;

}


/* ---------------------------- */
/* MMLMN.SYS */
/* ---------------------------- */

.bot-section {

    position: relative;

    width: 100vw;

    min-height: 100vh;

    padding: 15vh 5vw;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 7vw;

}


/* ---------------------------- */
/* BOT CONTENT */
/* ---------------------------- */

.bot-content {

    display: flex;

    align-items: center;

    gap: 2vw;

}


/* ---------------------------- */
/* BOT AVATAR */
/* ---------------------------- */

.bot-avatar {

    width: clamp(100px, 10vw, 170px);

    height: clamp(100px, 10vw, 170px);

    flex-shrink: 0;

}

.bot-avatar img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

}


/* ---------------------------- */
/* BOT WINDOW */
/* ---------------------------- */

.bot-window {

    width: min(620px, 55vw);

    min-height: 500px;

    border: 1px solid #9EA8CA;

    display: flex;

    flex-direction: column;

    background: #315FC2;

}


/* ---------------------------- */
/* BOT HEADER */
/* ---------------------------- */

.bot-header {

    padding: 18px 22px;

    border-bottom: 1px solid #9EA8CA;

    font-family: "IBM Plex Mono", monospace;

    font-size: 16px;

    color: white;

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.bot-status {

    font-size: 11px;

    color: #9EA8CA;

    letter-spacing: .05em;

}


/* ---------------------------- */
/* BOT MESSAGES */
/* ---------------------------- */

.bot-messages {

    flex: 1;

    padding: 35px;

    font-family: "Inter", sans-serif;

    font-size: 18px;

    color: white;

}

.bot-message {

    margin-bottom: 15px;

}


/* ---------------------------- */
/* BOT INPUT */
/* ---------------------------- */

.bot-input {

    border-top: 1px solid #9EA8CA;

    padding: 18px 22px;

    font-family: "IBM Plex Mono", monospace;

    font-size: 14px;

    color: #9EA8CA;

}


/* ---------------------------- */
/* BOT INFO */
/* ---------------------------- */

.bot-info {

    max-width: 350px;

    align-self: center;

}


.bot-info-title {

    font-family: "IBM Plex Mono", monospace;

    font-size: clamp(35px, 4vw, 70px);

    color: white;

    letter-spacing: -0.06em;

    line-height: .9;

    margin-bottom: 35px;

}


.bot-info-text {

    font-family: "Inter", sans-serif;

    font-weight: 300;

    font-size: clamp(20px, 1.7vw, 32px);

    line-height: 1.25;

    color: #D0D0D0;

}


.bot-username {

    display: inline-block;

    margin-top: 35px;

    font-family: "IBM Plex Mono", monospace;

    font-size: clamp(22px, 2vw, 38px);

    color: #1B91FF;

    text-decoration: none;

    transition: .2s ease;

}


.bot-username:hover {

    color: white;

    transform: translateX(10px);

}

/* ---------------------------- */
/* VISITOR COUNTER */
/* ---------------------------- */

.visitor-counter {

    position: fixed;

    right: 2.5vw;
    bottom: 3vh;

    display: flex;

    align-items: center;

    gap: 1.2rem;

    z-index: 1000;

    opacity: .75;

    transition: .25s;

}

.visitor-counter:hover {

    opacity: 1;

}

.eye-icon {

    width: 90px;

    height: auto;

    flex-shrink: 0;

}

#visitorCount {

    font-family: "Inter", sans-serif;

    font-size: 42px;

    font-weight: 300;

    color: #9EA8CA;

    letter-spacing: -0.03em;

    user-select: none;

}


/* ---------------------------- */
/* MOBILE */
/* ---------------------------- */

@media (max-width: 900px) {


    /* HERO */

    .hero {

        min-height: 125vh;

        padding: 0;

    }


    /* ABOUT */

    .about {

        left: 6vw;

        right: auto;

        top: 6vw;

    }

    .about p {

        font-size: 4vw;

    }


    /* TITLE */

    .title {

        left: 6vw;

        top: 18vh;

    }

    .im {

        font-size: 14vw;

    }

    h1 {

        font-size: 22vw;

        white-space: normal;

        line-height: .9;

        transform: translateY(0);

    }

    h2 {

        font-size: 5vw;

        margin-top: 8vw;

    }


    /* SOCIAL BUTTON */

    .socialButton {

        left: 6vw;

        bottom: 7vw;

        font-size: 6vw;

    }


    /* BOT SECTION */

    .bot-section {

    min-height: 100vh;

    padding: 15vh 6vw 20vh;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    gap: 60px;

}


.bot-content {

    width: 100%;

    flex-direction: column;

    align-items: flex-start;

    gap: 25px;

}


.bot-avatar {

    width: 100px;

    height: 100px;

}


.bot-window {

    width: 100%;

    min-height: 450px;

}


.bot-info {

    max-width: 100%;

}


.bot-info-title {

    font-size: 12vw;

}


.bot-info-text {

    font-size: 5vw;

}


.bot-username {

    font-size: 6vw;

}

    /* COUNTER */

    .visitor-counter {

        right: 4vw;

        bottom: 3vw;

        gap: .7rem;

    }

    .eye-icon {

        width: 55px;

    }

    #visitorCount {

        font-size: 25px;

    }

}


/* ---------------------------- */
/* SOCIAL PAGE */
/* ---------------------------- */

.social-page {

    width: 100vw;

    min-height: 100vh;

    background: #315FC2;

    padding-left: 6vw;

    padding-top: 5vh;

}


.social-title {

    font-family: "IBM Plex Mono", monospace;

    font-size: clamp(70px, 10vw, 180px);

    color: white;

    letter-spacing: -0.08em;

    line-height: 0.8;

    white-space: nowrap;

}


.social-links {

    margin-top: 6vh;

    display: flex;

    flex-direction: column;

    gap: 1.8vh;

}


.social-links a {

    font-family: "IBM Plex Mono", monospace;

    font-size: clamp(28px, 3vw, 65px);

    color: white;

    text-decoration: none;

    letter-spacing: -0.05em;

    display: block;

    transition: transform .25s ease, opacity .25s ease;

}


.social-links a:hover {

    transform: translateX(20px);

    opacity: .7;

}