* {
        box-sizing: border-box;

    }

    body {
        background: url(../img/abstract-wavy-background.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

    .container {
        height: 100vh;
        display: grid;
        grid-template-columns: 25% 75%;
        grid-template-rows: 125px auto 1fr 1fr;
        justify-content: center;
        grid-template-areas:
            "header header"
            "menu menu"
            "aside section"
            "aside section"
            "footer footer";
        background-color: rgba(255, 250, 250, 0.300);
        backdrop-filter: blur(4px);

    }

    header {
        grid-area: header;
        text-align: center;
    }

    menu {
        grid-area: menu;
        overflow: hidden;
        backdrop-filter: blur(4px);
        height: 40px;
    }

    menu a {
        float: right;
        display: block;
        block-size: 80px 40px;
        padding: 1%;
        align-content: center;
        color: black;
        text-decoration: none;
        font-size: 100%;
        font-weight: bold;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }

    menu a:hover {
        background-color: rgba(19, 105, 117, 0.300);
        box-shadow: 0px 0px 12px 3px rgba(58, 106, 112, 0.8);
        border-radius: 10px;
        color: black;
    }

    aside {
        grid-area: aside;
    }

    section {
        grid-area: section;
    }

    iframe {
        width: 100%;
        height: 100%;
        border: 0;
        align-items: center;
        overflow: auto;
    }

    .card {
        backdrop-filter: blur(4px);
    }

    footer {
        align-self: flex-end;
        grid-area: footer;
        text-align: center;
        backdrop-filter: blur(4px);
    }

    @media screen and (max-width: 885px) {
        .container {
            height: 100vh;
            grid-template-columns: repeat(1, 1fr);
            grid-template-rows: 125px 50px 1fr 1fr;
            grid-template-areas:
                "header"
                "menu"
                "section"
                "section"
                "aside"
                "footer";
        }

        header {
            grid-area: header;
        }

        menu {
            grid-area: menu;
        }

        aside {
            grid-area: aside;
            align-self: flex-end;
            height: 80px;
        }

        section {
            grid-area: section;
        }

        footer {
            grid-area: footer;
        }
    }

    @media screen and (max-width: 450px) {
        .container {
            height: 100vh;
            grid-template-columns: repeat(1, 1fr);
            grid-template-rows: 125px 50px 1fr 1fr;
            grid-template-areas:
                "header"
                "menu"
                "section"
                "section"
                "aside"
                "footer";
        }

        header {
            grid-area: header;
        }

        menu {
            grid-area: menu;
        }

        aside {
            grid-area: aside;
        }

        section {
            grid-area: section;
        }

        footer {
            grid-area: footer;
        }
    }