body {
   display: grid;
   place-items: center; 
    background-image: url(https://kamifubukiseries.neocities.org/photos/backgrounds/flowers%207%20light%20yellow.png);
}

#content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  max-width:1000px;
  min-width: 1000px;
  padding: 2px;
   box-sizing: border-box;
}

#mass-holder {
 box-sizing: border-box;
 width: 100%;
 background-image: url(https://kamifubukiseries.neocities.org/photos/backgrounds/redpop.png);
 border: 4px ridge;
 border-color: #B32320;
 border-radius:15px;
 overflow: hidden; 
 padding: 15px;
}

a {
 text-decoration: none;
 color: inherit;
}

span {
 font-family: Times New Roman;  
}

 .responsive-flex {
   width: 100%;
  display: flex;
  flex-direction: row;
   box-sizing: border-box;
   gap: 10px;
   height: 900px;
 }

.rfi {
  box-sizing: border-box;
 background: #ffd561;
background: linear-gradient(0deg, rgba(255, 213, 97, 1) 0%, rgba(255, 213, 97, 1) 44%, rgba(255, 226, 145, 1) 100%);
border: 9px double;
border-color:#C72A28 ;
 border-radius:20px;
 height: 100%;
}

.icon-and-buttons-div {
  box-sizing: border-box;
 width: 30%; 
 display: flex;
 flex-direction: column;
 gap: 10px;
 padding: 15px;
 height: 100%;
}

.switchable-div {
  box-sizing: border-box;
 width: 70%; 
 height: 100%;
 background-color: red;
}

.icon-div {
  box-sizing: border-box;
padding: 3px;
padding-bottom: 0;
padding-top: 0;
}

.icon-div img {
  box-sizing: border-box;
 width: 100%; 
 border-radius:15px;
  border: 3px solid;
  border-color: #BA2825;
}

.header-div {
 box-sizing: border-box;
 text-align: center;
 padding:15px;
 font-size: 25px;
 border-radius:20px;
 background: #db312e;
background: linear-gradient(0deg, rgba(219, 49, 46, 1) 0%, rgba(219, 49, 46, 1) 44%, rgba(247, 67, 64, 1) 100%);
 border: 3px outset;
 border-color: #BA2825;
color: #FFF1BA;
} 

.option-button-holder-div {
 box-sizing: border-box; 
 display: flex;
 flex-direction: column;
 gap: 10px;
 height: 100%;
}

.option-button-holder-div a {
  box-sizing: border-box;
 display: flex;
 width: 100%;
 height: 20%;
}


.option-button {
 box-sizing: border-box; 
 border-radius:20px;
 width: 100%;
 
}

.standard-opt {
 height: 20%;  
}

.link-opt {
 height: 100%; 
}

button:hover {
 cursor: pointer; 
}

button {
background: #F74340;
background: linear-gradient(0deg, rgba(247, 67, 64, 1) 0%, rgba(247, 67, 64, 1) 44%, rgba(255, 100, 97, 1) 100%);
border: 3px solid;
border-color: #A32A2A;
font-family: times;
font-weight: 100;
font-size: 22px;
color: #FFF6B0;
}

.tab-content  {
  box-sizing:border-box;
  width: 100%;
  height: 100%;
}

.stuff {
  box-sizing: border-box; 
 display: flex;
 flex-direction: column;
 gap: 10px;
 height: 100%;
 
 
}

.bottom-holder {
  box-sizing: border-box; 
border: 3px outset;
 border-color: #BA2825;
background: #FF5D47;
background: linear-gradient(0deg, rgba(255, 93, 71, 1) 0%, rgba(255, 93, 71, 1) 44%, rgba(255, 113, 94, 1) 100%);
height: 100%;
overflow: auto;
border-radius:20px;
 display: flex;
 flex-direction: column;
 gap: 5px;
 padding: 5px;
}

.responsive-flex-standard {
   width: 100%;
  display: flex;
  flex-direction: row;
   box-sizing: border-box;
   gap: 5px;
  
 }
 
 .height-35 {
  box-sizing: border-box; 
  height: 35%; 
 }
 
 .traits-box {
   box-sizing: border-box;
  width: 60%; 
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
 }
 
.trait-div {
  box-sizing: border-box;
  width: 100%;
 background: #ffe791;
background: linear-gradient(0deg, rgba(255, 231, 145, 1) 0%, rgba(255, 231, 145, 1) 44%, rgba(255, 242, 194, 1) 100%);
border: 3px solid;
border-color: #C72A28;
color:#632e15;
 height: 25%;
 display: flex;
 align-items: center;
 border-radius: 15px;
 padding: 10px;
 font-size:19px;
}


.about-box {
 box-sizing: border-box;
 width: 100%;
 height: 30%;
 background: #fff6d6;
background: linear-gradient(0deg, rgba(255, 246, 214, 1) 0%, rgba(255, 246, 214, 1) 44%, rgba(255, 250, 232, 1) 100%);
 border-radius: 15px;
 border: 3px solid;
 border-color: #C72A28;
 color: #632e15;
 padding: 10px;
 overflow: auto;
  font-size:19px;
}

.img-box {
  width: 40%;
  height: 100%;
}

.img-box img {
   box-sizing: border-box;
  width: 100%;
  height: 100%;
  object-fit: cover;
   border-radius: 15px;
 border: 3px solid;
 border-color: #C72A28;
} 

