style.css

@import url('https://fonts.googleapis.com/css2?family=Marvel:wght@700&display=swap');

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    font-family: 'Marvel', sans-serif;
}

body {
    background: rgb(255,255,255);
    background: linear-gradient(
        30deg, 
        rgba(255,255,255,1) 0%, 
        rgba(214,214,214,1) 8%, 
        rgba(184,184,184,1) 14%, 
        rgba(153,153,153,1) 20%, 
        rgba(128,128,128,1) 25%, 
        rgba(92,92,92,1) 32%, 
        rgba(61,61,61,1) 38%, 
        rgba(31,31,31,1) 44%, 
        rgba(0,0,0,1) 50%, 
        rgba(31,31,31,1) 56%, 
        rgba(67,67,67,1) 63%, 
        rgba(92,92,92,1) 68%, 
        rgba(128,128,128,1) 75%, 
        rgba(153,153,153,1) 80%, 
        rgba(189,189,189,1) 87%, 
        rgba(214,214,214,1) 92%, 
        rgba(255,255,255,1) 100%);
}

header {
    height: 15vh;
    width: 100%;
    display: flex; 
    justify-content: center;
    padding: 1rem;
    background-color: rgb(44, 43, 43);
}

header img{
    height: 100%;
}

main {
    display: grid;
    grid-template-columns: 33% 34% 33%;
    padding-top: 2rem;
    padding-bottom: 2rem;
    gap: 1.5rem;
    max-width: 980px;
    margin: auto;
}

footer {
    height: 10vh;
    width: 100%;
    text-align: center;
    background-color: rgb(32, 29, 29);
    color: #ffff;
    padding: 1rem;
}

@media (max-width: 770px) {
    main{
        grid-template-columns: 50% 50%;
        max-width: 85%;
    }
}

@media (max-width: 420px) {
    main {
        grid-template-columns: 100%;
        max-width: 80%;
    }
    footer h1 {
        font-size: 1.5rem;
    }
}