@font-face{
  font-family: "8bitoperator_JVE";
  src: url(assets/fonts/8bitoperator_jve.woff);
}

@font-face{
  font-family: "KiwiSoda";
  src: url(assets/fonts/KiwiSoda.woff);
}


body{
  background-color: black;
  background-image: url(assets/images/tile.jpg);
  background-attachment: fixed;
  color: #fff;
  margin: 0;
  padding: 0;
  border: 0;
}

#left{
  margin: 0 1050px 0 200px;
  position: fixed;
  padding: 0 30px 731px 30px;
  background-color: #000;
  overflow: hidden;
  box-sizing: border-box;
}

/*makes the main box*/
#main{
  margin: 100px 450px 100px 450px;
  position: fixed;
  border: solid 30px transparent;
  border-image: url(assets/images/deltarune-textbox.png) 30;
  border-image-outset: 10px;
  padding: 30px;
  background-color: #000;
  overflow: hidden;
}

.content{
  font-family: "8bitoperator_JVE";
  text-align: left;
}

h1,h2,h3,h4,h5,h6{
  text-align: center;
  font-family: "KiwiSoda";
}

footer{
  font-family: "8bitoperator_JVE";
  font-size: 5px;
}

textarea{
  color: #fff;
  background-color: #000;
  border: 2px solid #fff;
  font-family: "8bitoperator_JVE";
  resize: none;
}

li{
  display: block;
  margin: 5px 0;
}

strong{
  font-style: italic;
}

/*makes sure things with the button class a properly aligned*/
.button{
  text-align: center;
  margin: 60px 0 40px 0;
}

/*creates the button with an invisible padding that makes it look better*/
.button_a{
  color: #FF7F27;
  font-size: 40px;
  padding: 20px;
}

/*makes it so that when mouse is hovering above the box, it will change the colours*/
.button_a:hover{
  color: #FFFF00;
  background-color: #f00;
}

.button_a:active{
  background-color: #fff;
}

.center{
  text-align: center;
}


#berdlyrosegif{
  float: right;
}