body {
        height: 100%;
        margin: 0;
        overflow: auto;
        font-family: 'Montserrat', sans-serif;
        background-color: #25313a;
    }

    .container {
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        margin-right: auto;
        margin-left: auto;
        text-align: center;
        color: white;
    }
    p {
        max-width: 315px;
        margin: 0 auto;
        padding: 60px 0 30px;
        font-size: 18px;
        line-height: 26px;
    }
    h2 {
        margin: 30px auto 40px;
        font-size: 28px;
    }
    .logo {
        margin-bottom: 30px;
    }
    .logo img {
        height: 30px;
    }
    #gif {
        margin: auto;
        max-width: 924px;
        max-height: 50%;
        display: flex;
    }
    #gif img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    @media (min-width: 576px) {
        p {
            max-width: 910px;
        }
    }
    @media (min-width: 768px) {
        p {
            padding: 70px 0 20px;
            font-size: 23px;
            line-height: 36px;
        }
        .logo img {
            height: 36px;
        }
    }
    @media (min-width: 1200px) {
        .container {
            max-width: 1140px;
        }
        p {
            font-size: 24px;
            line-height: 38px;
            padding: 80px 0 30px;
        }
        h2 {
            font-size: 38px;
        }
    }
    @media (max-height: 800px) {
        p {
            padding: 50px 0 20px;
        }
        h2 {
            margin: 20px auto 30px;
            font-size: 28px;
        }
    }
    @media (min-aspect-ratio: 5/4) and (max-height: 800px) {
        #gif {
            height: 50%;
        }
        #gif img {
            margin: auto;
        }
    }