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

    /* scrollbar stuff*/
    /* width */
    ::-webkit-scrollbar {
      width: 10px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px black; 
      border-radius: 10px;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
      background: red; 
      border-radius: 7px;
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
      background: #b30000; 
    }

body{
  display: flex;
  flex-direction: column;
  background-color: #000000;
}

.wrapper{
  display: flex;
  flex-direction: column;
  margin: auto;
  width: 63%;
  min-height: 830px;
}


.banner{
  display: flex;
  flex-direction: column;
  border: 3px solid #ff932e;
  width: 100%;
  height: 200px;
  background-color: #9f4204;
}

    
.marquee{
  display: flex;
  flex-direction: column;
  border: 3px solid #ff932e;
  width: 100%;
  height: 35px;
  background-color: #04902e;
  background-image: url(images/marquee-bg.png);
}


.topcat{
  display: flex;
  flex-direction: row;
  border: 2px solid #ff932e;
  width: 100%;
  height: 555px;
}

     .bennytheball{
       display: flex;
       flex-direction: column;
       border: 1px solid #ff932e;
       width: 19%;
       height: 100%;
       background-color: #900404;
       background-image: url(images/red005.gif);
     }

        .navigation{
          display: flex;
          align-items: center;
          margin-top: 2px;
          padding: 5px;
        }
        
        
       .marvinmartian{
         display: flex;
         flex-direction: column;
         width: 100%;
         height: 170px;
         padding-left: 5px;
         padding-right: 5px;
         justify-content: space-evenly;
       }
          .marvinmartian a{
            text-decoration: none;
            padding: 4px 9px;
            border-radius: 9px;
           }
           
          .marvinmartian p{
            color: white;
            font-family: 'Times New Roman', Times, serif;
            text-align: center;
            font-size: 16px;
          } 
              .redB{ background-image: linear-gradient(to bottom, #e86161, #c42404); border: 3px solid #a30303; }
              .orangeB{ background-image: linear-gradient(to bottom, #f7a95c, #e87605); border: 3px solid #a34e03; }
              .yellowB{ background-image: linear-gradient(to bottom, #f5e893, #d4bf04); border: 3px solid #a38e03; }
              .greenB{ background-image: linear-gradient(to bottom, #aaf593, #5bad03); border: 3px solid #1b7505; }
              .purpleB{ background-image: linear-gradient(to bottom, #c17cc2, #a24da3); border: 3px solid #831791; }
              
                .redB:hover{ background-image: linear-gradient(to bottom, #f7d0d0, #e86161, #c42404); }
                .orangeB:hover{ background-image: linear-gradient(to bottom, #f7e6d0, #f7a95c, #e87605); }
                .yellowB:hover{ background-image: linear-gradient(to bottom, #f3f7d0, #f5e893, #d4bf04); }
                .greenB:hover{ background-image: linear-gradient(to bottom, #d1f7d0, #aaf593, #5bad03); }
                .purpleB:hover{ background-image: linear-gradient(to bottom, #fac0e8, #c17cc2, #a24da3); }
                
                .pix{
                  width: 12px;
                  height: 12px;
                  text-align: center;
                  margin-left: 3px;
                }
     
     .fancyfancy{
       display: flex;
       flex-direction: column;
       border: 1px solid #ff932e;
       width: 81%;
       height: 100%;
       background-color: #8cce3b;
       background-image: url(images/bgleaves2.png);
       overflow: auto;
     }
     .fancyfancy::-webkit-scrollbar{
       display: none;
     }
     
   .intro{
      display: flex;
      flex-direction: row;
      max-height: 235px;
   }
    .artTxt{
      margin-left: auto;
      margin-right: auto;
      max-width: 115px;
      padding: 5px;
    }

  .button1 img{
    display: flex;
    justify-self: center;
    width: 80%;
    height: auto;
    margin: 4px;
  }
 .button2 img{
    display: flex;
    justify-self: center;
    width: 90%;
    height: auto;
    margin: 4px;
  }  



/* for mobile compabability */
      
@media only screen and (max-width: 600px){
  .wrapper{
    width: 90%;
    min-height: 350px;
  }
  .banner{
    width: 100%;
    height: 90px;
  }
  .topcat{
    flex-direction: column;
    max-height: 60%;
  }
  .bennytheball{
    width: 100%;
    height: 130px;
    flex-direction: column;
  }
  .navigation{
    width: 30%;
    height: auto;
    align-self: center;
  }
  .marvinmartian{
    display: flex;
    flex-direction: row;
  }
     .marvinmartian a{
        text-decoration: none;
      }
    .marvinmartian p{
      font-size: 10px;
      text-align: center;
    }
      
      .redB, .orangeB, .yellowB, .greenB, .purpleB{
        width: 80px;
        height: 30px;
        justify-content: space-between;
      }
        .greenB p{
          font-size: 8px;
        }

  .fancyfancy{
    width: 100%;
    height: 500px;
  }  

  .text{
    font-size: 14px;
    font-weight: 400;
    text-align: center;
  }
  .funbuttons{
    display: flex;
    justify-content: space-around;
    width: 100%;
    max-height: 100px;
    margin-bottom: 3px;
  }
      .button1 img{
        width: 50%;
        height: auto;
      }
      .button2 img{
        width: 52%;
        height: auto;
      }
 
  .copyright-text{
    margin-top: 10px;
  }
}