body {
    color: #000;
    line-height: 1.6; /* Уменьшено для лучшей читаемости */
    letter-spacing: .2em;
    font-family: sans-serif;
    background: #fbfbfb;
}

.logo {
    text-align: center;
    margin: 0 0 0 10px;
}

.logo img {
    width: 30%; /* Увеличено для лучшей видимости */
}

#main {
    position: relative;
    max-width: 100%;
    padding: 1em 2em 3em; /* Добавлены отступы для лучшего размещения контента */
    background: #fbfbfb;
    border-radius: 4px;
    cursor: default;
    text-align: center;
}

#main .avatar img {
    width: 40%; /* Увеличено для лучшей видимости */
    display: block;
    margin: 0 auto;
    border-radius: 100%;
    box-shadow: 1px 6px 0px #4bf6f1, -2px -6px 0px #ff0753;
}

button {
    box-shadow: 2px 5px 0px #00F2EA, -1px -4px 0px #FF0250;
    line-height: 2.75em;
    margin-top: 10px; /* Увеличено для удобства клика */
    padding: 0 2em; /* Увеличены внутренние отступы */
    font-weight: 700;
    font-size: 20px; /* Увеличен размер шрифта для кнопок */
    background-color: transparent;
    border-radius: 30px;
    border: solid 3px #fff;
    color: #000 !important;
    cursor: pointer;
    text-align: center;
    border: none;
}

h1 {
    letter-spacing: .22em;
    color: #000;
    line-height: 1.4; /* Уменьшено для лучшего восприятия */
    font-size: 20pt; /* Уменьшен размер шрифта для заголовков */
    margin: 20px 0 0;
}

p {
    font-size: 18px; /* Увеличен размер шрифта для текста */
}

@media screen and (min-width: 300px) {
    .logo img {
        width: 50%; /* Увеличено для лучшего отображения */
        margin: 15px 0;
    }

    #main .avatar img {
        width: 40%; /* Увеличено для лучшего отображения */
    }

    button {
        font-size: 18px; /* Увеличен размер шрифта для кнопок */
    }
}

@media screen and (min-width: 400px) and (min-height: 800px) {
    #main .avatar img {
        width: 50%; /* Увеличено для лучшего отображения */
    }
}

@media screen and (min-height: 800px) {
    .logo img {
        width: 50%; /* Увеличено для лучшего отображения */
    }

    #main .avatar img {
        width: 60%; /* Увеличено для лучшего отображения */
    }

    h1 {
        font-size: 28pt; /* Увеличен размер шрифта для заголовков */
    }

    p {
        font-size: 22px; /* Увеличен размер шрифта для текста */
    }

    button {
        font-size: 28px; /* Увеличен размер шрифта для кнопок */
    }
}

@media screen and (min-width: 700px) {
    .logo img {
        width: 50%; /* Увеличено для лучшего отображения */
    }

    #main .avatar img {
        width: 60%; /* Увеличено для лучшего отображения */
    }

    h1 {
        font-size: 28pt; /* Увеличен размер шрифта для заголовков */
    }

    p {
        font-size: 22px; /* Увеличен размер шрифта для текста */
    }

    button {
        font-size: 28px; /* Увеличен размер шрифта для кнопок */
    }
}

@media screen and (min-width: 1000px) {
    h1 {
        font-size: 28pt; /* Увеличен размер шрифта для заголовков */
    }

    p {
        font-size: 22px; /* Увеличен размер шрифта для текста */
    }

    button {
        font-size: 28px; /* Увеличен размер шрифта для кнопок */
    }
}

@media screen and (min-width: 1200px) {
    #main .avatar img {
        width: 150px; /* Размер изображения аватара сохранен для больших экранов */
    }

    h1 {
        font-size: 20pt; /* Размер шрифта для заголовков */
    }

    p {
        font-size: 18pt; /* Размер шрифта для текста */
        margin: 0;
    }

    button {
        font-size: 20pt; /* Размер шрифта для кнопок */
    }

    .logo img {
        width: 20%; /* Размер логотипа сохранен для больших экранов */
    }
}