*{
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  box-sizing: border-box;
}
body{
  background-color: rgb(53, 57, 77);
  background-image: url(img/bg2.png);
  
}
.page{
  max-width: 1000px;
  height:100%;
  margin:auto;
  
}
table{
  width:15em;
  margin:auto;
  padding:1em;
  text-align: center;
}
.profile{
  text-align: center;
  max-width:15em;
}
tr{
  display:flex;
  justify-content: space-between;
}
.ico{
  object-fit: cover;
  object-position: 25% 25%;
  max-height:10em;
  max-width:10em;
  margin:auto
}

.flex{
  display:flex;
  justify-content: space-evenly;
  margin:auto;
}

.nav{
  height:555px;
  overflow: auto;
  text-align: center;
  padding:0.5em;
}
.right{
  width:150px;
  height:630px;
}

.col{
  flex-direction: column;
  
}
.mat{
  color:rgb(29, 23, 36);
  margin:0.3em;
  padding:.6em;
  border-radius: 7px;
  background-color: rgb(243, 240, 240);
}
.profile{
  text-align:center;
}
.pgdll img{
  float:right;
  width:8em;
}
th{
  text-align: right;
}
td{

  text-align: left;
}
.blurb{
  align-items: center;
  width:13em;
div{
    padding:1em
  }
}

.text{
  overflow: auto;
  
}

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  margin:auto;
  animation: fadeEffect 0.5s;
  height:600px;
  overflow:auto;

}
.tablinks img:hover{
  cursor:pointer;
  transform: scale(.9)
}

@keyframes fadeEffect {
  0% {opacity: 0; transform: translateY(2%);}
  100% {opacity: 1; transform: translateY(0)}
}

@media only screen and (max-width: 550px) {
.mat, .page{
max-width:100%
}
}

@media only screen and (max-width: 600px) {
.flex {
  flex-direction: column;
  }
  .right{
    width:100%
  }
  .nav{
    display:flex;
    flex-direction:row;
    height:fit-content;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }
  .text{
    min-height:auto;
  }
  .text, .tabcontent{
    padding-left:0;
    overflow: hidden;
    height:100%;
    max-height:100%
  }
  .pgdll{
    display:none;
  }
 .blurb{
  width:50%
 }

}