* {
    margin: 0;
    padding: 0;
}
  
body {
      background-color: #1293cc
      width: 100%
      height: 1300%;}

      .center {
        margin: auto;
        width: 60%;
        padding: 10px;
      }


/* =-=-=-=-=-=-=
=-=- CANVAS -=-=
-=-=-=-=-=-=- */


header#canvas {
      width: 60vw;
      height: 1.5vw;
      background-color :#000000;
    }

#yellow {
          width: 60%;
          height: 100%;
          float: inherit;
          background-color: #f5ea14;
        }

#boo {
          width: 100%;
          height: 100%;
          float: left;
          background-color: #1293cc;
        }

#moo {
          width: 100%;
          height: 100%;
          float: left;
          background-color: #1293cc;
        }   

#mellow {
          width: 78%;
          height: 50%;
          float: right;
          background-color: #f5ea14;
        }
        
#bigchunkofyellow {
          width: 40%;
          height: 500%;
          float: right;
          background-color: #f5ea14;
        }

#bigchunkofblue {
          width: 60%;
          height: 500%;
          float: right;
          background-color: #1293cc;
        }

#red {
          width: 30.2%;
          height: 230%;
          float: left;
          background-color: #ec1f26;}


#white {
          width: 69.8%;
          height: 230%;
          float: left;
          background-color: #ffffff}


#byellow {
          width: 40.2%;
          height: 800%;
          float: right;
          background-color: #f5ea14}


#bblue {
          width: 59.8%;
          height: 800%;
          float: left;
          background-color: #1293cc}


#bbyellow {
          width: 69.8%;
          height: 750%;
          float: right;
          background-color: #f5ea14}

#mack {
          width: 30.2%;
          height: 750%;
          float: left;
          background-color: #000000}
          

#baby {
          width: 100%;
          height: 100.1%;
          float: left;
          background-color: #1293cc}


#champion {
          width: 69.8%;
          height: 10%;
          float: left;
          background-color: #1293cc}


#jorge {
          width: 40.2%;
          height: 800%;
          float: left;
          background-color: #1293cc}

#ranch {
          width: 59.8%;
          height: 800%;
          float: right;
          background-color: #ffffff}

#berry {
          width: 18%;
          height: 100%;
          float: left;
          background-color: #1293cc}


#roses {
          width: 82%;
          height: 100%;
          float: right;
          background-color: #ec1f26;}


/* =-=-=-=-=-=-=
=-=- HOVER -=-=
-=-=-=-=-=-=- */


#canvas:hover {
        background-color: #ec1f26;
}

#yellow:hover {
        background-color: black;
}

#boo:hover {
        background-color: #ffffff;
}

#moo:hover {
        background-color: black;
}

#mellow:hover {
        background-color: #ec1f26;
}

#bigchunkofyellow:hover {
         background-color: #000000;
}

#bigchunkofblue:hover {
         background-color: #ffffff;
}

#red:hover {
        background-color: #1293cc;
}
   
#white:hover {
        background-color: #000000;
}

#byellow:hover {
         background-color: green;
}

#bblue:hover {
         background-color: purple;
}

#bbyellow:hover {
         background-color: magenta;
}

#mack:hover {
         background-color: #ffffff;
}

#baby:hover {
         background-color: limegreen;
}
   
#champion:hover {
         background-color: #1293cc;
}
   
#jorge:hover {
         background-color: blue;
}

#ranch:hover {
         background-color: orange;
}

#berry:hover {
          background-color: pink;
}

#roses:hover {
         background-color: #000000;
}