/* the tab */
.tab {
    float: left;
    background-color: #142542;
    width: 20%;
    padding: 10px;
    text-align: center;
    min-height: 1200px;
  }
  
  /* the buttons inside the tab */
  .tab button {
    color: white;
    display: block;
    background-color: inherit;
    padding: 22px 16px;
    width: 100%;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
    font-size: 17px;
    border-radius: 5px;
    text-align: center;
  }
  
  /*background color of buttons on hover */
  .tab button:hover {
    background-color: rgb(32, 26, 116);
  }
  
  /* active/current "tab button" class */
  .tab button.active {
    background: linear-gradient(40deg, rgb(42, 92, 139), #142542)
  }
  
  /* tab content */
  .tabcontent {
    
    float: left;

    padding: 0px 15px;
    width: 80%;
    border-left: none;
    min-height: 1200px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  }
  .tabcontent p{
    font-size:20px;
  }

  .fade-in {
    animation: fadeIn ease 2s;
    -webkit-animation: fadeIn ease 2s;
    -moz-animation: fadeIn ease 2s;
    -o-animation: fadeIn ease 2s;
    -ms-animation: fadeIn ease 2s;
  }
  
  
  @keyframes fadeIn{
    0% {
      opacity:0;
    }
    100% {
      opacity:1;
    }
  }
  
  @-moz-keyframes fadeIn {
    0% {
      opacity:0;
    }
    100% {
      opacity:1;
    }
  }
  
  @-webkit-keyframes fadeIn {
    0% {
      opacity:0;
    }
    100% {
      opacity:1;
    }
  }
  
  @-o-keyframes fadeIn {
    0% {
      opacity:0;
    }
    100% {
      opacity:1;
    }
  }
  
  @-ms-keyframes fadeIn {
    0% {
      opacity:0;
    }
    100% {
      opacity:1;
    }
  }


@media screen and (max-width: 600px) {
  .tabcontent {
    width: 60%;
  }
  .tab {
    width: 40%;

  }
}