@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

.open-sans{
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-variation-settings:"wdth" 100;
}

.material-symbols-outlined {
    color: #ff00a6;
    margin-right: 3px;
    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24
    
}
 

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
  
  /* Body styles */
body {
    font-size: 100%; 
    font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    background-color: #e0e0e0;
   
}
  
  /* Page container */
article.page {
    max-width: 90%;
    margin: 0 auto; 
    background-color:  #d1e8e2;
    border: 2px solid black;
}
  
  /* Header styles */
header {
    background-color: #244855;
    color: whitesmoke;
    text-align: center;
    padding: 20px 0;
}
  
h1{
    margin: 0;
}
  
nav {
    background-color: #90aead;
    text-align: center;
}
  
nav ul {
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0;
    justify-content: center;
}
  
nav li {
    display: flex;
    margin: 0 2em; 
    align-items: center;
    
    
}


  
nav a {
    color: #F7F5EE;
    text-decoration: none; 
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 0.5em;
}
  
li a:hover:not(.active) {
      background-color: #1e90ff; 
}
.active{
     background-color:#244855
}
  /* Content styles */
.content {
    overflow: hidden; 
}
  
.content_left, .content_right {
    background-color: white;
    float: left; 
    width: 45%;
    padding: 1em; 
    border: 2px solid #ff00a6; 
    border-radius: 20px;
    margin: 2%; 
}
  
h2,h3 {
    color: #800080;
    padding-left: 5px; 
}
  
p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
}
  
.content_right {
    float: right; 
  }
  
img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}
  
  
footer {
    background-color: #90aead; 
    text-align: center; 
    margin: 0;
    padding: 5px 0;
    width: 100%; 
    bottom: 0;
    font-size: 14px; 
}
  
footer p{
    margin:0;
}