* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;

}






header {
  position: absolute;
  top: 0;
  width: 100%;
  height: 10vh; /* 20% of the display height */
  background-color: #333; /* optional background color */
  color: #fff; /* optional text color */
  padding: 20px; /* optional padding */
  text-align: center; /* optional text alignment */

}

.mainarea {
margin-top: 20vh; /* same height as the header */
height: 80vh;

}

.logoandname {

  position: absolute;
  left: 20px; /* adjust the left margin to your liking */
  top: 50%; /* vertically center the div */
  transform: translateY(-50%); /* vertically center the div */
  border: 1px  transparent; /* add a black border */
  padding: 10px; /* add some padding to the div */
  background-color: transparent; /* optional background color */
  height: 80%;
  width: 20%;
  font-size: 300%; /* set font size to 18px */
  font-weight: bold; /* make the text bolder */
  font-size: 200%; /* set font size to 120px */
  text-align: center; /* center the text horizontally */
  display: flex; /* use flexbox to center the text vertically */
  justify-content: center; /* center the text horizontally */
  align-items: center; /* center the text vertically */

}



.links {

  position: absolute;
  top: 50%; /* vertically center the div */
  left: 60%; /* horizontally center the div */
  transform: translate(-50%, -50%); /* adjust positioning to center */
  padding: 20px; /* add some padding to the div */
  background-color: transparent; /* optional background color */
  font-size: 18px; /* set font size to 18px */
  height: 60%;
  width: 60%;
  display: flex; /* use flexbox to align items horizontally */
  justify-content:  flex-end; /* align items horizontally */
  gap: 80px;



}

.links div {
cursor: pointer;
font-weight: 100;
font-size: larger;


}

body {
  background-color:  #0B0B0B
}

.mainarea {
  margin-top: 15vh; /* same height as the header */
  height: 80vh;
  background-color: #0B0B0B;
  ;
}

.mainarea {
display: flex;
justify-content: space-between;
height: 80vh;
}

.papers {
flex-grow: 1;
border-radius: 10px;
transition: transform 0.2s ease-in-out;
height: 95%;
width: 45%;
background-color: #0B0B0B;
}

.left-div {
flex-grow: 1;
border-radius: 10px;
transition: transform 0.2s ease-in-out;
height: 95%;
width: 45%;
color: white;
background-color: #202020;
margin-right: 20px;
margin-left: 20px;
text-align: center;
line-height: 100px;

}

.left-div:hover {
transform: scale(1.05);
}

.papers {
display: flex;
flex-direction: column;
}

.topical-past-papers, .past-papers {
  flex-grow: 1; /* make each div take up an equal amount of space */
  border-radius: 10px;
  transition: transform 0.2s ease-in-out;
  color: white;
  background-color: #202020;
  margin-bottom: 20px;
  margin-right: 20px;
  text-align: center;
  line-height: 100px; /* vertically center the text */

  
}

.topical-past-papers:hover, .past-papers:hover {
  transform: scale(1.05); /* enlarge the div when the cursor hovers over it */
}

.left-div, .papers {
font-size: 1.5em; /* increase font size to 1.5 times the parent element's font size */
font-weight: bolder;

}

.topical-past-papers, .past-papers {
font-size: 1.2rem; /* increase font size to 1.2 times the root element's font size */
font-weight: bolder;

}


.topical-past-papers, .past-papers, .left-div {
overflow: hidden;
}