body{
   background-image: url("Images/yellowbrownbear.gif");
  background-repeat: repeat;
   background-size: 60px;
}


.main-container {
max-width: 980px;
  height:auto;
      margin: 30px auto;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 250px auto;
}

::selection {
  color: #fcdea1;
  background: #cfab84;
}

.box {
  background-color: white ;
  border-width:7px;
border-style:solid;
border-image: url("Borders/Chocolate.gif") 9 fill round;   
  }



.BoopiProfileBox {

  grid-column: 1;
  grid-row: 1;
  z-index: 1000;

}

.BoopiProfile{
                   /*(c) baeyhkun*/
border-width: 7px; 
border-style: solid;
border-image: url("Borders/whitebrown.gif") 7 fill round;    
   padding:10px;
   border-radius:10px;

}

.AvatarPFP{
  display: block;
  margin-left: auto;
  margin-right: auto;
  height:180px
}

.BoopiName{
  text-align: center;
  font-family:KristenIT;
  color:#fcdea1 ;
  filter:drop-shadow( 0 3px #90704d) drop-shadow( 2px 0 #cfab84) drop-shadow( 0 -1px #cfab84) drop-shadow( -1px 0 #725636) drop-shadow( 0 3px white) drop-shadow( 3px 0 white) drop-shadow( 0 -3px white) drop-shadow( -3px 0 white) ;
  font-size:20px;
}


.BoopiDescription{
  text-align:center;
  padding-top:5px;
  font-family:GaeguBold;
  color:#725636 ;
}

.AboutMeYapBox {
  grid-column: 2 / 4; 
  grid-row: 1;
  width:710px;
}

.AboutMeYap{
                     /*(c) baeyhkun*/
border-width: 7px; 
border-style: solid;
border-image: url("Borders/whitebrown.gif") 7 fill round;  
  justify-content: space-between;
height:274px;
}


.YapYap{
  font-family: GaeguBold ;
  color:#725636;
  font-size:20px;
    text-align: cute;
    display: flex;
  
}

.NarukamiPom{
  margin-top:22px;
  margin-right:20px;
}

.TextYapYap{
  margin-top:45px;
  margin-left:30px ;
}

.IdentityButtons{
  text-align: center;
}

.MyIntrestsBox {
  grid-column: 1;
  grid-row: 2 / 4;
  height:451px;
}

.MyIntrests{
                       /*(c) baeyhkun*/
border-width: 7px; 
border-style: solid;
border-image: url("Borders/whitebrown.gif") 7 fill round;  
 height:440px;
 overflow: hidden;
      overflow: scroll;
      overflow-x: hidden;
}

.IntrestsText{
  font-family:KristenIT;
  color:#fcdea1 ;
  filter:drop-shadow( 0 3px #90704d) drop-shadow( 2px 0 #cfab84) drop-shadow( 0 -1px #cfab84) drop-shadow( -1px 0 #725636) drop-shadow( 0 3px white) drop-shadow( 3px 0 white) drop-shadow( 0 -3px white) drop-shadow( -3px 0 white) ;
font-size:20px;
}

.IntrestsGenre{
    font-family:KristenIT;
    color:#725636 ;
    background-color:#fdf3e3 ;
    display: inline-block;
}

.IntrestsList {
      font-family:KristenIT;
    color:#725636 ;
}

.MyIntrests::-webkit-scrollbar {
  width:8px;
  background-color:#fcdea1;
}

.MyIntrests::-webkit-scrollbar-thumb {
  background-color:#cfab84;
  border-radius:5px;
}

.QuizzResultsBox {

  grid-column: 2 / 4;
  grid-row: 3;
  width:710px;
  height:120px;
  position:relative;
  bottom:5px;
}

.QuizzResultsText{
    z-index:1999;
  position:absolute;
  font-family:KristenIT;
  color:#fcdea1 ;
  filter:drop-shadow( 0 3px #90704d) drop-shadow( 2px 0 #cfab84) drop-shadow( 0 -1px #cfab84) drop-shadow( -1px 0 #725636) drop-shadow( 0 3px white) drop-shadow( 3px 0 white) drop-shadow( 0 -3px white) drop-shadow( -3px 0 white) ;
  font-size:22px;
}

.QuizzResults {
                         /*(c) baeyhkun*/
border-width: 7px; 
border-style: solid;
border-image: url("Borders/whitebrown.gif") 7 fill round;  
display: flex; 
 overflow: hidden;
  overflow-x: auto; 
  white-space: nowrap; 
  padding-bottom:5px;
  padding-left:5px;
  padding-right:5px;
 height:100px;
}

.QuizzResults::-webkit-scrollbar {
  height:8px;
  background-color:#fcdea1;
}

.QuizzResults::-webkit-scrollbar-thumb {
  background-color:#cfab84;
  border-radius:5px;
}


.KinlistBox { 
  grid-column: 2;
  grid-row: 2;
  width: 350px;
  height:315px;
}

.KinList{
border-width: 7px; 
border-style: solid;
border-image: url("Borders/whitebrown.gif") 7 fill round;  
overflow: hidden;
      overflow: scroll;
      overflow-x: hidden;
 height:300px;
        
}

.KinList::-webkit-scrollbar {
  width:8px;
  background-color:#fcdea1;
}

.KinList::-webkit-scrollbar-thumb {
  background-color:#cfab84;
  border-radius:5px;
}

.KinListText{
    z-index:1999;
  position:absolute;
  font-family:KristenIT;
  color:#fcdea1 ;
  filter:drop-shadow( 0 3px #90704d) drop-shadow( 2px 0 #cfab84) drop-shadow( 0 -1px #cfab84) drop-shadow( -1px 0 #725636) drop-shadow( 0 3px white) drop-shadow( 3px 0 white) drop-shadow( 0 -3px white) drop-shadow( -3px 0 white) ;
  font-size:22px;
  

}



.KinListImages{
 text-align: center;
 padding:15px;

}

.Kinnie{
border-width: 3px; 
border-style: solid;
border-image: url("Borders/BrownnCutieBorder.png") 100 fill round;  
}



.SoMeBox {
  grid-column: 3;
  grid-row: 2;
    width: 340px;
  height:315px;
  position: relative;
  right:3px;
}

.SoMeText {
      z-index:1999;
  position:absolute;
  font-family:KristenIT;
  color:#fcdea1 ;
  filter:drop-shadow( 0 3px #90704d) drop-shadow( 2px 0 #cfab84) drop-shadow( 0 -1px #cfab84) drop-shadow( -1px 0 #725636) drop-shadow( 0 3px white) drop-shadow( 3px 0 white) drop-shadow( 0 -3px white) drop-shadow( -3px 0 white) ;
  font-size:22px;
  left:200px;
}

.SoMe{
  border-width: 7px; 
border-style: solid;
border-image: url("Borders/whitebrown.gif") 7 fill round;  
overflow: hidden;
      overflow: scroll;
      overflow-x: hidden;
 height:300px;
}

.PinterestText{
  font-family: KristenIT;
  color:#725636;
  font-size:15px;
  text-align: center;
}

.SoMe::-webkit-scrollbar {
  width:8px;
  background-color:#fcdea1;
}

.SoMe::-webkit-scrollbar-thumb {
  background-color:#cfab84;
  border-radius:5px;
}

.SoMePictures{
  margin-top: 10px;
}

/* ALL THE FONTS ! */
@font-face {
  font-family: 'BabyDoll';
  src: url('Fonts/Baby Doll.ttf');
}

@font-face {
  font-family: 'GaeguBold';
  src: url('Fonts/Gaegu-Bold.ttf');
}

@font-face {
  font-family: 'GaeguLight';
  src: url('Fonts/Gaegu-Light.ttf');
}

@font-face {
  font-family: 'GaeguRegular';
  src: url('Fonts/Gaegu-Regular.ttf');
}

@font-face {
  font-family: 'InternetFriends';
  src: url('Fonts/Internet Friends.ttf');
}

@font-face {
  font-family: 'Minecraft';
  src: url('Fonts/minecraftfont.ttf');
}

@font-face {
  font-family: 'KristenIT';
  src: url('Fonts/KristenITCCyrillic.ttf');
}

@font-face {
  font-family: 'Daruma';
  src: url('Fonts/DarumaDropOne-Regular.ttf');
}