Exercise 2: Responsive CSS

index.html

 
<header class="header">
  <div class="logo"></div>
  MY COOL APP!
 
</header>

<section class="main">
  
</section>

style.css

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

body{
  
  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; 
  color:white;
}



.header{
    background:#f7797d;
    width:100%;
    min-height:5rem;
    display:flex;
    padding:2rem;
    align-items:center;
    justify-content:flex-start;
    

}
.main{
    min-height:100vh;
    width:100%;
    background: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d);
    background-position: top left;
    background-repeat: no-repeat;
    background-size: cover;
    display:flex;
    flex-direction:column;
    align-items:center;
    /* flex-wrap:wrap; */
}

.logo{
    background: url(https://99designs-blog.imgix.net/blog/wp-content/uploads/2018/05/attachment_49766565.jpeg?auto=format&q=60&fit=max&w=930);
    background-color:black;
    height:3rem;
    width:3rem;
    padding:0rem;
    margin: 0.5rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

}