Responsive CSS.css

body{
  font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Arial,sans-serif;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  background:linear-gradient(145deg, rgb(0, 100, 109) 42%, rgb(65, 28, 206)) 0% 0% / cover; 
  color:white;
}

/* MOBILE */
html{
    font-size:14px;
}
/* TABLET */
@media only screen and (min-width: 480px) {
    html{
        font-size:16px;
    }
}
/* DESKTOP */
@media only screen and (min-width: 768px) {
    html{
        font-size:18px;
    }
}
/* X-LARGE */
@media only screen and (min-width: 1024px) {
    html{
        font-size:20px;
    }
}

body{
  font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Arial,sans-serif;
  height:100%;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  /* background:linear-gradient(145deg, rgb(0, 100, 109) 42%, rgb(65, 28, 206)) 0% 0% / cover;  */
  background: white;
  color:Green;
}

.header {
    background-color: Yellow;
    min-height: 3.5rem;
    height: 3.5rem;
    width: 100%;
    display: flex;
    padding: 0px 1rem;
    align-items: center;
    font-size: 2rem;
}

.logo{
  height:3rem;
  width:4rem;
  background: url(https://i.insider.com/57b231c1db5ce94f008b6df4?width=750&format=jpeg&auto=webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: .6rem;

}

.motto{
    margin: 3.5rem;
    color: Green;
    min-height: 3.5rem;
    height: 3.5rem;
    width: 100%;
    display: flex;
    padding: 0px 2rem;
    align-items: center; 
    font-size:3rem;
    font-weight: bold;
    text-align: center;
}

Responsive CSS.html

<header class="header">
    <div class="logo"></div>
    SUBWAY
</header>

<section class="motto">
    EAT FRESH.
</section>