/* общий сброс */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'UltimatePixel', sans-serif;
}

@font-face {
    font-family: 'UltimatePixel';
    src: url('fonts/UltimatePixelFont.ttf') format('truetype');
}

@font-face {
    font-family: 'Kubasta';
    src: url('fonts/Kubasta.ttf') format('truetype');
}

@font-face {
    font-family: 'OrangeKid';
    src: url('fonts/OrangeKid.otf') format('truetype');
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #e2e2e2;
    background-image:
        linear-gradient(180deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* картинки пиксельные */
img {
    image-rendering: pixelated;
    max-width: 100%;
    height: auto;
}

.roll {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    gap: 20px;
    margin-top: 30vh;
}

.about {
    display: flex;
    justify-content: space-evenly; /* центруем всё вместе */
    align-items: center;
    border: 10px solid #000;
    background-color: whitesmoke;
    padding: 10px;
    width: 90%;
    max-width: 600px;
    box-sizing: border-box;
    box-shadow: 8px 8px 0 0 #00000088;
}


.about .text_data {
    flex: 0 1 auto; /* не растягивать на весь блок */
    display: flex;
    gap: 1rem;
    flex-direction: column;
}

.about img {
    width: 40%; /* масштабируемо */
    min-width: 50px; /* чтобы не сжималось слишком сильно */
}

.about .text_data p {
    font-size: clamp(0.8rem, 3vw, 2rem); /* масштабируемый шрифт */
    color: gray;
}

.about .text_data_small p {
    font-size: clamp(0.8rem, 3vw, 1rem); /* масштабируемый шрифт */
    color: gray;
    line-height: 2.5vh;
}

.about .text_data h2 {
    font-size: clamp(1rem, 4vw, 3rem);
}

.about .text_data_small h2 {
    font-size: clamp(1rem, 4vw, 3rem);
}

ul {
    list-style-position: inside;
    list-style-type: square;
    padding-left: 0;
}

li {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
}

a {
    color: slateblue;
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: darkslateblue;
}

@media (max-width: 410px) {
  .about {
    border: 5px solid #000;
  }
}