* {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

  body {
    background-color: #f6f6f6;
  }
  
  .container {
    margin: 0;
    padding: 0;
  }
  
  .context {
    text-decoration: none;
    border-width: 4px;
    border-color: blue transparent blue transparent;
    border-style: solid;
    background: white;
    padding: 15px 10px;
    background-image: url('/images/background1.jpeg');
    background-size: cover;
    background-position: center;
  }
  
  #main {
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
  }
  
  #main li {
    margin: 0 15px;
    font-weight: 750;
  }
  
  #main li a {
    text-decoration: none;
    color: black;
    font-size: 20px;
    transition: color 0.3s, text-decoration 0.3s;
  }
  
  #main li a:hover{
       color: cornflowerblue;
    text-decoration: underline 3px yellow;
  }
  .context #main #active {
    color: cornflowerblue;
    text-decoration: underline 3px yellow;
      text-underline-offset: 3px;
  }

/* body {
    background-color: #f6f6f6;
}

.context {
    text-decoration: none;
    border-width: 4px;
    border-color: blue transparent blue transparent;  
    border-style: solid;
    background: white;
    padding: 15px;
    padding-left: 10px;
    background-image: url('./images/background1.jpeg');
}

  #main {
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
  }
  
  #main li {
    margin: 0 15px;
    font-weight: 750;
  }
  
  #main li a {
    text-decoration: none;
    color: black;
    font-size: 20px;
    transition: color 0.3s, text-decoration 0.3s;
  }
  
  #main li a:hover,
  #active {
    color: cornflowerblue;
    text-decoration: underline 3px yellow;
  } */
  
/* .context ul {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 5px;
    text-decoration: none;
    list-style: none;
}

.context ul li {
    margin-left: 30px;
    padding-left: 10px;
    color: black;
    font-weight: 750;
}

.context ul li a {
    text-decoration: none;
    color: black;
    text-decoration: underline;
    font-size: 20px;
}

.context ul li a:hover {
    color: cornflowerblue; 
    font-weight: 700;
    border-radius: 10px;
    text-decoration: 5px underline rgb(238, 227, 7);
    text-underline-offset: 16.7px;
}

#active {
    color: cornflowerblue;
    text-decoration: 3px underline yellow;
    text-underline-offset: 3px;
} */

.container {
    position: relative;
    display: flex;
    background-color: rgb(153, 151, 151);
}

.container .left {
    position: fixed;
    height: 80vw;
    width: 16vw;
    background-color: rgb(153, 151, 151);
    padding: 1% 1%;
}

.container .right {
    background-color: #f6f6f6;
    margin-left: 18vw;
}

.container .left ul {
    list-style: none;
    cursor: pointer;
}

.container .left ul li {
    font-size: 17px;
    color: white;
    padding-top: 10px;
}

.container .left ul li:hover {
    text-decoration: 2px solid yellow underline;
    text-underline-offset: 2px;
}

#border2 {
    margin-left: 4vh;
    font-size: 25px;
}

.col-1 {
    margin-left: 4vh;
    margin-right: 2vh;
}

.col-1 h2 {
    color: black;
    font-size: 21px;
    font-weight: normal;
}

.col-1 b {
    font-size: 18px;
}

.col-1 p {
    font-size: 17px;
    color: rgb(85, 84, 84);
    text-align: justify;
}

.col-1 p a {
    color: rgb(85, 84, 84);
    text-decoration: none;
}

.col-1 #date {
    color: black;
    font-size: 18px;
}

.col-1 #h-1 {
    font-size: 18px;
    font-weight: 700;
}

.container .left #pdf {
    list-style: none;
    margin-top: 8rem;
}

#pdf li {
    list-style: none;
}

#pdf li a {
    list-style: none;
    color: white;
}

.col-1 p i a {
    font-size: 16px;
    text-decoration: 1px solid cornflowerblue underline;
    text-underline-offset: 2px;
}

.col-1 p i a:hover {
    font-size: 18px;
    transition: .3s ease;
}

.col-1 #line {
    font-size: 16px;
    text-decoration: 1px solid cornflowerblue underline;
    text-underline-offset: 2px;
}

.col-1 #line:hover {
    font-size: 18px;
    transition: .3s ease;
}

#line {
    color: cornflowerblue;
    font-size: 16px;
    text-decoration: 1px cornflowerblue underline;
    text-underline-offset: 2px;
}

#line:hover {
    font-size: 18px;
    transition: .3s ease;
}

@media (max-width: 768px) {
     #main li{
        font-size: 16px;
      margin: 0px 8px;
    }
    .container {
        flex-direction: column;
    }

    .container .left {
        position: static;
        width: 90%;
        height: auto;
    }

    .container .right {
        margin-left: 0;
    }
}

@media (max-width: 480px) {

    #main li{
        font-size: 16px;
      margin: 0px 8px;
    }
    
    .container .left, .container .right {
        padding: 10px;
    }
   .conatiner .left{
        display:flex;
       align-items:center;
        justify-content:center;
   }
    .container .left ul li{
        display:none;
    }
    .container .left #pdf{
        display:flex;
        height:10px;
        margin-top:0px;
        margin-bottom:5px;
        justify-content:center;
       
       
    }
    .col-1 {
        margin-left: 2vh;
        margin-right: 2vh;
    }

    #border2 {
        margin-left:16px;
        font-size: 22px;
    }

    .col-1 h2 {
        font-size: 19px;
    }

    .col-1 b {
        font-size: 16px;
    }

    .col-1 p {
        font-size: 15px;
    }

    .col-1 #date, .col-1 #h-1 {
        font-size: 16px;
    }

  
}