@font-face{font-family:RobotoCondensed;src:url(roboto-condensed.light.b2508121.ttf);font-weight:800}@font-face{font-family:EconomicaBold;src:url(economica-bold.8afe7b2f.ttf)}body{background-color:#ffb972;overflow-x:hidden;display:flex;justify-content:center;font-family:Playfair Display,serif;text-align:center;font-size:20px;padding:2.5%}#root{min-height:100vh;min-width:100vw}h1,h2,h3,h4,h5{font-family:Playfair Display,serif}.grid-master{padding-left:5px;position:absolute;height:100vh;width:100vw}.artist-profile{padding-left:10px;padding-right:10px}.artist-name{padding-top:5px}.genre{font-size:1.25rem}.genre-wrapper-out{width:100%;display:flex;align-items:center;justify-content:center}.genre-wrapper-in{width:80%}.logo{width:40px;height:40px}.search-flex{width:100%;display:flex;align-items:center;justify-content:center}.search-wrapper{border:1px solid #4d4d4d;width:326px;height:37px;display:flex;position:relative;border-radius:5px;font-size:18px;background-color:#262626}.search-bar{border:none;position:absolute;bottom:0;background-color:#ffb972;color:#1a1a1a;padding-left:7px;border-top-left-radius:5px;border-bottom-left-radius:5px;border-top-right-radius:0;border-bottom-right-radius:0;width:236px;height:35px}::placeholder{color:#000;opacity:.8}.search-bar:focus{background-color:#262626;color:#ffb972}input:focus::placeholder{color:#ffb972}.search-button{position:absolute;display:flex;align-items:center;justify-content:center;right:0;bottom:0;text-align:center;height:35px;width:90px;background-color:#262626;color:#ffb972;border:none;border-left:1px solid #ffb972;border-top-right-radius:5px;border-bottom-right-radius:5px;z-index:1;transition:all .3s ease}.search-button:hover{background-color:#ffa263;color:#f2f2f2}.track{position:relative;display:inline-block;margin:20px;cursor:pointer}.track,.track-image{width:250px;height:250px}.track-text{position:absolute;font-size:1.25rem;width:250px;bottom:0;background-color:#333;color:#dedede;padding:5px}.track-icon{position:absolute;bottom:100px;left:100px;background-color:#000;color:#fff;width:50px;height:50px;border-radius:25px;padding:10px;opacity:.8}.play-button{-webkit-appearance:none;border-radius:0}.top-box-1{z-index:-1;border:none;width:96%;height:13%;display:flex;position:relative;justify-content:flex-end}.top-box-2{border:3px solid #333;width:97%;height:20%}.box,.top-box-2{z-index:-1;display:inline-block;position:relative}.box{border:none;width:48%;height:33%}.box-left{margin-right:5px}.box-right{margin-left:5px}.box1,.box4,.box5,.box8,.box9,.box12,.box13,.box16,.box17,.box20,.box21,.box24,.box25,.box28,.box29{border:3px solid #333}@media screen and (max-width:325px){.search-wrapper{width:300px}.search-bar{width:210px}.top-box-1{height:16%}.top-box-2{height:23%}.box{height:37%}}@media screen and (min-width:355px) and (max-height:645px){.top-box-1{height:15%}.top-box-2{height:23%}.box{height:37%}}@media screen and (min-width:370px){.top-box-1{height:10%}.top-box-2{height:22%}}@media screen and (min-width:370px) and (min-height:800px){.box25,.box26,.box27,.box28,.box29,.box30{display:none}.top-box-1{height:10%}.top-box-2{height:22%}}@media screen and (min-width:400px){.top-box-1{height:10%}.top-box-2{height:22%}.box29,.box30{display:none}}@media screen and (min-width:400px) and (min-height:800px){.top-box-1{height:10%}.box25,.box26,.box27,.box28,.box29,.box30{display:none}}@media screen and (min-width:560px) and (orientation:landscape){.box27,.box28,.box29,.box30{display:none}.top-box-1{height:30%}.top-box-2{height:40%}.box{height:80%}}@media screen and (min-width:590px) and (orientation:landscape){.box15,.box16,.box17,.box18,.box19,.box20,.box21,.box22,.box23,.box24,.box25,.box26,.box27,.box28,.box29,.box30{display:none}.top-box-1{height:25%}.top-box-2{height:35%}.box{height:65%}}@media screen and (min-width:700px) and (min-height:389px) and (orientation:landscape){.box15,.box16,.box17,.box18,.box19,.box20,.box21,.box22,.box23,.box24,.box25,.box26,.box27,.box28,.box29,.box30{display:none}.top-box-1{height:20%}.top-box-2{height:35%}}@media screen and (min-width:700px) and (orientation:portrait){.box13,.box14,.box15,.box16,.box17,.box18,.box19,.box20,.box21,.box22,.box23,.box24,.box25,.box26,.box27,.box28,.box29,.box30{display:none}.top-box-1{height:9%}.top-box-2{height:20%}}@media screen and (min-width:740px) and (max-height:755px) and (orientation:landscape){.box13,.box14,.box15,.box16,.box17,.box18,.box19,.box20,.box21,.box22,.box23,.box24,.box25,.box26,.box27,.box28,.box29,.box30{display:none}.top-box-1{height:11%}.top-box-2{height:20%}}@media screen and (min-width:812px) and (orientation:landscape){.box15,.box16,.box17,.box18,.box19,.box20,.box21,.box22,.box23,.box24,.box25,.box26,.box27,.box28,.box29,.box30{display:none}.top-box-1{height:22%}.top-box-2{height:35%}}@media screen and (min-width:1000px) and (orientation:portrait){.box9,.box10,.box11,.box12,.box13,.box14,.box15,.box16,.box17,.box18,.box19,.box20,.box21,.box22,.box23,.box24,.box25,.box26,.box27,.box28,.box29,.box30{display:none}.top-box-1{height:7%}.top-box-2{height:20%}}@media screen and (min-width:1000px) and (orientation:landscape){.box9,.box10,.box11,.box12,.box13,.box14,.box15,.box16,.box17,.box18,.box19,.box20,.box21,.box22,.box23,.box24,.box25,.box26,.box27,.box28,.box29,.box30{display:none}.top-box-1{height:11%}.top-box-2{height:20%}}@media screen and (min-width:1300px) and (orientation:landscape){.box7,.box8,.box9,.box10,.box11,.box12,.box13,.box14,.box15,.box16,.box17,.box18,.box19,.box20,.box21,.box22,.box23,.box24,.box25,.box26,.box27,.box28,.box29,.box30{display:none}.top-box-1{height:11%}.top-box-2{height:20%}}@media screen and (min-width:1400px){.top-box-1{height:12%}}@media screen and (min-width:1650px){.top-box-1{height:10%}}
/*# sourceMappingURL=src.0c551251.css.map */