@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap);
@font-face {
  font-family: "icomoon";
  src: url(assets/56370f49b5fb58dbe2b3.ttf);
  font-style: normal;
  font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-play2:before {
  content: "\ea15";
}
.icon-pause:before {
  content: "\ea16";
}

.icon-volume:before {
  content: "\ea27";
}

*{margin:0;padding:0;box-sizing:border-box}body{background:#5e5d5d;font-family:"Roboto",sans-serif}li{list-style:none}.wrapper{max-width:1024px;margin:10px auto}.section{display:flex;align-items:center;justify-content:space-between;background:gray;padding:5px 10px;border-radius:3px;margin-top:10px;color:#fff}@media screen and (max-width: 640px){.header{justify-content:space-around}}.logo{width:80px}.score{font-size:20px}.stageList{display:flex;align-items:center;justify-content:space-around;width:100%}@media screen and (max-width: 720px){.stageList{font-size:14px;flex-wrap:wrap}}.stage{display:block;text-align:center;border-left:1px solid #5e5d5d;border-right:1px solid #5e5d5d;border-radius:5px;transition:.3s;font-size:18px;text-transform:uppercase;padding:5px 20px}@media screen and (max-width: 720px){.stage{font-size:14px;margin:5px 0}}.stage-activ{background:green}.birds-question{min-height:300px}@media screen and (max-width: 640px){.birds-question{flex-direction:column}}.bird-img{margin:0 auto;height:200px;text-align:center;transition:1s}@media screen and (max-width: 640px){.bird-img{margin:25px auto;height:auto;max-width:210px}}@media screen and (max-width: 320px){.bird-img{max-width:110px;margin:10px auto}}@media screen and (max-width: 640px){.bird-img .image{height:auto;width:100%}}.audio-player audio{width:90%}@media screen and (max-width: 640px){.audio-player{width:300px}}.description{display:flex;flex-direction:column;align-items:center;margin:0 auto;width:60%;text-align:center;transition:.5s}@media screen and (max-width: 640px){.description{width:300px;padding:0 0 10px 0}}.bird-name{margin:15px 0;font-size:25px}.bird-description{height:0;margin:0;transition:1s}.visible{height:100%;padding:25px}@media screen and (max-width: 640px){.visible{padding:25px 0}}@media screen and (max-width: 640px){.answer-list{justify-content:center;padding:20px 0}}.answer{width:100%;display:flex;justify-content:space-around;gap:5px}@media screen and (max-width: 640px){.answer{flex-wrap:wrap;width:310px}}.bird-item{cursor:pointer;display:block;width:100%;text-align:center;border-left:1px solid #5e5d5d;border-right:1px solid #5e5d5d;border-radius:5px;transition:.3s;font-size:18px;text-transform:uppercase}.bird-item:hover{background-color:#5e5d5d}@media screen and (max-width: 640px){.bird-item{border:1px solid #5e5d5d}}.button-next{display:flex;flex-direction:column;width:100%}.next{border:none;outline:none;cursor:pointer;width:100%;font-size:18px;text-align:center;text-transform:uppercase;color:#fff;background:#009a00;transition:.3s;border-radius:3px;padding:5px 20px}.next:hover{background:green}.next:disabled{background:gray;cursor:auto}.restart{cursor:pointer;margin-top:15px;padding:5px 20px;border-radius:5px;background:#009a00;color:#fff;font-size:18px;transition:.5s}.restart:hover{background:green}.restart-gray{background-color:gray}.audio-player{display:flex;align-items:center;gap:15px}@media screen and (max-width: 640px){.audio-player{margin:15px 0}}.icon-volume,.play-stop{cursor:pointer;display:flex;align-items:center;font-size:30px;color:#bababa}.progress{cursor:pointer;width:400px;height:5px;background:#bababa;border-radius:10px;transition:.3s}@media screen and (max-width: 800px){.progress{width:200px}}.progress-bar{width:0;height:100%;background:#636363;border-radius:10px;transition:.3s}.volume-container{display:flex;align-items:center}.icon-volume{font-size:18px}.volume{cursor:pointer;width:70px;height:7px;border:1px solid #bababa;background:#bababa;border-radius:10px;transition:.3s;margin:0 0 0 3px}.volume-bar{height:100%;background:#636363;border-radius:10px;transition:.3s}.image{height:100%;border-radius:5px}.active{background:green}.active:hover{background:#009400}