@charset "utf-8";

/* Desktop Styles: between 801px and 1292px */
@media only screen and (max-width: 1292px) {

    html,
    body {
        min-width: 801px;
    }

    /* Banner layout */
    header .banner {
        font-size: 4.65rem;
        width: 750px;
    }

    /* Nav layout */
    nav #legs-button::after {
        content: "";
        clear: both;
        display: table;
    }

    /* add line break every two videos */
    .line-break:after {
        content: '\A';
        white-space: pre;
    }

    /* Footer layout */
    .box {
        flex-direction: column;
        row-gap: 20px;
        align-items: center;
        justify-content: center;
    }

    div.box:nth-child(3) {
        align-self: flex-start;
    }
}


/* Mobile Styles: <= 800px */
@media only screen and (max-width: 800px) {

    /* Html and body layouts for mobile */
    html,
    body {
        min-width: 320px;
        display: block;
    }

    header,
    main nav .nav-buttons,
    main #training-videos {
        max-width: 455px;
        margin: auto;
        margin-bottom: 1rem;
    }

    /* Banner layout */
    header {
        margin: 1rem auto auto;
    }

    header .banner {
        font-size: 2.25rem;
        width: 97%;
        margin: auto;
    }

    /* Banner caption layout */
    #banner-caption>p {
        font-size: 1.3rem;
        margin-bottom: 1rem;
    }

    /* navigation layout */
    .nav-buttons {
        width: 95%;
    }

    #nav-container {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    #training-videos {
        padding-bottom: 2rem;
        margin-bottom: 0rem !important;
    }

    /* videos layout */
    main video {
        width: 100%;
    }

    .videos {
        margin: 1rem auto 1rem auto;
        width: 95%;
        height: auto;
    }

    .videos:hover {
        /* no need to transform when on mobile mode */
        transition: none !important;
        transform: none !important;
    }

    /* Footer layout */
    footer {
        flex-direction: column-reverse;
        row-gap: 50px;
        align-items: flex-start;
    }

    #footer-link > div {
        align-items: flex-start;
    }
}