@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400;700&family=Source+Code+Pro:wght@300&family=Source+Sans+Pro:wght@700&display=swap);@keyframes fadeIn{0%{opacity:0;transform:translateY(.9rem)}to{opacity:1;transform:translateY(0)}}@keyframes fadeLeft{0%{opacity:0}to{opacity:1}}@keyframes flash{0%{opacity:1}50%{opacity:.1}to{opacity:1}}html{box-sizing:border-box;font-size:62.5%;font-family:Montserrat,sans-serif;min-height:100vh}@media only screen and (max-width:93.75em){html{font-size:50%}}body{overflow:hidden;height:100vh;width:100%;display:flex;align-items:center;justify-content:center;background-image:url(../img/back1.svg);background-size:cover;background-position:50%;background-repeat:no-repeat;background-attachment:fixed}@media only screen and (max-width:59.38em){body{height:auto;display:block;overflow:auto;background-image:url(assets/img/main.png)}}table{border-collapse:collapse;border-spacing:0}*,:after,:before{margin:0;padding:0;box-sizing:border-box}a,a:active,a:visited{text-decoration:none;color:#000}button:focus,input:focus,select:focus,textarea:focus{outline:none}.heading--1{font-size:7rem;font-family:Source Sans Pro,sans-serif;font-weight:700}.heading--2{font-size:2.2rem;font-family:Montserrat,sans-serif;font-weight:400}.heading--3{font-weight:700;color:#ef8354;font-size:3.5rem}.heading--4{font-size:1.8rem;font-weight:700}.heading--highlight{color:#ef8354}.heading--underline{text-decoration:underline}.regular-text{font-size:3.4rem;margin-bottom:2rem;color:#ef8354;font-weight:700}.container{position:relative;width:91%;height:87vh;padding:4rem 7rem;background:hsla(0,0%,96.5%,.8);background-position:bottom;background-size:contain;background-repeat:no-repeat;border-radius:1.9rem;box-shadow:0 0 12px 0 rgba(0,0,0,.41);display:flex;flex-direction:column}@media only screen and (max-width:93.75em){.container{height:93vh;width:95%}}@media only screen and (max-width:59.38em){.container{height:auto;min-height:100vh;width:100%;overflow-y:auto;overflow-x:hidden;padding:3.5rem 4.5rem;border-radius:0;background:hsla(0,0%,96.5%,.5)}}.container__background{position:absolute;top:0;right:-5rem;width:60%;animation:fadeIn .5s .4s both;z-index:1}@media only screen and (max-width:59.38em){.container__background{display:none}}.container__image{width:100%;transform:rotate(15deg);opacity:1}.main{z-index:10}.footer{position:absolute;bottom:1rem;right:2.5rem;opacity:.7;z-index:100}.footer__copyright{width:40%;display:block;margin-left:auto}.footer__img,.header{width:100%}.header{margin-bottom:5rem;display:grid;grid-template-columns:auto 1fr;align-items:center;z-index:100}@media only screen and (max-width:59.38em){.header{grid-template-columns:repeat(2,auto);justify-content:space-between;padding-bottom:2rem;margin-bottom:3rem}}.header__logo{width:17rem}@media only screen and (max-width:59.38em){.header__logo{z-index:101;width:13rem}}.header__logo-img{width:100%}.header__cont{display:flex;flex-direction:row;align-items:center;justify-content:flex-end}@media only screen and (max-width:59.38em){.header__cont{z-index:100;position:fixed;top:0;left:100%;width:100%;height:100vh;background-color:#f6f6f6;flex-direction:column;justify-content:center;align-items:center;transition:all .2s ease-out}}.header__nav{margin-right:3rem}@media only screen and (max-width:59.38em){.header__nav{margin-right:0;margin-bottom:3.5rem}}.header__checkbox{display:none}.header__checkbox:checked~.header__cont{left:0}.menu-button{display:none}@media only screen and (max-width:59.38em){.menu-button{display:inline-block;width:3.5rem;z-index:101}}.burger-icon{position:relative;margin-top:.8rem;margin-bottom:.8rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.burger-icon,.burger-icon:after,.burger-icon:before{display:block;width:3.5rem;height:.3rem;background-color:#536178;outline:1px solid transparent;-webkit-transition-property:background-color,-webkit-transform;-moz-transition-property:background-color,-moz-transform;-o-transition-property:background-color,-o-transform;transition-property:background-color,transform;-webkit-transition-duration:.3s;-moz-transition-duration:.3s;-o-transition-duration:.3s;transition-duration:.3s}.burger-icon:after,.burger-icon:before{position:absolute;content:""}.burger-icon:before{top:-.8rem}.burger-icon:after{top:.8rem}.header__checkbox:checked~.menu-button>.burger-icon{background-color:transparent}.header__checkbox:checked~.menu-button>.burger-icon:before{-webkit-transform:translateY(.8rem) rotate(45deg);-moz-transform:translateY(.8rem) rotate(45deg);-ms-transform:translateY(.8rem) rotate(45deg);-o-transform:translateY(.8rem) rotate(45deg);transform:translateY(.8rem) rotate(45deg)}.header__checkbox:checked~.menu-button>.burger-icon:after{-webkit-transform:translateY(-.8rem) rotate(-45deg);-moz-transform:translateY(-.8rem) rotate(-45deg);-ms-transform:translateY(-.8rem) rotate(-45deg);-o-transform:translateY(-.8rem) rotate(-45deg);transform:translateY(-.8rem) rotate(-45deg)}.nav__list{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto;column-gap:1.5rem;list-style-type:none}@media only screen and (max-width:59.38em){.nav__list{grid-template-columns:100%;column-gap:0;row-gap:4rem}}.nav__list-item--active a,.nav__list-item:hover a{color:#ef8354}.nav__list-item--active a:before,.nav__list-item:hover a:before{width:100%}@media only screen and (max-width:59.38em){.nav__list-item{text-align:center}}.nav__list-link{position:relative;font-size:2rem;transition:color .2s}@media only screen and (max-width:59.38em){.nav__list-link{font-size:3rem}}.nav__list-link:before{width:0;content:"";display:block;height:2px;position:absolute;bottom:-2px;left:0;background-color:#ef8354;transition:width .2s}.search-bar{display:flex;border-radius:2rem;position:relative}.search-bar--header{width:40rem}.search-bar--action{width:48rem}@media only screen and (max-width:59.38em){.search-bar--action{width:100%}}.search-bar__input{width:100%;border:none;border-radius:2rem;box-shadow:0 1px 4px 0 rgba(0,0,0,.2);transition:transform .2s;color:#bfc0c0}.search-bar__input:focus{transform:translateY(-2px)}.search-bar__input::placeholder{color:#bfc0c0}.search-bar--header .search-bar__input{padding:1.5rem;font-size:1.8rem}.search-bar--action .search-bar__input{padding:2rem;font-size:2.1rem}.search-bar__input:focus+.search-bar__button{transform:translateY(-2px)}.search-bar__button{position:absolute;top:0;right:0;height:100%;cursor:pointer;background-color:#ef8354;width:13%;border:none;border-radius:0 2rem 2rem 0;transition:transform .2s;display:flex;align-items:center;justify-content:center}.search-bar__button:hover .search-bar__icon{transform:scale(1.1)}.search-bar__icon{fill:#fff}.search-bar--header .search-bar__icon{width:2rem;height:2rem}.search-bar--action .search-bar__icon{width:3rem;height:3rem}.cta{border-radius:1.3rem;display:flex;align-items:center;justify-content:space-between;padding:.45rem 2.2rem;cursor:pointer}.cta--dark{background-color:#6a7588;border:3px solid #6a7588}.cta--light{background-color:#ef8354;border:3px solid #ef8354}.cta__icon{width:3.5rem;height:3.5rem;fill:#fff;margin-right:2.5rem}.cta__text{color:#fff;font-weight:700;font-size:2rem}.cta:hover{background-color:#f6f6f6}.cta--dark:hover .cta__text{color:#6a7588}.cta--dark:hover .cta__icon{fill:#6a7588}.cta--light:hover .cta__text{color:#ef8354}.cta--light:hover .cta__icon{fill:#ef8354}.cta:active{transform:translateY(2px)}.cta>*{pointer-events:none}.pagination{list-style-type:none;display:flex;align-items:center;justify-content:space-between;position:absolute;bottom:5rem;left:50%;transform:translateX(-50%)}.pagination__item{font-size:1.9rem;font-weight:700;cursor:pointer;width:3rem;height:3rem;border-radius:5px;margin:0 .2rem}.pagination__item--current a,.pagination__item:hover{background-color:#ef8354;color:#fff!important;border-radius:5px}.pagination__item a{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.pagination__item:hover>.pagination__icon{fill:#fff}.pagination__icon{width:2.6rem;height:2.6rem;fill:#000}.loader{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:5rem;height:5rem;border:.5rem solid #ef8354;z-index:10000;animation:spin 1s infinite}@keyframes spin{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(180deg)}}.home{display:flex;flex-direction:column;justify-content:start;align-items:flex-start}@media only screen and (max-width:59.38em){.home{justify-content:center;align-items:center}}.home__heading{margin-top:6rem;position:relative;z-index:2;animation:fadeIn .5s 0s both}@media only screen and (max-width:59.38em){.home__heading{font-size:5rem}}.action{display:grid;grid-template-rows:repeat(3,1fr);justify-items:center;align-items:center;animation:fadeIn .5s .2s both;margin-top:3rem;z-index:100}.action__or{font-size:2.3rem}.about{display:grid;grid-template-areas:"heading cta" "info cta";grid-template-columns:repeat(2,1fr);grid-template-rows:auto;height:100%}@media only screen and (max-width:59.38em){.about{display:flex;flex-direction:column}}.about::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;background-color:#f5f5f5}.about::-webkit-scrollbar{width:1rem;background-color:#f5f5f5}.about::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#ef8354}.about__heading{animation:fadeIn .5s 0s both;margin-top:3rem;grid-area:heading}@media only screen and (max-width:93.75em){.about__heading{margin-top:1.5rem}}@media only screen and (max-width:59.38em){.about__heading{font-size:4.5rem}}.about__text{z-index:100;min-height:100%;grid-area:info;animation:fadeIn .5s .2s both}.about__paragraph{font-size:2.2rem;margin:2rem;position:relative}@media only screen and (max-width:59.38em){.about__paragraph{margin:2rem 0;padding:2rem 0}}.about__paragraph:before{content:"";display:block;width:3px;height:100%;background-color:#ef8354;position:absolute;left:-2rem;top:0}.about__paragraph:first-child{margin-top:4rem}.about__cta{animation:fadeIn .5s .3s both;display:flex;flex-direction:column;justify-content:center;align-items:center;grid-area:cta}@media only screen and (max-width:59.38em){.about__cta{margin-bottom:8rem}}.about__equation{width:80%;display:flex;justify-content:center;align-items:center}@media only screen and (max-width:59.38em){.about__equation{width:100%}}.about__equation__img{width:80%}.search{padding:1.5rem 13rem;height:100%}@media only screen and (max-width:93.75em){.search{padding:1.5rem 6rem}}@media only screen and (max-width:59.38em){.search{padding:1.5rem 0}}.search__heading{animation:fadeIn .5s 0s both}.search__results{animation:fadeIn .5s .2s both;overflow-y:auto;max-height:50vh;margin-top:4rem;padding-right:4rem;padding-bottom:4rem;display:grid;grid-template-columns:repeat(auto-fit,39rem);grid-template-rows:auto;column-gap:6rem;row-gap:5rem}.search__results::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;background-color:#f5f5f5}.search__results::-webkit-scrollbar{width:1rem;background-color:#f5f5f5}.search__results::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#ef8354}@media only screen and (max-width:59.38em){.search__results{max-height:100%;width:100%;column-gap:0;grid-template-columns:repeat(auto-fit,100%)}}.search__pagination{display:flex;align-items:center;justify-content:center;z-index:100}@media only screen and (max-width:59.38em){.search__pagination{margin-bottom:3rem}}.song{display:flex;cursor:pointer;color:#536178;position:relative;transition:all .2s;overflow:hidden}.song:after,.song:before{content:"";display:block;position:absolute;right:0;width:3rem;height:3rem;border-right:2px solid rgba(79,93,117,.3)}.song:before{top:0;border-top:2px solid rgba(79,93,117,.3)}.song:after{bottom:0;border-bottom:2px solid rgba(79,93,117,.3)}.song--disabled{opacity:.5!important;cursor:not-allowed}.song__album-cover{min-width:12rem;max-width:12rem;height:12rem;position:relative;overflow:hidden}.song__album-cover:after{content:"";display:block;opacity:0;position:absolute;left:0;top:0;width:12rem;height:12rem;border:.6rem solid #ef8354;background-color:rgba(239,131,84,.6);transition:all .2s}.song__img{width:100%;height:100%;display:block;transition:all .2s}.song__icon{position:absolute;fill:#ef8354;opacity:0;left:50%;top:50%;transform:translate(-50%,-50%) scale(0);width:7.5rem;height:7.5rem;transition:all .2s}.song__info{margin-left:1.8rem;display:grid;grid-template-rows:auto auto 1fr;align-items:flex-end;padding:.5rem 1rem .5rem 0;position:relative}.song__explicit{color:#f55;font-weight:700;font-size:1.45rem}.song__title{font-size:2.8rem;margin-bottom:1rem}.song__artist,.song__title{text-overflow:ellipsis;width:100%;overflow-x:hidden;white-space:nowrap}.song__artist{font-size:1.8rem;font-weight:200}.song__words{font-size:1.5rem;font-weight:700;color:#ef8354}.song:not(.song--disabled):hover{background-color:#ef8354;color:#fff;box-shadow:4px 4px 24px -6px rgba(0,0,0,.5)}.song:not(.song--disabled):hover:after,.song:not(.song--disabled):hover:before{opacity:0}.song:not(.song--disabled):hover .song__title,.song:not(.song--disabled):hover .song__words{color:#fff}.song:not(.song--disabled):hover .song__explicit{color:#000}.song:not(.song--disabled):hover .song__icon{opacity:1;transform:translate(-50%,-50%) scale(1)}.song:not(.song--disabled):hover .song__album-cover:after{opacity:1}.song:not(.song--disabled):hover .song__img{transform:scale(.97)}.notfound{width:50%;margin:5rem auto;animation:fadeIn .5s .3s both}.notfound__img{width:100%}@media only screen and (max-width:59.38em){.notfound{width:100%}}.game{padding:1.5rem 13rem;display:flex;flex-direction:column;height:100%}@media only screen and (max-width:59.38em){.game{padding:1.5rem 0}}.game__header{display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;margin-bottom:1rem;position:relative;animation:fadeIn .5s 0s both}@media only screen and (max-width:59.38em){.game__header{flex-wrap:wrap}}.game__title{font-size:2.2rem;font-weight:200;overflow:hidden;width:30%;margin-right:auto;text-overflow:ellipsis;white-space:nowrap;animation:fadeIn .5s .1s both}@media only screen and (max-width:59.38em){.game__title{order:2;width:45%}}.game__timer{font-size:3.5rem;font-weight:200;color:#ef8354;width:30%;margin-left:auto;text-align:right;animation:fadeIn .5s .3s both}@media only screen and (max-width:59.38em){.game__timer{order:3;width:45%}}.game__lyrics{font-family:Source Code Pro,monospace;font-weight:300;padding:1rem 1.5rem;font-size:2.8rem;height:54vh;overflow-y:hidden;scroll-behavior:smooth;background-color:#f6f6f6;line-height:3.3rem;animation:fadeIn .5s .5s both;-webkit-presprective:1000}.game__progressBar{width:100%;height:3px;background-image:linear-gradient(90deg,#f08a5c,#f08a5c 0,rgba(90,103,125,.21) 0);animation:fadeIn .5s .4s both;transition:all .2s}.game__alert{font-weight:700;color:#ef8354;font-size:2.6rem;flex:1;text-align:center;animation:flash 1s infinite both;display:flex;align-items:center;justify-content:center}@media only screen and (max-width:59.38em){.game__alert{order:1;min-width:100%}}.game__copyright{margin-top:2rem;animation:fadeIn .5s .6s both}.enter{color:rgba(106,117,136,.5);padding-left:.4rem}.letter{position:relative;display:inline-block}.letter--correct{color:#40c94e}.letter--incorrect{color:red}.letter--incorrect:after{background-color:red}.letter--active:before,.letter--incorrect:after{content:"";display:block;position:absolute;bottom:0;height:1px;width:100%}.letter--active:before{background-color:#000;animation:flash .5s infinite both;scroll-behavior:smooth}.word{display:inline-block}.gameError{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly}@media only screen and (max-width:59.38em){.gameError__emoji{margin-top:3.4rem}}.gameError__text{font-size:3rem;text-align:center}.summary{padding:0 10rem;margin-top:3rem}@media only screen and (max-width:59.38em){.summary{padding:0}}.summary__artist,.summary__heading{animation:fadeIn .5s 0s both}.summary__artist{font-weight:200;font-size:2.1rem;max-width:50%;text-overflow:ellipsis}@media only screen and (max-width:59.38em){.summary__artist{max-width:100%}}.summary__container{display:grid;grid-template-columns:1fr 50%;grid-template-rows:auto;grid-template-areas:"table chart" "buttons buttons"}@media only screen and (max-width:59.38em){.summary__container{display:flex;flex-direction:column}}.summary__content{grid-area:table;width:80%;margin-top:5rem;animation:fadeIn .5s .1s both}@media only screen and (max-width:59.38em){.summary__content{width:100%}}.summary__table{font-size:2.2rem;width:100%;background-color:#f6f6f6;border-left:2px solid #ef8354}.summary__table tr{display:flex;align-items:center;justify-content:space-between}.summary__table tr:nth-child(odd){background-color:rgba(239,131,84,.2)}.summary__table td{padding:.6rem 1rem}.summary__table td:first-child{font-weight:700}.summary__score{font-size:2.3rem;color:#ef8354;width:100%;font-weight:700;margin-top:3rem;display:flex;align-items:center;justify-content:space-between}.summary__chart{animation:fadeIn .5s .2s both;grid-area:chart;background-color:hsla(0,0%,96.5%,.6);position:relative}@media only screen and (max-width:59.38em){.summary__chart{margin:3rem 0}}.summary__canvas{animation:fadeIn .5s .4s both}.summary__buttons{grid-area:buttons;animation:fadeIn .5s .3s both;display:flex;margin-top:4rem}@media only screen and (max-width:59.38em){.summary__buttons{flex-direction:column;align-items:center;justify-content:center;margin-top:1rem;margin-bottom:3.5rem}}.summary__cta{margin-right:2.5rem;animation:fadeIn .5s .5s both}@media only screen and (max-width:59.38em){.summary__cta{margin:1.5rem 0}}