body {
background-image: url('https://www.glitter-graphics.com/images/t/b/100x100/3404/3404172f2vww8aa7f.webp');
background-attachment: fixed;
background-repeat: repeat;
}

@font-face {
  font-family: wh;
  src: url(fonts/whisperhearts.otf);
}

@font-face {
  font-family: ca;
  src: url(fonts/crystalangels.ttf);
}

@font-face {
  font-family: sc;
  src: url(fonts/strawberry_cupcakes.otf);
}


.toplace {
position:fixed;
margin:auto;
height:80px;
width:94em;
top:-0.5em;
left:0.1em;
z-index:5;
}

.bigbox{
  background-image: url("https://upload.wikimedia.org/wikipedia/en/1/13/Baldis_Basics_in_Education_and_Learining_cover_art.webp");
margin:auto;
  height:990px;
  width:1100px;
  overflow: hidden;
  background: transparent;
  z-index: -1;
}


.bigcontainer {
  border: 20px;
border-style: solid;
border-image: url("https://i.imgur.com/8xftJ3v.gif") 7.5 fill round;       
    margin:auto;
    width:580px;
    height:650px;
z-index:1;
position: relative;
top:1em;

}

.lace {
  position:relative;
margin:auto;
height:200px;
width:700px;
bottom:27.5em;
left:-4.1em;
z-index:2;
}

.lacet {
position:relative;
margin:auto;
height:110px;
width:615px;
bottom:52em;
left:-1.25em;
z-index:5;
}


.hello {
  border-style:solid;
  border: 15px solid;
  margin:auto;
border-image: url("https://i.imgur.com/e3EPu48.png") 12 fill round;  margin:auto;
  width: 190px;
  height: 440px;
  position: relative;
  bottom:62em;
  right:27em;
  z-index: 2;
}


#flag {
  width:160px;
  height:30px;
}
#border {
  width:79px;
  height:50px;
}

#txt {
  font-family: "wh";
  color: pink;
  text-align: center;
  font-size: 25px;
}
.magi {
-webkit-mask-image: url(https://i.imgur.com/w7KjnHA.png);
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position:center;
width: 300px;
height: auto;
position: relative;
bottom:10em;
left:8em;
z-index:3;
}

#scb3 {
      overflow: scroll;
      overflow-x: hidden;
      height: 20em;
      padding: 1rem;
       background: transparent;
  font-family: "wh";
  color: gray;
  text-align: left;
  font-size: 18px;
  margin-bottom: 5px;
  position: relative;
  bottom:-0.1em;
    }

    #scb3::-webkit-scrollbar {
      width: 0;
      /* remove scrollbar space */
      background: transparent;
      /* to make scrollbar invisible */
    }

    #scb3::-webkit-scrollbar-thumb {
      background: transparent;
    }

#scb2 {
      overflow: scroll;
      overflow-x: hidden;
      height: 16em;
      padding: 1rem;
       background: transparent;
  font-family: "sc";
  color: gray;
  text-align: left;
  font-size: 18px;
  margin-bottom: 5px;
  position: relative;
  bottom:23.5em;
    }

    #scb2::-webkit-scrollbar {
      width: 0;
      /* remove scrollbar space */
      background: transparent;
      /* to make scrollbar invisible */
    }

    #scb2::-webkit-scrollbar-thumb {
      background: transparent;
    }
    
h2 {
  font-family: "wh";
  color: gray;
  text-align: left;
  font-size: 2.75em;
  margin:auto;
  position: relative;
  bottom:0.2em;
}

#favbig {
  width: 6%;
}

#banner {
  width:16%;
  
}

p {
  font-family: "wh";
  color: pink;
  -webkit-text-stroke: 1px gray;
  text-align: left;
  font-size: 1em;
  margin:auto;
  position: relative;
  bottom:1em;
}


h1 {
  font-family: "sc";
  color: pink;
  -webkit-text-stroke: 1px gray;
  text-align: left;
  font-size: 2.75em;
  margin:auto;
  position: relative;
  bottom:10em;
}
.bmarquee {
  height: 100px;
  width:580px;
margin:auto;
  overflow: hidden;
  position: relative;
bottom:27em;
  left:0.1em;
  }
.bmarquee div {
    display: block;
width:1900px;
  position: absolute;
  overflow: hidden;

  animation: bmarquee 7s linear infinite;
}

.bmarquee span {
  float: left;
  width: 50%;
}

@keyframes bmarquee {
  0% { left: 0; }
  100% { left: -162%}
}



.smarquee {
  height: 100px;
  width: 850px;
margin:auto;
  overflow: hidden;
  position: relative;
  bottom:60em;
  right:15em;
  }
 
 .smarquee div {
  display: block;
width:2900px;
  position: absolute;
  overflow: hidden;

  animation: smarquee 5s linear infinite;
}

.smarquee span {
  float: left;
}

@keyframes smarquee {
     0% { left: 0; }
   100% {left: -97.5%}
}

.tinybox {
  background-image: url("https://static.wikia.nocookie.net/2eacdac9-bf62-434d-914e-2c3b7c19d78c/scale-to-width/755");
margin:auto;
  height:170px;
  width:200px;
  z-index: -1;
  position: relative;
  top: 15em;
  right:27em;
  background:transparent;
}


  .home {
   width:60%;
  background-color:#F9CCD6;
  border:5px dotted #FEF6FA;
 color: white;
 font-family:"wh";
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 25px;
  cursor: pointer;
  padding: 3px 25px;
  border-radius: 12px
}


 .links {
   width:60%;
  background-color:#F9CCD6;
  border:5px dotted #FEF6FA;
 color: white;
 font-family:"wh";
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 25px;
  cursor: pointer;
  padding: 3px 25px;
  border-radius: 12px;
  position: relative;
  top:0.5em;
}


.interests {
  width:60%;
  background-color:#F9CCD6;
  border:5px dotted #FEF6FA;
 color: white;
 font-family:"wh";
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 25px;
  cursor: pointer;
  padding: 3px 25px;
  border-radius: 12px;
  position: relative;
  top:1em;
}