* {
    box-sizing: border-box;
}

body,
html {
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
}

body {
    background: url(../assets/background-image.png) 30%;
}

.rotating-svg {
    background-blend-mode: lighten;
    position: fixed;
    transform: translate(-50%, -50%);
    top: 100%;
    left: 50%;
    opacity: 0.1;
    animation: rotateAnimation 155s linear infinite;
    z-index: 1;

    @media (max-width: 1199px) {
        width: 860px;
        height: 850px;
        top: 55%;
    }

    @media (max-width: 750px) {
        width: 100%;
        height: 100%;
        top: 50%;
    }
}

@keyframes rotateAnimation {
    0% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
}

.body {
    display: grid;
    grid-template-rows: 1fr max-content;
    min-height: 100vh;
}

.container {
    min-height: 100%;
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: minmax(min-content, 735px) minmax(min-content, 865px);
    grid-template-rows: min-content 1fr min-content;
    max-width: 1600px;
    margin: 0 auto;
    padding-block: 40px 80px;
}

@media (max-width: 1920px) {
    .container, .footer-section {
        margin: 0 150px 0 150px;
    }

    .container {
        padding-block: 0 40px;
    }
}

@media (max-width: 1515px) {
    .container, .footer-section {
        max-width: 1195px;
    }
}

@media (max-width: 1199px) {
    .container, .footer-section {
        max-width: 700px;
        margin: 0 auto;
    }
}

@media (max-width: 750px) {
    .container, .footer-section {
        max-width: 520px;
    }
}

@media (max-width: 540px) {
    .container, .footer-section {
        max-width: 400px;
    }

    .container {
        padding: 0 16px;
    }
}