main{
    border-style: double;
    background-color: rgb(231, 218, 250);
    border-color: #efa1ffdf;
  
}

nav{
    display: block;
    border-style: groove;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #670993;
}

li {
    float: left;
}

li a {
    display: block;
    color: rgb(6, 0, 7);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}


h1{
    font-family: 'Times New Roman', Times, serif;
    color: rgb(102,0,153);
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    font-style: italic;
}

h2{
    font-family: 'Times New Roman', Times, serif;
    color: rgb(199, 30, 242);
    align-items: center;
    font-size: 25px;
    font-weight: normal;
    font-style: normal;
}

h3{
    font-family: 'Times New Roman', Times, serif;
    color: rgb(205, 56, 242);
    text-align: left; 
    font-weight: normal;
    font-style: italic;
    align-self: flex-start;
}

#His{
    font-family: 'Times New Roman', Times, serif;
    font-size: 20px;
    border-style: dashed;
    border-color: #efa1ffdf;
    margin: 15pt;
    padding: 5px 15px 5px 15px;
    display: flex; 
    flex-direction: row; 
    justify-content: space-around; 
    flex-wrap: wrap;
    flex-basis: auto; 
}

#room{
    font-family: 'Times New Roman', Times, serif;
    font-size: 20px;
    border-style: dotted;
    border-color: #efa1ffdf;
    margin: 15pt;
    padding: 5px 15px 5px 15px;
    display: flex; 
    flex-direction: row; 
    justify-content: space-around; 
    flex-wrap: wrap; 
    flex-basis: auto; 
}
 

#conditions{
    font-family: 'Times New Roman', Times, serif;
    font-size: 20px;
    border-style: dashed;
    border-color: #efa1ffdf;
    margin: 15pt;
    padding: 5px 15px 5px 15px;
    display: flex; 
    flex-direction: row; 
    justify-content: space-around; 
    flex-wrap: wrap;
    flex-basis: auto; 
}

#stud{
    font-family: 'Times New Roman', Times, serif;
    font-size: 20px;
    border-style: dotted;
    border-color: #efa1ffdf;
    margin: 15pt;
    padding: 5px 15px 5px 15px;
    display: flex; 
    flex-direction: row; 
    justify-content: space-around;
    flex-wrap: wrap; 
    flex-basis: auto; 
}

img {
    margin-right: 70px;
    margin-left: 15px;
    border: 2px solid #cb2aeb93; 
    padding: 15px; 
    background: #ebd0f8; 
    margin-bottom: 10px; 
    width: 400px; 
    height: 300px;
  }

@media (max-width: 500px)  {
    img {
        width: 150px; 
        height: 150px; 
        object-fit: cover; 
        }
}

  footer{
    margin: 1px;
    text-align: center;
    border-style: dashed;
    border-color: #efa1ffdf;
    background-color: rgb(231, 218, 250);
  }

  dl {
    counter-reset: item; 
  }
  
  dl dt::before {
    content: counter(item) ". "; 
    counter-increment: item; 
  }
  
  @media (max-width: 600px) {
    #His {
      font-size: 16px; 
      margin: 10pt; 
      padding: 5px 10px; 
      flex-direction: column; 
      justify-content: flex-start; 
    }
    #room {
        font-size: 16px; 
        margin: 10pt; 
        padding: 5px 10px; 
        flex-direction: column; 
        justify-content: flex-start; 
    }
    #conditions{
        font-size: 16px; 
        margin: 10pt; 
        padding: 5px 10px; 
        flex-direction: column; 
        justify-content: flex-start; 
    }
    #stud{
        font-size: 16px; 
        margin: 10pt; 
        padding: 5px 10px; 
        flex-direction: column; 
        justify-content: flex-start; 
    }

  }

  @media (max-width: 767px) {
    nav {
        display: block;
        border-style: none;
    }

    ul {
        background-color: #8a21c5;
    }

    li {
        float: none;
        display: block;
    }

    li a {
        padding: 10px 12px;
    }
}