* {

    box-sizing: border-box;
  
  }
  
  body {
  
    font-family: Arial, sans-serif;
  
    margin: 0;
  
    padding: 0;
  
  }
  
  .clear {
  
    clear: both;
  
  }
  
  h1 {
  
    text-align: center;
  
    padding: 50px 10px;
  
    color: white;
  
    background-color: rgb(192, 50, 50);
  
  }
  
  .instructions {
  
    max-width: 1280px;
  
    margin: 0 auto;
  
    padding: 20px;
  
    margin-bottom: 50px;
  
  }
  
  .colors > input {
  
    width: 50%;
  
    padding: 5px;
  
    border: none;
  
    font-size: 18px;
  
    margin: 0;
  
    float: left;
  
    color: white;
  
  }

.wrapper{
  max-width: 1280px;
  text-align: center;
  color:white;
  font-size: 32px;
}

  header{
    width:100%;
    height: 200px;
    background-color: rgb(223, 114,  75);
  }

  nav{
    width:100%;
    height: 100px;
    background-color: rgb( 47, 108, 136);
  }

  main{
    width:75%;
    height: 400px;
    float: left;
    background-color: rgb(192,  70,  94);
  }

  aside{
    background-color: rgb( 53, 184, 155);
    height: 400px;
    float: left;
    width:25%;
  }

  footer{
    height: 200px;
    background-color: rgb( 39,  39,  39);
    width:100%;
  }
  
  
  @media screen and (max-width:720px){
    main{
      width:100%;
    }
    aside{   
      width:100%;
    }
  }
  
  
  @media screen and (min-width: 720px) {
  
    .colors > input {
  
      padding: 20px;
  
      width: calc(100% / 3);
  
    }
  
  }
  
  
  
  @media screen and (min-width: 1024px) {
  
    .colors > input {
  
      width: 20%;
  
    }
  
  }