/* Style the tab */
.tab {
    overflow: hidden;
    background-color: rgba(0,0,0,0.5);
  }
  
  /* Style the buttons inside the tab */
  .tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
    color: white;
  }
  
  /* Change background color of buttons on hover */
  .tab button:hover {
    background-color: #3e4459;
  }
  
  /* Create an active/current tablink class */
  .tab button.active {
    background-color: #0d1627;
    
  }
  
  /* Style the tab content */
  .tabcontent {
    display: none;
    padding: 6px 12px;
    border-top: none;
  }


  .info-right-content
{
  border: 1px solid #5AC1E3;
  border-radius: 15px;
  background-color: #312C4B;
}


.info-text-content
{
    font-size: 20px;
    color: white;
    margin-left: 25px; 
    margin-right: 25px;
}

.character-text-title
{
    font-weight: bold;
    font-size: 24px;
    color: white;
    margin-left: 25px; 
    margin-right: 25px;
}

.character-img
{
    width: 100%;
    height: auto;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
  margin-bottom: 100px;
}

.content
{
  position: relative;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

  @media screen and (min-width: 0px)
  {
    .column {
      flex: 100%;
      max-width: 100%;
      padding-left: 2px;
      padding-right: 2px;
    }
    
    .tips-img
    {
        width: 100%;
        height: auto; 
        margin-left: 0px; 
        margin-top: 10px; 
        margin-bottom: 100px;
        -webkit-filter: drop-shadow(0px 0px 10px #62C7E9)!important;
        filter: drop-shadow(0px 0px 10px #62C7E9)!important;
    }
  }

  @media screen and (min-width: 750px)
  {
    .column {
      flex: 50%;
      max-width: 50%;
      padding-left: 2px;
      padding-right: 2px;
    }

    .character-img
    {
        width: 100%;
        height: auto;
         
        max-width: 500px;
    }
  }

  @media screen and (min-width: 1150px)
  {
    /* Create four equal columns that sits next to each other */
    .column {
      flex: 25%;
      max-width: 25%;
      padding: 0 4px;
    }

    .tabcontent
    {
      max-width: 1500px;
    }

    .character-img
    {
        width: 100%;
        height: auto;
         
        max-width: 800px;
    }
  }