/* fonts */
@font-face{
  font-family: "PixelOperator";
  src: url(fonts/PixelOperator.ttf) format('truetype'); 
} /*PixelOperator Default*/
@font-face{ 
  font-family: "PixelOperatorB";
  src: url(fonts/PixelOperator-Bold.ttf) format('truetype');
} /*PixelOperator Bold*/
@font-face{
  font-family: "basiic";
  src: url(fonts/basiic.ttf) format('truetype');
} /*basiic default*/
  
body {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-content: center;
  background-image: url("images/indexbg.jpg");
  background-repeat: no-repeat;
  background-size: cover
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
        }
  to {
    transform: rotate(359deg); /* or 360deg */
        }
}

button:hover {
font-style: italic;
}

.indexbody {
  display: flex;
  flex-direction: row;
  justify-content: center;
  font-family: basiic;
  margin-top: 20px;
}
.header {
  display: flex;
  justify-content: center;
  align-content: center;
  margin-top: 30px;
}

#sign {
  display: flex;
  align-content: center;
  justify-content: center;
  width: 950px;
  height: 50px;
  background-color: #E8DABC;
  font-family: basiic;
  padding: 10px
}

#sidebar-left {
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 800px;
  margin: 10px;
}
#containerright {
  width: 750px;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px;
}
#siteinfo {
  width: 700px;
  height: 300px;
  margin: 10px;
  padding: 10px;
  overflow-y: scroll;
  border: double 5px white;
  display: flex;
  justify-content: flex-end;
}

#indexbelow{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin: 10px;
}
#sites{
  overflow-y: scroll;
  border: double 5px white;
  width: 300px;
  height: 335px;
  border-radius: 50px 50px 0px 0px; 
  margin: 10px 10px 0 10px;
  background-image: url("images/background2.gif");
}

#birdpics{
  border: double 5px white;
  /*border-radius: 20px 20px 0 0; */
  height: 300px;
  margin: 10px 10px 10px 0;
  width: 220px;
}

#container2 {
  width: 220px;
  height: 300px;
  margin: 10px;
  border: double 5px white;
}
.button {
  width: 100%;
  height: 40px;
  font-family: basiic;
  text-align: left;
  font-size: 15px;
}

.buttonimg {
  width: 25px;
  height: 25px;
}

#cardboard{
  background-image: url("images/cardboard.png");
  width: 100%;
  height: 100%;
  margin-top: 40px;
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
}

.speech {
  width: 150px;
  height: 100px;
  position: absolute;
  bottom: 270px;
}

.cardboardtext {
  position: absolute;
  left: 25px;
}

#paperid {
  background-color: white;
}