.likes-dislikes-box {
 box-sizing: border-box;
background: #ffe791;
background: linear-gradient(0deg, rgba(255, 231, 145, 1) 0%, rgba(255, 231, 145, 1) 44%, rgba(255, 242, 194, 1) 100%);
border: 3px solid;
border-color: #C72A28;
color:#632e15;
 width: 50%;
 overflow: auto;
 border-radius: 15px;
 padding: 10px;
 display: flex;
 flex-direction: column;
 gap: 10px;
}

.ld-header {
  box-sizing: border-box;
  font-size: 25px;
}

.ld-list {
  box-sizing: border-box;
  font-size: 20px;
}

.relationship-box {
  box-sizing: border-box;
 width: 100%;
 height: 260px;
 min-height: 260px;
  border-radius: 15px;
 display:flex;
 flex-direction: row;
 gap: 10px;
 padding: 10px;
 background: #ffe791;
background: linear-gradient(0deg, rgba(255, 231, 145, 1) 0%, rgba(255, 231, 145, 1) 44%, rgba(255, 242, 194, 1) 100%);
border: 3px solid;
border-color:#C72A28;
}

.relation-icon {
  box-sizing: border-box;
  width: 35%;
  height: 100%;
}

.relation-icon img {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  object-fit: cover;
   border-radius:15px;
  border: 3px solid;
  border-color:  #C72A28;
}

.relation-textbox-and-name {
  box-sizing: border-box;
   width: 65%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.relation-name {
  box-sizing: border-box;
 width: 100%;
 padding: 10px;
 font-size: 22px;
  border-radius: 15px;
background: #db312e;
background: linear-gradient(0deg, rgba(219, 49, 46, 1) 0%, rgba(219, 49, 46, 1) 44%, rgba(247, 67, 64, 1) 100%);
 border: 3px outset;
 border-color: #BA2825;
color: #FFF1BA
}

.relation-textbox {
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  height: 100%;
  background: #fff6d6;
background: linear-gradient(0deg, rgba(255, 246, 214, 1) 0%, rgba(255, 246, 214, 1) 44%, rgba(255, 250, 232, 1) 100%);
  overflow: auto;
  font-size: 18px;
   border-radius: 15px;
 border: 3px solid;
 border-color: #C72A28;
 color: #632e15;
}


.trivia-box {
  padding: 10px;
 box-sizing: border-box;
 width: 100%;
 height: 40%;
  background: #fff6d6;
background: linear-gradient(0deg, rgba(255, 246, 214, 1) 0%, rgba(255, 246, 214, 1) 44%, rgba(255, 250, 232, 1) 100%);
border: 3px solid;
border-color: #C72A28;
 border-radius: 15px;
  display: flex;
 flex-direction: column;
 gap: 10px;
 color:#632e15;
 overflow: auto;
}

.extra-box {
  padding: 10px;
  border-radius: 15px;
   box-sizing: border-box;
 width: 100%;
 height: 20%;
 background: #ffe791;
background: linear-gradient(0deg, rgba(255, 231, 145, 1) 0%, rgba(255, 231, 145, 1) 44%, rgba(255, 242, 194, 1) 100%);
border: 3px solid;
border-color:#C72A28;
 display: flex;
 flex-direction: column;
 gap: 10px;
 overflow: auto;
 color:#632e15;
}

audio {
width: 100%;
} 

.extra-button-box {
   box-sizing: border-box;
 width:100%;
 display: flex;
 align-items: center;
 height: 100%;
}

.extra-button-box a {
  box-sizing: border-box;
 display: flex;
 width: 100%;
 height: 100%;
}


.link-button {
 width: 100%;
 height: 100%;
 border-radius:20px;
 font-size: 23px;
}


/* IMPORTANT FOR JAVASCRIPT!11!1!!! */

.content-div-thing {
  width: 100%;
 padding: 15px;
 box-sizing: border-box; 
 height: 100%;
} 

.active {
  display:block;
  }
            
  .inactive {
 display:none;
}

.tabcontent {
            animation: fadeEffect 1s;
            }

            @keyframes fadeEffect {
             from {opacity: 0;}
                to {opacity: 1;}
            }
            


/* IMPORTANT FOR JAVASCRIPT!11!1!!! */

 @media screen and (max-width: 768px) {
  
   #content {
       width: 100%; 
       min-width: 0;
       padding: 0;
      }
      
      #mass-holder {
       width: 100%; 
       max-height: none;
       min-height: 0;
       height: auto;
       padding: 8px;
      }
      
      .header-div {
       font-size: 27px; 
      }
      
      .switchable-div {
       padding: 0; 
      }
      
      .responsive-flex {
       flex-direction: column; 
       height: auto;
      } 
      
      .icon-and-buttons-div {
        width: 100%;
      }

      .switchable-div {
       width: 100%;
      }
      
      .responsive-flex-standard {
      flex-direction: column;
      }
      
      .about-box {
       height: 300px; 
       font-size: 20px;
      }
      
      .traits-box {
       width: 100%;
      }
      
      .trait-div {
       font-size: 20px; 
      }
      
      .img-box {
       width: 100%; 
      }
      
      .likes-dislikes-box {
       width: 100%; 
      }
      
      .option-button {
       height: 70px; 
      }
      
      .content-div-thing {
      padding: 8px;
      }
      
      .trivia-box {
        overflow: hidden;
      }
      
      .extra-box {
       height: 150px; 
      }
      
      
     .relationship-box {
      flex-direction: column; 
      height: auto;
     }
     
     .relation-textbox {
      height: 300px;
      font-size: 20px;
     
     }
     
     .relation-icon {
      width: 100%; 
     }
     
     .relation-name {
      font-size: 24px; 
     }
     
     .relation-textbox-and-name {
      width: 100%; 
     }
      
 }