@import url('https://fonts.googleapis.com/css?family=Lexend&display=swap');
    /* Apply the font to elements */
    
    table {
  font-family: "Lexend", sans-serif;
  border-collapse: collapse;
  width: 60%;
}

td, th {
  border: 3px solid black;
  padding: 8px;
  background-color: white;
}


td:hover {background-color: #fec5ea;}

th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #fec5ea;
  color: white;
}

    body {
        background-color: #ADD8E6;
        color: black;
        font-family: 'Lexend', sans-serif;
        margin: 20px; 
    }


    .navbar {
  overflow: hidden;
  background-color: #000435;
  border-radius: 10px;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
  border-radius:10px;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  border-radius:10px;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: #00008B;
  border-radius:10px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #330023;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  border-radius:10px;
}

.dropdown-content a {
  float: none;
  color: #ffdbe9;
  background-color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  border-radius:10px;
}

.dropdown-content a:hover {
  background-color: #00008B;
}

.dropdown:hover .dropdown-content {
  display: block;
}


.container {
  width: 50%; /* Or a specific width */
  height: 300px; /* Or a specific height */
  display: flex; /* Or use grid or other layout methods */
  /* Add any other desired styling */
  overflow-y: auto; /* Or scroll */
  /* overflow-x: hidden;  (optional) */
  transform: scaleX(-1); /* Flip the container */
  background-color: white;
  color: black;
  font-family:'lexend', sans-serif;
  margin: 20px
}

.scrollable-content {
  width: 100%; /* Or a specific width */
  height: 200; /* Or a specific height */
  overflow-y: auto;
  overflow-x:hidden;/* Enable vertical scrolling */
   transform: scaleX(-1); /* Flip the content back */
   margin: 20px;
}
  /* Add any other desired styling */


.flex-container {
    display: flex;
    margin: 20px
}
.flex-child {
    flex: 1;
    border: 9px solid black;
    margin: 20px }
    
button {

  width:150px;

   border:2px;

   padding:3px;

   border-radius:10px;

   background-color:#000435;

   border-color:#1a43bf;

   cursor:pointer;

   font-size:20px; }
   
   /*Below is for link styling!*/

a:link {

  background-color: transparent;

  text-decoration: none;
  
  color:white;

}

a:visited {
  
  color: white;

  background-color: transparent;

  text-decoration: none;

}

a:hover {

  color: #ff3aab;

  background-color: transparent;

  text-decoration: underline;

  border-radius:50px;

}

a:active {

  color: cyan;

  background-color: transparent;

  text-decoration: underline;

}