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

}

body {
    
      background-image: linear-gradient(to bottom, #660000, #000066);
      background-attachment: fixed;
      background-size: 100% 100%;
    
}

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;


}



.subjects {
    height: 80%;
    width: 80%;
    margin: 0 auto;
    background-color: #1e1e1e;
    border-radius: 50px;

}

.flexcontainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 20px;;
    border-color: #000000;
    border-width: 5px;
    border-style: solid;
    height: 100%;
    border-radius: 50px
  }

#header {
    text-align: center;
    width: 90%;
    height: 5px;
    font-weight: bolder;
    font-size: larger;
    color: white;
}
  

.subject {
    height: 20%;
    width: 45%;
    margin: 10px;
    /* padding: 20px; */
    background-color: #292929;
    border: 1px solid #ccc;;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    border-color: #000000;
    color: white;


  }