@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');


*{
    padding: 0;
    margin: 0;
}
body{
    font-family: 'Bangers', cursive;
    background-color: rgb(190,205,190); 
    opacity: 0;
    transform: translateY(-10px);
    animation: fadeIn 0.5s ease forwards;
}
h2 {
    font-family: Helvetica; 
    font-weight: normal;
}

.BackBar{
    display: flex;
    background-color: rgb(100, 100, 100);
}

.BackBar a{
    text-decoration: none;
    display: block;
    padding: 1em;
    text-align: center;
    color: aliceblue;
}

.BackBar a:hover{
    background-color: rgb(156, 156, 156);
}

img{
    text-align: center;
    width: 50%;
}

.cont{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-flow: column;
    align-items: start;
}

.ads{
    grid-column: 1/4;
    padding-block: 60%;
    border-style: solid;
}

.person{
    grid-column: 4/13;
}

.ads,
.person {
    margin-inline: 1em;
    text-align: center;
    border-width: 0.5px;
}

.kotelok{
    border-style: solid;
    border-width: 0.5px;
    margin-bottom: 10%;
}
.milliarder{
    border-style: solid;
    border-width: 0.5px;
    margin-bottom: 10%;
}

.ignat{
    border-style: solid;
    border-width: 0.5px;
    margin-bottom: 10%;
}

.me{
    border-style: solid;
    border-width: 0.5px;
    margin-bottom: 10%;
}

@media(max-width: 1500px){
    .ads,
    .person {
    margin-inline: 0.5em;
    }
}


/* Анимация появления */
@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}