body {
   display: grid;
   place-items: center; 
    background-image: url(https://kamifubukiseries.neocities.org/photos/backgrounds/colorpop%20green.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/flowers%207%20light%20blue.png);
 border: 4px ridge;
 border-color: #365F9E;
 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: #E1F2B1;
background: linear-gradient(0deg, rgba(225, 242, 177, 1) 0%, rgba(225, 242, 177, 1) 44%, rgba(241, 250, 215, 1) 100%);
border: 7px double;
border-color:#456FAD;
 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: 2px solid;
   border-color: #1D6ACF;
}

.header-div {
 box-sizing: border-box;
 text-align: center;
 padding:15px;
 font-size: 25px;
 border-radius:20px;
background: #5997DE;
background: linear-gradient(0deg, rgba(89, 151, 222, 1) 0%, rgba(89, 151, 222, 1) 44%, rgba(115, 173, 240, 1) 100%);
 border: 2px outset;
 border-color: #1D6ACF;
color: #E6F2FF;
} 

.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: #376191;
background: linear-gradient(0deg, rgba(55, 97, 145, 1) 0%, rgba(55, 97, 145, 1) 44%, rgba(81, 134, 194, 1) 100%);
border: 2px solid;
border-color: #1E344F;
font-family: times;
font-weight: 100;
font-size: 22px;
color: #E0EFFF;
}

.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: 2px outset;
 border-color: #487D45;
background: #a1d166;
background: linear-gradient(0deg, rgba(161, 209, 102, 1) 0%, rgba(161, 209, 102, 1) 44%, rgba(185, 227, 134, 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: #e4f2bd;
background: linear-gradient(0deg, rgba(228, 242, 189, 1) 0%, rgba(228, 242, 189, 1) 44%, rgba(244, 247, 228, 1) 100%);
border: 2px solid;
border-color: #487D45;
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: 2px solid;
 border-color: #487D45;
 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: 2px solid;
 border-color: #487D45;
} 

.likes-dislikes-box {
 box-sizing: border-box;
background: #e4f2bd;
background: linear-gradient(0deg, rgba(228, 242, 189, 1) 0%, rgba(228, 242, 189, 1) 44%, rgba(244, 247, 228, 1) 100%);
border: 2px solid;
border-color: #487D45;
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: #e4f2bd;
background: linear-gradient(0deg, rgba(228, 242, 189, 1) 0%, rgba(228, 242, 189, 1) 44%, rgba(244, 247, 228, 1) 100%);
border: 2px solid;
border-color:#487D45;
}

.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: 2px solid;
  border-color:  #487D45;
}

.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: #5997DE;
background: linear-gradient(0deg, rgba(89, 151, 222, 1) 0%, rgba(89, 151, 222, 1) 44%, rgba(115, 173, 240, 1) 100%);
 border: 2px outset;
 border-color: #1D6ACF;
color: #E6F2FF;
}

.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: 2px solid;
 border-color: #487D45;
 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: 2px solid;
border-color: #487D45;
 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: #e4f2bd;
background: linear-gradient(0deg, rgba(228, 242, 189, 1) 0%, rgba(228, 242, 189, 1) 44%, rgba(244, 247, 228, 1) 100%);
border: 2px solid;
border-color:#487D45;
 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%; 
     }
      
 }