body{
    margin:0;
    background:#f4f4f4;
    font-family:Arial, sans-serif;
}

.container{
    display:grid;

    grid-template-areas:
    "header header header header"
    "left center right extra"
    "footer footer footer footer";

    grid-template-columns: 1fr 1fr 1fr 1fr;

    grid-template-rows: 100px 70vh 70px;

    width:90%;
    margin:20px auto;

    border:3px solid black;

    gap:3px;
}

.header{
    grid-area:header;

    background:#ffd43b;

    position:relative;

    text-align:center;
}

.logo{
    width:120px;
    height:35px;

    background:white;
    border:2px solid black;

    position:absolute;
    top:15px;
    left:15px;
}

.header h1{
    line-height:100px;
    margin:0;
}

.left{
    grid-area:left;
    background:#4361ee;
    color:white;
    padding:15px;
}

.center{
    grid-area:center;
    background:#ff6b6b;
    padding:15px;
}

.right{
    grid-area:right;
    background:#dddddd;
    padding:15px;
}

.extra{
    grid-area:extra;
    background:#80ed99;
    padding:15px;
}

.scroll{
    height:250px;
    overflow:auto;

    background:white;
    padding:10px;
}

.rotate{
    transform:rotate(2deg);
}

.footer{
    grid-area:footer;

    background:#ffd43b;

    text-align:center;
}

.footer h2{
    line-height:70px;
    margin:0;
}

@media (max-width:900px){

    .container{

        grid-template-areas:
        "header header"
        "left center"
        "right extra"
        "footer footer";

        grid-template-columns:1fr 1fr;

        grid-template-rows:
        100px
        50vh
        50vh
        70px;
    }

}

@media (max-width:600px){

    .container{

        grid-template-areas:
        "header"
        "left"
        "center"
        "right"
        "extra"
        "footer";

        grid-template-columns:1fr;

        grid-template-rows:
        100px
        250px
        250px
        250px
        250px
        70px;
    }
}

@media print{

    body{
        background:white;
    }

    .container{
        border:none;
        gap:0;
    }

    .header,
    .footer,
    .left,
    .center,
    .right,
    .extra{
        background:white;
        color:black;

        border:1px solid black;
    }

    .logo{
        display:none;
    }

}