body {
  font: 16px "Lucida Grande", Helvetica, Arial, sans-serif;
  padding-top: 15vh;
  background-image: url('../images/bg.png');
  color: white;
}

.main{
  padding: 20px;
  border-radius: 10px;
  margin: auto;
  width: 40%;
  background-color: rgba(22, 50, 92, 0.8);
}


@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 768px){
    body{
      padding-top: 5vh;
      font-size: 40px;
    }
    input{
      font-size: 35px;
    }
    button{
      font-size: 40px;
    }
    .ico{
      font-size: 40px !important;
    }
    .main{
      width: 90%;
      padding: 5vh 0vh;
    }
    iframe{
      display: none;
    }
}

a{
  color: #00B7FF;
  text-decoration: none;
}

input{
  margin-bottom: 15px;
  padding: 5px 10px;
}

img{
  width: 50%;
  margin-bottom: 10px;
}

.list{
  height: 40vh;
  overflow-y: scroll;
}

hr{
  width: 80%;
}

li{
  list-style-type: none;
  padding-top: 10px;
}

.ico{
  padding-left: 10px;
  color: rgb(230, 185, 109);
  font-size: large;
  text-decoration: none;
}

button{
  background-color: #062007;
  border: none;
  color: white;
  padding: 5px 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 5px;
}

h5{
  margin-top: 0px;
}

iframe{
  width: 100%;
  height: 50vh;
}

button:hover{
  background-color: #0a2e0b;
}

::-webkit-scrollbar {
  width: 5px;
  border-radius: 5px;;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}