@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');
@font-face {
  font-family: eagle;
  src: url(src/fonts/eagle.otf);
}
:root{
  --text-color: #000;
  --bg-color:#fff;
  --btn-color:#121212;
  --txt-size: 30px;
}
strong{
  font-family: 'Poppins';
}

.darkmode{
  --text-color: #fff;
  --bg-color:#121212;
  --btn-color:#f2f2f2;
}
.darkbtn{
  color: var(--text-color);
  background:var(--bg-color);
  position: absolute;
  right: 5px;
}

b{
  color: var(--text-color);
  font-size: var(--txt-size);
  position: absolute;
  bottom: 5%;
  font-family: 'Poppins';
}

.header{
  display: block;
  justify-self: center;
}

#wat{
    font-family: 'Poppins';
    color: var(--text-color);
    font-size: 100px;
}
body{
  background: var(--bg-color);
}
input{
  display: inline-block;
  width: 10%;
  background-color: var(--bg-color);
  font-family: 'Poppins';
  color: var(--text-color);
  font-size: var(--txt-size);

}

.title{
    display: block;
    width: 100%;
    font-family: 'eagle';
    color: var(--text-color);
    font-size: 70px;
    text-align: center;
}

label{
    font-family: 'Poppins';
    color: var(--text-color);
    font-size: var(--txt-size);
}

option{
    font-family: 'Poppins';
    color: var(--text-color);
    font-size: var(--txt-size);
   
}
select{
    font-family: 'Poppins';
    color: var(--text-color);
    background: var(--bg-color);
    border-radius: 4px;
    font-size: var(--txt-size);
}
.check{
  height: 30px;
  width: 30px;
  border: none;
  border-radius: 5px;
}
#ui{
  line-height: 150%;
}


button{
    border: none;
    background: var(--btn-color);
    font-family: "Poppins";
    font-size: var(--txt-size);
    color: #0f0;
    border-radius: 8px;
    margin: 20px;
    padding: 5px;
}


@media only screen and (max-width: 768px) {
  #wat{
    font-size: 45px;
  }
  .title{
    font-size: 30px;
  }
  :root{
    --txt-size:15px;
  }
  input{
    font-size: var(--txt-size);
  }
  


  .check{
    height: 18px;
    width: 18px;
  }
}