*{
  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;
}

/* this just controls the width of the entire thingy */
.wrapper{
  display: flex;
  flex-direction: column;
  margin: auto;
  width: 75%;
  min-height: 1100px;
}

/* this controls both containers */
.cage{
  display: flex;
  flex-direction: row;
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
  min-height: 1100px;
  background-color: black;
  justify-content: space-between;
}

/* for container 1 */
.container1{
  display: flex;
  flex-direction: column;
  flex-basis: 19%;
  background-color: black;
}
    .logo{
      display: flex;
      flex-direction: column;
      background-color: #006b42;
      width: 100%;
      height: 123px;
      margin-bottom: 5px;
    }
    .logo img{
      width: 100%;
      height: 100%;
    }

    .ad{
      display: flex;
      flex-direction: column;
      background-color: #b3400e;
      width: 100%;
      height: 95px;
      margin-bottom: 5px;
    }

    .ad img{
      width: 100%;
      height: 100%
    }

    .sidebar{
      display: flex;
      flex-direction: column;
      background-image: url(images/barrel-darkred-bg.png);
      background-color: #381e00;
      color: #ffffff;
      width: 100%;
      height: 950px;
    }

    .candybar{
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 510px;
      align-items: center;
    }

        .creator{
          width: 85%;
          height: 70px;
          margin-bottom: 9px;
        }
        .pfp{
          width: 120px;
          height: 120px;
        }
        .mojo{
          color: #f542b3;
          font-family: Brush Script MT, Brush Script Std, cursive;
          font-size: 16px;
          text-align: center;
          padding: 10px;
        }
        .fuzzy{
          color: #f0e142;
          font-family: 'Times New Roman', Times, serif;
          font-size: 19px;
          text-align: left;
          padding-left: 22px;
          padding-right: 22px;
        }

    .other-half{
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 200px;
      align-items: center;
      margin-top: 25px;
    }
        .colstie{
          width: 130px;
          height: 130px;
        }
        .absol{
          color: #a9ed2c;
          font-family: 'Times New Roman', Times, serif;
          font-size: 15px;
          font-weight: 2px;
          text-align: center;
          padding: 10px;
        }
        .him{
          color: #e0901f;
          font-family: 'Times New Roman', Times, serif;
          font-size: 15px;
          font-weight: 2px;
          text-align: center;
          padding: 10px;
        }
        
        
    .blossom{
          display: flex;
          flex-direction: column;
          width: 100px;
          height: 100%;
          margin: auto;
          margin-top: 25px;
        }
            .blossom textarea{
              font-size: 13px;
              color: #fcf64a;
              background-color: #f03c00;
              border: 1px solid #a4f000;
              resize: none;
              overflow-y: scroll;
            }
            .blossom textarea::-webkit-scrollbar{
              display: none;
            }
/*for container 2 */
.container2{
  display: flex;
  flex-direction: column;
  flex-basis: 80%;
  background-color: black;
}

    .title{
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 145px;
      margin-bottom: 3px;
    }
      .title img{
      width: 100%;
      height: 100%
    }

    .navbar{
      display: flex;
      flex-direction: row;
      background-color: #4a130a;
      background-image: url("images/brain-texture.png");
      width: 100%;
      height: 45px;
      margin-bottom: 4px;
    }
        .navbar a{
          text-decoration: none;
          display: inline-block;
          margin-right: 20px;
          padding: 23px 60px;
        }
        .navbar a:hover{
          filter: brightness(50%);
        }

            .home{
              background-image: url("images/home-button.png");
              background-size: 100% 100%;
              margin-left: 10px
            }
            .news{
              background-image: url("images/news-button.png");
              background-size: 100% 100%;
            }
            .gallery{
              background-image: url("images/gallery-button.png");
              background-size: 100% 100%;
            }
            .worlds{
              background-image: url("images/worlds-button.png");
              background-size: 100% 100%;
            }

    .content{
      display: flex;
      flex-direction: column;
      background-color: #E1E149;
      background-image: url(images/symbol-yellow-bg.png);
      width: 100%;
      height: 890px;
      margin-bottom: 5px;
      overflow: auto;
    }
        .content img{
          width: 100%;
          height: 100%
        }
        .news-img{
          display: flex;
          flex-direction: row;
          width: 100%;
          height: 55px;
        }
        .buttercup{
              max-width: 50px;
              max-height: 50px;
         }
        .newsText{
          max-width: 35%;
          max-height: 70%;
          padding-left: 12px;
          padding-top: 9px;
        }
        
        .sedusa{
          color: #a2ff57;
          font-family: brush script mt, cursive;
          font-size: 22px;
          font-weight: 3px;
          text-align: left;
        }
      

    .footer{
      display: flex;
      flex-direction: column;
      background-image: url(images/mascot-darkblue-bg.png);
      background-color: #0045d0;
      color: #ffffff;
      width: 100%;
      height: 86px;
    }