body {
 background: orange;
   display: grid;
   place-items: center; 
}

#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: #8f8fb8;
background: linear-gradient(0deg, rgba(143, 143, 184, 1) 0%, rgba(109, 109, 181, 1) 50%, rgba(109, 109, 181, 1) 100%);
 border: 2px inset;
 border-color: #4B67A3;
 border-radius:15px;
 overflow: hidden; 
 padding: 15px;
}

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

.rfi {
  box-sizing: border-box;
 background-color: pink;
 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: 5px;
padding-bottom: 0;
padding-top: 0;
}

.icon-div img {
  box-sizing: border-box;
 width: 100%; 
 border-radius:20px;
  border: 3px outset;
}

.header-div {
 box-sizing: border-box;
 text-align: center;
 background-color: white;
 padding:15px;
 font-size: 22px;
 border-radius:20px;
 border: 3px outset;
} 

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

.option-button {
 box-sizing: border-box; 
 font-size: 20px;
 height: 20%;
 border-radius:20px;
}

button:hover {
 cursor: pointer; 
}

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

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

.bottom-holder {
  box-sizing: border-box; 
background-color: white;
height: 100%;
border-radius:20px;
 border: 3px outset;
 padding: 15px;
}

/* 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!!! */