@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400;500;600&display=swap');

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;

    background-color: #e8e4ef;
    background-image:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.25) 1px,
            transparent 1px
        ),
        linear-gradient(
            rgba(255,255,255,0.25) 1px,
            transparent 1px
        );

    background-size: 4px 4px;

    color: #3f368c;

    font-family: "Pixelify Sans", monospace;

    font-size: 20px;

    image-rendering: pixelated;
}


/* ЗАГОЛОВКИ */

h1,
h2,
h3 {
    color: #423795;

    font-family: "Pixelify Sans", monospace;

    font-weight: 500;

    letter-spacing: 1px;

    text-shadow:
        2px 2px 0 #c6bfe0;
}


/* ГЛАВНЫЙ ЗАГОЛОВОК */

h1 {
    font-size: 48px;

    margin-bottom: 10px;
}


/* ТЕКСТ */

p {
    line-height: 1.4;
}


/* ССЫЛКИ */

a {
    color: #5544ad;

    text-decoration: underline;

    text-decoration-thickness: 2px;
}

a:hover {
    color: #8b74bd;
}


/* КНОПКИ */

button {
    font-family: "Pixelify Sans", monospace;

    font-size: 18px;

    color: #40378c;

    background: #d8cde3;

    border: 3px solid #484099;

    border-radius: 0;

    padding: 8px 14px;

    cursor: pointer;

    box-shadow:
        inset 2px 2px 0 #ffffff,
        inset -2px -2px 0 #9e93bd;
}

button:active {
    box-shadow:
        inset 2px 2px 0 #9e93bd;
}


/* ВЫДЕЛЕНИЕ ТЕКСТА */

::selection {
    background: #8b79bd;
    color: white;
}


/* ПИКСЕЛЬНАЯ РАМКА */

.pixel-box {
    background: #e9e5ee;

    border: 3px solid #484099;

    border-radius: 0;

    padding: 20px;

    box-shadow:
        -4px 4px 0 #8bd9d5,
        4px 4px 0 #6155aa;
}