img {
    width: 200px;
}

body {
    text-align: center;
    font-family: Calibri;
    background-image: linear-gradient(90deg, lightgreen, lightseagreen);
    color: navy;
    margin: 10px
}

header {
    background-color: lightseagreen;
    margin: 30px;
}

div {
    border: solid 5px darkslategray;
}

.grid {
    display: grid;
    grid-template-areas: "a c" "b c ";
    gap: 10px;
    margin: 30px;
}

.first {
    grid-area: a;
    background-color: lightgreen;
}

.second {
    grid-area: b;
    background-color: greenyellow;
}

.third {
    grid-area: c;
    background-color: mediumaquamarine;
}

.box {
    padding: 20px;
    justify-content: center;
    align-items: center;
    margin: 0px;
    border: none;
}

.animated {
    animation: wobble 1s ease-in-out infinite alternate;
}

@keyframes wobble {
    0%{transform:rotate(-20deg)}
    100%{transform:rotate(20deg)}
    
}

@media (max-width: 600px) {
    img {
        width: 100px;
    }
    body {
        font-size: 10px;
    }
}