* {
    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;
}