*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
 
body{
margin: 0;
background-color: white;
color: #5c3443;
font-family: "IBM Plex Serif";
padding: 10px;
}

 
.container{
display: flex;
flex-direction: row;

height: 100%;
}
 
.block-1{
flex-grow: 1.5;
flex-basis: 0;
padding:30px;
display: flex;
flex-direction: column;
row-gap: 10px;
overflow-y:scroll;
}
 
.block-2{
flex-grow: 8.5;
flex-basis: 0;
height:100%;
}
 
.block-1 ul{
padding-left: 2.5em;
}
 
.content{
display: flex;
flex-direction: column;
height:100%;

}
 
.area{
padding: 1rem;
display: flex;
flex-direction: column;
row-gap: 1rem;
height:max-content;
}

 
@media(max-width:480px){
.container{
flex-direction: column;
}
.block-1{
height: auto;
text-align: center;
}

.block-1 ul, li{
display: inline;
padding: 0;
}
.block-1 li{
margin-left: 5px;
}
.title{
text-align: center;
font-size: 44px;
}
}

 
::-webkit-scrollbar{
width: 6px; 
}
 
::-webkit-scrollbar-track{
background-color: transparent;
}
 
::-webkit-scrollbar-thumb{
background-color: #C36B8D;
}
 
#credit{
font-size: 12px;
position: fixed;
bottom: 0;
right: 0;
}

@font-face {
    font-family: "IBM Plex Serif";
    src: url(/assets/fonts/ibmplexserif/IBMPlexSerif-Thin.woff2) format("woff2");
    font-weight: 100;
    font-style: normal;
}


a {

    color:#e240a4;
}

/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: #dfafc0 #ffffff;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 2px;
  }

  *::-webkit-scrollbar-track {
    background: #ffffff;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #dfafc0;
    border-radius: 10px;
    border: 3px none #ffffff;
  }

  .scrip {
    width: 100%;
      height: 100%; /* Now 100% of .iframe-container's height */
      border: none; /* Optional: remove default border */
    }


  iframe {

    width: 690px;
    padding:5px;
    height: 100vh;
    border: none;
    overflow-y:scroll;
    display:block;
}