.main_page{
  #background-color: #457b9dff;
  background-color: white;
  width: 100%;
  height: 100%;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-size: 1.5em;
    color: #000000;
    background: white;
    margin: auto;
}

.header-container {
    --topbar-height-scale: 2;
    display: grid;
    grid-template-columns: 22% minmax(0, 78%);
    align-items: stretch;
    border-bottom: 1px solid #F2F2F2;
    margin: 0;
    padding: 0;
    background: #e63946ff;
    line-height: 1.2;
}

.logo {
    margin: 0;
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 0;
    background: #e63946ff;
}

.logo a {
    font-size: clamp(1.2rem, 1.75vw, 1.95rem);
    color: #f1faeeff;
    font-weight: bold;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: calc(0.65rem * var(--topbar-height-scale)) 5%;
    line-height: 1;
    white-space: nowrap;
}

.logo a:hover {
  text-decoration: none;
}

.logo .nav-shell-link,
.logo .nav-shell-link:visited,
.logo .nav-shell-link:hover,
.logo .nav-shell-link:focus,
.logo .nav-shell-link:active,
.logo .nav-shell-link.is-current {
        color: #f1faeeff;
        background-color: transparent;
        text-decoration: none;
}

.nav-shell-link {
    position: relative;
    transition: background-color 120ms ease, opacity 120ms ease;
}

.nav-shell-link.is-current {
    background-color: rgba(255, 255, 255, 0.12);
}

.top-nav {
    margin: 0;
    display: flex;
    align-items: stretch;
    min-width: 0;
}

.top-nav-list {
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.top-nav-item {
    display: flex;
    min-width: 0;
}

.top-nav-item a {
    text-decoration: none;
    color: #f1faeeff;
    padding: calc(0.9rem * var(--topbar-height-scale)) 0.35rem;
    font-weight: bold;
    font-size: clamp(0.86rem, 1.05vw, 1.3rem);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}

.top-nav-item a:hover {
    background-color: rgba(46, 46, 46, 0.222);
    text-decoration: none;
    color: #ffffff;
    font-weight: bold;
}

@media screen and (max-width: 900px) {

  .logo {
      border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  }

  .header-container {
      grid-template-columns: 1fr;
  }

  .top-nav-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .top-nav-item a {
      justify-content: flex-start;
      text-align: left;
      padding: calc(0.8rem * var(--topbar-height-scale)) 1.2rem;
  }

  .logo a {
      padding: calc(0.75rem * var(--topbar-height-scale)) 5%;
  }
}

@media screen and (max-width: 560px) {
  .top-nav-list {
      grid-template-columns: 1fr;
  }
}

@media screen and (max-width : 1150px) and (min-width: 901px) {
  .top-nav-item a {
      font-size: 0.98rem;
            padding: calc(0.9rem * var(--topbar-height-scale)) 0.2rem;
  }
}

/*@media screen and (min-width : 1300px) {
    body {
        max-width: 1600px;
        margin: auto;
    }
}*/
  

.menu ul{
    border: 1px solid rgb(212, 20, 20);
    text-align: center;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.menu li{
    font-size: 16px;
    flex: 1;
}

.menu li a{
    text-decoration: none;
    color: #f1faeeff;
    padding: 20px 5px;
    display: inline-block;
    width: 100%;
    text-align: center;
    background: #e63946ff;
}

.menu li a:hover{
    background-color: rgba(46, 46, 46, 0.322);
    text-decoration: none;
}

.menu .logo a{
    font-size: 20px;
    padding: 17px 5px;
}

@media all and (max-width: 1000px) {
   .menu ul {
      flex-wrap: wrap;
   }
   
   .menu li {
      flex: 1 1 50%;
   }
}

@media all and (max-width: 700px) {
   .menu li {
      flex-basis: 100%;
   }
}

#title {
    text-align: center;
    position: relative;
    top: 0px;
    font-size: larger;
}

#description {
    text-align: center;
    position: relative;
    top: 50px;
    font-size: 10px;
}

.note {
    margin-top: 20px; 
    padding: 10px; 
    border: 1px solid #ddd; 
    background-color: #f9f9f9;
}