body {
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin: 0;
    background: linear-gradient(to top right, #453649, #471f68, #342f47, #291e30);
    background-attachment: fixed;
}

#word{
  color: rgb(108, 115, 158);
}

.Intro{
  padding-top: 40px;;
}


.container {
    display: flex;
    box-shadow: 0 6px 20px rgba(0,0,0,0.20);
    background-color: #4d3a5a;
    height: 60px;
    padding-bottom: 20px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.container a {
     flex-wrap: wrap;
     gap: 10px;
     margin-top: 40px;
     margin-bottom: 40px;
     padding: auto;
     font-family: Georgia, serif;
     color: rgb(139, 138, 138);
     text-align: left;
     text-decoration: none;
     font-size: 14px;
}

#item1{
    flex: 1 1 150px;
    min-width: 150px;
    padding-left: 30px;
     border-right: 2px solid #000;
}

 #item2{
    flex: 1 1 120px;
   padding-left: 10px;
   padding-right: 10px;
   color: rgb(20, 27, 27);
   border-right: 2px solid #000;
}
#item3{
    flex: 1 1 120px;
   padding-left: 10px;
   padding-right: 80px; 
   margin-right: 90px;
    color: rgb(20, 27, 27);
    border-right: 2px solid #000;
}

#item4{
    flex: 1 1 120px;
      margin-left: 40px;
    padding-left: 90px;
    padding-right: 0px;
    color: rgb(20, 27, 27);
}
#item5{
    flex: 1 1 100px;
     color: rgb(20, 27, 27)

}


/* style for links */

.container a:hover{
   font-size: 13px;
   text-shadow: 3px 3px 4px rgba(0,0,0,0.20) ;
   background-color: #bbbabe;
}

/* text style and animation */