body {
 
  margin: 0;
   background-color:#7173a5;
    font-family: "Pixelify Sans", sans-serif;
   color:#333A7B;
}

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.flex-item {

  height: 100%;
  margin: 5px;
   background-color: #F3F3F3;
  padding: 10px;
  font-size: 18px;
  text-align: center;
  width: 100%;
 border: 3px solid #333A7B;
          max-width: 500px;
          
}
header {
 color:#F3F3F3;
  padding: 10px;
  text-align: center;
   background-color:#534f82;
}
footer {
  background-color: #534f82;
  padding: 8px;
  text-align: center;
  color:#F3F3F3;
}
a {
  color: #2185D5;}
  h1{
      text-decoration: underline;
  text-decoration-style: dotted;
   }
   
  mark {
    color: white;
    background: #9a8c98;
    border: 1px dashed #fff;
    box-shadow: 0 0 0 3px #;
    padding: 2px;
  }
 table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 3px solid #333A7B;
}

th, td {
  text-align: left;
  padding: 16px;
}

tr:nth-child(even) {
  background-color: #e0e0e0;
}  
.container1 {
  width: 100%;
  background-color: #ddd;
}

.skills {
  text-align: right;
  padding-top: 10px;
  padding-bottom: 10px;
  color: #F3F3F3;
}

.skill1 {width: 90%; background-color: #333A7B;}
.skill2 {width: 30%; background-color: #333A7B;}
.skill3 {width: 20%; background-color: #333A7B;}
.skill4 {width: 10%; background-color: #333A7B;}

button {
  
  background-color: #F3F3F3;
  border: none;
  color: #333A7B;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  
   font-family: "Pixelify Sans", sans-serif;
  
}
.button1 {border: 2px solid #333A7B;  font-family: "Pixelify Sans", sans-serif; color: #333A7B;}
.button1:hover {
  background-color:  #333A7B;
  color:  #F3F3F3;
   font-family: "Pixelify Sans", sans-serif;
}
@media screen and (max-width:600px) {
  .flex-container {
  flex-direction: column;
  
   justify-content: center;
  }
@media screen and (max-width:600px) {
  .flex-item {
 
    width: auto;
     
}