/* #menu {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
} */

#container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 100px;
}

.indexContainer{

}

.indexContainer ul {
  list-style-type: none;
  display: flex;
  justify-content: left;
  flex-direction: row ;
  align-items: left;
  flex-wrap: wrap;
  padding-inline-start: 5%;
  padding-inline-end: 5%;
}


.indexContainer li {
  width: 125px;
  text-align: center;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  padding: 2px;
  padding-top:10px;
  padding-bottom:10px;

}



a{
 font-size:14px;
}
a:link {
  color: dimgrey;
}

a:link:hover {
  color: darkcyan;
}
#application {
  padding-left:10px;
  color: red;
  text-align: left;
  font-weight: bold;
  font-size:14px;
}
#utilities {
  color: coral;
}
#security {
  color: rgb(10, 53, 102);
}

header {
  padding-left: 10px;
  border-bottom: 1px solid grey;
}

@media (max-width: 1000px) {
  #container {
    flex-direction: row;
  }
    a{
     font-size:20px;
    }
    #application {
      padding-left:10px;
      color: red;
      text-align: left;
      font-weight: bold;
      font-size:21px;
    }
    .imageLogo{
        padding-bottom:5px;
        width:80px;
        height:80px;

    }
    .indexContainer li {
      width: 64px;
      margin-left:20px;
      margin-right:20px;

    }
  #container{
        display: block;
    }
}

/* If the screen size is 601px wide or more, set the font-size of <div> to 80px */
@media screen and (min-width: 1001px) {
  a{
      font-size:20px;
     }

     #application {
       padding-left:10px;
       color: red;
       text-align: left;
       font-weight: bold;
       font-size:21px;
     }
     .imageLogo{
        padding-bottom:5px;
        width:80px;
        height:80px;

     }
    .indexContainer li {
      width: 125px;

    }
    #container{
      display: flex;
    }
}