@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');

html, body {
  height: 100%;
  width: 100%;
  /*background-color: #303136;*/
  background-color: #FFFFFF;
  font-family: 'Abel', sans-serif;
  color: white;
  overflow-x: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

body::-webkit-scrollbar{
  display: none;
}

h1, h2, h3, h4, h5, h6, p{
  color: black;
}

.card{
  position:relative;
  z-index: 1;
  margin: auto;
  padding: 10px;
  width: 25%;
  justify-content: center;
  border: 3px solid #2196f3;
  border-radius: 6px;
  box-shadow: 0 0 10px #2196f3;
  height: 90%;
  overflow: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.card::-webkit-scrollbar{
  display: none;
}

.card:before{
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  width:100%;
  /*height:19%;*/
  height: 93px;
  content:"";
  background-color:#2196f3;
}

#return{
  color: black;
  margin-top: 12px;
  background-color: #2196f3;
  border: none;
  padding: 8px;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 0 10px #2196f3;
}

.pfp{
  border: 8px solid #FFFFFF;
}

.animation{
  animation-name: animate;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes animate{
  from{ height: 0%; }
  to{ height: 100%; }
}

.grow{
  animation-name: grow-anim;
  animation-duration: 500ms;
  animation-fill-mode: forwards;
}

@keyframes grow-anim{
  from{ width: 0px; height: 0px; }
  to{ width: 100px; height: 100px; }
}

.rotate{
  animation: rotate-anim 2s infinite linear;
}

@keyframes rotate-anim{
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

@media (max-width:600px){
  .card {
    width: 75%;
  }
  .bar-item{
    font-size: 16px;
  }
}

@media (prefers-color-scheme: dark){
  .pfp{
    border: 8px solid #303136;
  }
  
  html, body {
    height: 100%;
    width: 100%;
    background-color: #303136;
    font-family: 'Abel', sans-serif;
    color: white;
    overflow-x: hidden;
  }
  
  h1, h2, h3, h4, h5, h6, p{
    color: white;
  }
}