* {
    margin: 0;
    padding: 0;
    color: #463730;
}

.grid {
    display: grid;
    text-align: center;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas: 
    "title title"
    "title title"
    "title title"
    "title title"
    "title title"
    "content content"
    "content content"
    "content content"
    "footer footer";

    background-color: #488ac3;
}

.title {
    grid-area: title;
    text-align: center;
    text-size-adjust: 50px;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 50px;
    border-top: 3px solid #f54545;
    border-right: 3px solid #f54545;
    border-left: 3px solid #f54545;
    background-color: #E0F2E9;
}

.h1 {
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
    justify-content: center;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

.content {
    grid-area: content;
    font-size: 20px;
    word-spacing: 5px;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    border-bottom: 3px solid #f54545;
    background-color: #E0F2E9;
}

.space {
    padding-left: 30px;
    padding-right: 20px;
}

.footer {
    grid-area: footer;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 5px;
    margin-bottom: 50px;
    border: 3px solid #f54545;
    background-color: #E0F2E9;
}

.container-footer-grid {
    margin-left: 0px;
    margin-right: 850px;
}

.footer-subscribe {

    padding: 50px 30px 40px 30px;
    position: relative;
    margin-bottom: 10px;
}

.footer-subscribe-2 {

    background-color: #E0F2E9;
    padding: 50px 30px 40px 30px;
    position: relative;
}

.footer-form-title {
    font-size: 27px;
    font-weight: bold;
    margin-right: 50px;
}

.footer-form-title-2 {
    font-size: 24px;
}

.footer-form-input {

    border: 1px #463730;
    width: 30px;
    height: 30px;
    margin-bottom: 10px;
    margin-left: 100px;
    padding: 12px 177px 12px 20px;
    color: #463730;
    background-color: #fff;
}

.footer-form-input::placeholder {
    color: rgba(26, 27, 31, 8);
    color: #fff;
}

.footer-form-input-2 {
    border: 1px #463730;
    width: 300px;
    height: 30px;
    margin-bottom: 10px;
    margin-left: 100px;
    padding: 12px 177px 12px 20px;
    color: #463730;
    background-color: #fff;
}

.footer-form-input-2::placeholder {

    color: rgba(26, 27, 31, -8);
    color: #fff;
}

.button-primary {

    color: #fff;
    letter-spacing: 2px;
    text-transform: uppercase;
    background-color: #3898ec;
    padding: 12px 25px;
    font-size: 12px;
    line-height: 10px;
    transition: all .2s;
    margin-left: 0px;
    margin-right: -50px;
    border-radius: 10px;
}


.button-primary:hover {

    color: #3898ec;
    background-color: #3898ec;
}

.button-primary:active {
    background-color: #3898ec;
}

.button-primary.footer-form-button {

    background-color: #3898ec;
    padding: 8px 18px;
    font-size: 14px;
    position: absolute;
    right: 8px;
}

@media screen and (min-width:936px) {
.grid {
        display: grid;
        grid-template-columns:
            1fr 500px 500px 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        grid-template-areas:
            ".title title."
            ".title title."
            ".title title."
            ".title title."
            ".title title."
            ".content content."
            ".content content."
            ".content content."
            ".footer footer.";
    }
}

 /* Style all font awesome icons */
 .fa {
     padding: 20px 40px;
     font-size: 30px;
     width: 50px;
     text-align: center;
     text-decoration: none;
     margin-left: 600px;
     margin-bottom: 3px;
     border-radius: 10px;
     border: #181818 solid 2px;
 }

 /* Add a hover effect if you want */
 .fa:hover {
     opacity: 0.7;
 }

 /* Set a specific color for each brand */

 /* Facebook */
 .fa-facebook {
     background: #3B5998;
     color: white;
 }

 /* Twitter */
 .fa-twitter {
     background: #55ACEE;
     color: white;
 }

 footer-form-input {

     border: 1px #463730;
     width: 250px;
     height: 30px;
     margin-bottom: 10px;
     margin-left: 150px;
     padding: 12px 177px 12px 20px;
     color: #463730;
     background-color: #fff;
 }

 .footer-form-input::placeholder {
     color: rgba(26, 27, 31, 8);
     color: #fff;
 }

 .footer-form-input-2 {
     border: 1px #463730;
     width: 300px;
     height: 30px;
     margin-bottom: 10px;
     margin-left: 100px;
     padding: 12px 177px 12px 20px;
     color: #463730;
     background-color: #fff;
 }

 .footer-form-input-2::placeholder {

     color: rgba(26, 27, 31, -8);
     color: #fff;
 }

 .button-primary {

     color: #fff;
     letter-spacing: 2px;
     text-transform: uppercase;
     background-color: #3898ec;
     padding: 12px 25px;
     font-size: 12px;
     line-height: 10px;
     transition: all .2s;
     margin-left: 100px;
     margin-right: -50px;
     border-radius: 10px;
 }

 .button-primary:hover {

     color: #3898ec;
     background-color: #3898ec;
 }

 .button-primary:active {
     background-color: #3898ec;
 }

 .button-primary.footer-form-button {

     background-color: #3898ec;
     padding: 8px 18px;
     font-size: 14px;
     position: absolute;
     right: 8px;
 }

 <-- Animation -->

 :root {
     --tomato-face: #f54545;
     --tomato-stem: green;
     --tomato-skin: #f54545;
     /* Tomato Red */
 }


 .tomato {
     width: 300px;
     height: 300px;
     margin: auto;
     margin-top: 75px;
     z-index: 4;
     position: relative;
     transition: transform 3s ease-in-out 0ms;
 }

 .tomato * {
     position: absolute;
 }

 .tomato:active {
     transform: scale(1.5);
     cursor: not-allowed;
 }

 .tomato-head {
     width: 50%;
     height: 45%;
     background: linear-gradient(45deg,
             var(--tomato-skin),
             rgb(239, 240, 228));
     border-radius: 70% 70% 65% 65%;
     top: 10%;
     left: 25%;
     z-index: 1;
 }

 .face {
     width: 60%;
     height: 70%;
     background-color: var(--tomato-face);
     border-radius: 70% 70% 60% 60%;
     top: 15%;
    background-color: #f54545;
 }

 .face.left {
     left: 5%;
    background-color: #f54545;
 }

 .face.right {
     right: 5%;
    background-color: #f54545;
 }

 .chin {
     width: 90%;
     height: 70%;
     background-color: #f54545;;
     top: 25%;
     left: 5%;
     border-radius: 70% 70% 100% 100%;
 }

 .eye {
     width: 15%;
     height: 17%;
     background-color: black;
     top: 45%;
     border-radius: 50%;
 }

 .eye.left {
     left: 25%;
 }

 .eye.right {
     right: 25%;
 }

 .eye-lid {
     width: 150%;
     height: 100%;
     background-color: #f54545;
     top: 25%;
     left: -23%;
     border-radius: 50%;
 }

 .blush {
     width: 15%;
     height: 10%;
     background-color: pink;
     top: 65%;
     border-radius: 50%;
 }

 .blush.left {
     left: 15%;
 }

 .blush.right {
     right: 15%;
 }

 .stem {
     height: 10%;
     background-color: var(--tomato-stem);
     /* Green stem color */
     border-radius: 50%;
 }

 .stem.top {
     width: 20%;
     top: 60%;
     left: 40%;
 }

 .stem.bottom {
     width: 16%;
     top: 65%;
     left: 42%;
 }

 .hair {
     width: 50%;
     height: 20%;
     background-color: green;
     /* Green hair color */
     top: 0%;
     left: 5%;
     border-radius: 50%;
     transform: rotate(20deg);
     /* Adjust the rotation to style the hair */
 }

 .hair1 {
     width: 90%;
     height: 70%;
     background-color: green;
     /* Green hair color */
     top: 15%;
     left: 25%;
     border-radius: 50%;
     transform: rotate(20deg);
     /* Adjust the rotation to style the hair */
 }

 .hair2 {
     width: 90%;
     height: 80%;
     background-color: green;
     /* Green hair color */
     top: -60%;
     left: 30%;
     border-radius: 90%;
     transform: rotate(50deg);
     /* Adjust the rotation to style the hair */
 }

 .hair3 {
     width: 100%;
     height: 70%;
     background-color: green;
     /* Green hair color */
     top: -15%;
     left: 5%;
     border-radius: 50%;
     transform: rotate(40deg);
     /* Adjust the rotation to style the hair */
 }

 .hair4 {
     width: 100%;
     height: 90%;
     background-color: green;
     /* Green hair color */
     top: -75%;
     left: 55%;
     border-radius: 50%;
     transform: rotate(90deg);
     /* Adjust the rotation to style the hair */
 }

 .hair5 {
     width: 100%;
     height: 90%;
     background-color: green;
     /* Green hair color */
     top: -55%;
     left: 75%;
     border-radius: 50%;
     transform: rotate(125deg);
     /* Adjust the rotation to style the hair */
 }

 .hair6 {
     width: 100%;
     height: 90%;
     background-color: green;
     /* Green hair color */
     top: -50%;
     left: 110%;
     border-radius: 50%;
     transform: rotate(190deg);
     /* Adjust the rotation to style the hair */
 }

 .hair7 {
     width: 100%;
     height: 90%;
     background-color: green;
     /* Green hair color */
     top: 100%;
     right: 35%;
     border-radius: 70%;
     transform: rotate(145deg);
     /* Adjust the rotation to style the hair */
 }

 .tomato-body {
     width: 53%;
     height: 45%;
     background: linear-gradient(45deg,
             rgb(134, 133, 133) 0%,
             rgb(234, 231, 231) 25%,
             white 67%);
     border-radius: 80% 80% 100% 100%;
     top: 40%;
     left: 23.5%;
    background-color: #f54545;
 }

 .tomato-body::before {
     content: "";
     position: absolute;
     width: 50%;
     height: 45%;
     background-color: var(--tomato-skin);
     top: 10%;
     left: 25%;
     border-radius: 0% 0% 100% 100%;
     opacity: 70%;
 }

 .stem,
 .blush,
 .eye-lid,
 .eye,
 .chin,
 .face,
 .tomato-head {
     animation: shake 4s ease-in-out;
     animation-delay: 5s repeat;
     animation-duration: 5s;
     animation-iteration-count: infinite;
     /* Loop the animation infinitely */
 }

 @keyframes shake {

     0%,
     100% {
         transform: rotate(0deg);
         /* Start and end: no rotation */
     }

     10%,
     90% {
         transform: rotate(5deg);
     }

     10%,
     90% {
         transform: rotate(5deg);
     }

     10%,
     90% {
         transform: rotate(5deg);
     }

     10%,
     90% {
         transform: rotate(5deg);
     }

     20%,
     80% {
         transform: rotate(-5deg);
     }

     30%,
     50%,
     70% {
         transform: rotate(5deg);
     }

     40%,
     60% {
         transform: rotate(-5deg);
     }

     30%,
     50%,
     70% {
         transform: rotate(5deg);
     }

     20%,
     80% {
         transform: rotate(-5deg);
     }

     10%,
     90% {
         transform: rotate(5deg);
     }

     10%,
     90% {
         transform: rotate(5deg);
     }

     10%,
     90% {
         transform: rotate(5deg);
     }

     10%,
     90% {
         transform: rotate(5deg);
    }

 .tomato {
     /* Your existing styles here */
     animation: tomato-animation 10s linear infinite;
     /* Animation duration is 10s: 5s pause + 5s animation */
     animation-delay: 5s;
     /* Delay animation start by 5 seconds */
 }

 @keyframes tomato-animation {

     0%,
     100% {
         transform: rotate(0deg);
         /* Start and end: no rotation */
     }

     50% {
         transform: rotate(5deg);
         /* Midpoint of animation: apply rotation */
     }
 }