/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */



   /*font*/
body {
  font-family: 'PixelifySans_Regular';
}

   /*Selection color*/
   ::-moz-selection { /* Code for Firefox */
  color: white;
  background: #FFBADA;
  }
   
   ::selection {
  color: white;
  background: #FFBADA;
}  


/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color: #ff80c2 #ffe5f4;
  }

 /* Chrome, Edge, and Safari */
  ::-webkit-scrollbar {
    width: 10px;
  }

  ::-webkit-scrollbar-track {
    background: #ffe5f4;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #ff80c2;
    border-radius: 10px;
    border: 1.5px ridge #ea57ad;
  }
  
    /*Main Container Box*/
      .container {
  width: 800px;
  height: 476px;
  margin-bottom: 3px;
  display: flex;
  flex-direction: column;
  background-image: url(https://sleepycove.neocities.org/backgrounds_gif/51.gif);
  border: 3.5px double #E86092;
  border-radius: 10px;
  padding-left: 15px;
  padding-right: 15px;
  text-wrap: wrap;
  flex-wrap: nowrap;
}

 /*Header*/
.header {
    padding-bottom: 259px;
    background-image: url(https://i.imgur.com/0TVqApX.png);
    background-repeat: no-repeat;
    background-size: 70%;
    background-position: center;
 }


 /*Welcome Page Container*/
   .boxcontent {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
    width: 758px;
    height: 410px;
    padding-bottom: 3px;
    margin-top: 6px;
    Padding-left: 3px;
    Margin-right: 0px;
    border-radius: 6px;
    background-color: white;
    flex-wrap: wrap;
    text-wrap: wrap;
    overflow: hidden
}
    
/*Welcome Page Container pt.2*/
  .pagecontent {
    display: flex;
    flex-direction: row;
    width: 381px;
    height: 412px;
    border-radius: 6px;
    background-color: white;
    justify-content: flex-start;
    flex-wrap: wrap;
    text-wrap: wrap;
    overflow: scroll;
}




     /*right SideBar*/
    .rightcontainer {
    width: 183px;
    height: 365px;
    margin-right: 5px;
    margin-top: 5px;
    border-radius: 10px;
    background: hidden;
}
    
     /*left SideBar*/
    .leftcontainer {
    width: 189px;
    height: 365px;
    margin-right: 5px;
    margin-top: 10px;
    border-radius: 10px;
    background: hidden;
}

     /*bottom container*/
   .bottomcontainer {
    width: 935px;
    height: 330px;
    background-color: pink;
    margin-top: 5px;
    display: contents;
}

.buttonlink {
    background: white;
    border: 4px double hotpink;
    border-image: url(https://www.valentinely.cc/images/sozai/pink-lace-border.png) 20%;
    padding-left: 4px;
    Padding-right: 4px;
    width: 164px;
    height: 134px;
    overflow: hidden;
}



.updatebox {
    background: white;
    border: 4px double hotpink;
    border-image: url(https://www.valentinely.cc/images/sozai/pink-lace-border.png) 20%;
    padding-left: 4px;
    Padding-right: 4px;
    margin-top: -12px;
    width: 160px;
    height: 215px;
    overflow: scroll;
}


  /*List icon*/
  ul {
  list-style-type: none;
  padding-left: 5px;
   }
   
   
     ul2 {
    list-style-image: url("https://i122.photobucket.com/albums/o260/mhilka/minigifs/24.gif");
    list-style-position: inside;
    margin-bottom: -1px;
    padding-bottom: -2px;
     }
    
    
    
 /*divider*/
.divider {
  position: center;
  display: flex;
  margin-left: -5px;
  flex-direction: row;
  height: 32px;
  margin-top: 10px;
  margin-bottom: 2px;
  width: 807px;
}

/*infinite marquee*/
.marquee {
  position: relative;
  width: 807px;
  height: 32px;
  overflow: hidden;
}

.track {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 32s linear infinite;
}

@keyframes marquee {
  from { transform: translateX(0%); }
  to { transform: translateX(-50%); }
}


/*button*/
 .button
   {
   border-radius: 50px;
   border: 2px solid black;
   background: pink;
   font-family: windows;
   font-size: 1em;
   color: black;
   width: 200px;
   }
   
 