@import"https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Cutive&family=Gabarito:wght@400;500;600;700;800;900&family=Roboto:wght@400;500;700;900&display=swap";@import"https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap";@import"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap";@import"https://fonts.googleapis.com/css2?family=Englebert&family=Handlee&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap";body,html,#root{height:100%;width:100%}.App{width:100%;height:100%;display:flex;flex-direction:column}.inner-container{margin-top:30px;display:flex;flex-direction:column;gap:2em;height:100%}.clock-wrapper{margin-top:30px;border:#0b0b0c 2px solid;padding:2em;border-radius:8px;background:linear-gradient(#ededf1,#e6d4d4);position:fixed;opacity:.98}.hidden-button,.show-button{padding:5px;width:40px;height:40px;display:flex;background:#9048d8;margin-top:10px;justify-content:center;align-items:center;cursor:pointer;border:#0b0b0c 2px solid;border-radius:8px;position:absolute;top:1%;left:3%}.show-button{top:7%;position:fixed;opacity:.7}.hidden-button:hover,.show-button:hover{background:#88cdf0}.result-container{margin:1em auto;padding:.43em .84em;border:2px solid #0b0b0c;border-radius:8px;box-shadow:1px 1px 1px 1px #000;text-align:center;max-width:150px}.result-container h3{font-size:1rem}.semitones{display:block;text-align:center;font-size:.85rem;margin-top:.43em;color:#6555e2;font-family:Roboto,sans-serif}.intervals,.scales,.chords{padding:2em;display:flex;flex-direction:column;align-items:center}.topic-content{margin-top:5em}.topic-content .topic-introduction{display:flex;flex-direction:column;justify-content:center;gap:2em}.topic-content .topic-introduction h2{font-size:2.7rem;text-align:center}.topic-content .topic-introduction p{font-size:1.27rem;font-weight:300;word-spacing:.15em;line-height:1.5}@media (min-width: 870px){.inner-container{margin-top:42px;gap:.4em}.intervals,.scales,.chords{margin-left:450px;max-width:calc(100vw - 420px);padding:3em}.hidden-button{display:none}.clock-wrapper{top:7%;left:5%;display:flex;flex-direction:column;align-items:center;margin-top:10px}}@media (min-width: 1040px){.clock-wrapper{top:12%;left:5%;display:flex;padding:2em;align-items:center}}.clock-container{display:flex;flex-direction:column;margin-bottom:.67em;justify-content:center;align-items:center;position:sticky;gap:2em;margin-top:15px}.clock{width:280px;height:280px;position:relative;border-radius:50%;margin:0 auto;display:flex;background:#252525}.music-scale-figure{background-color:#d1ff7c;width:95%;height:95%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.note-point{width:40px;height:40px;background-color:#caa5ff;font-size:.527rem;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;justify-content:center;align-items:center;text-align:center;cursor:pointer;line-height:1.2;font-weight:500;transition:background-color .45s;border:2px solid #282828}.note-point:hover{background-color:#f5bfff}.note-point:nth-child(2){top:25%;left:6.25%;background-color:#fee890}.note-point:nth-child(2):hover{background-color:#ffb54f}.note-point:nth-child(3){top:6.25%;left:25%}.note-point:nth-child(4){top:0;left:50%}.note-point:nth-child(5){top:6.25%;left:75%}.note-point:nth-child(6){top:25%;left:94.75%}.note-point:nth-child(7){top:50%;left:100%}.note-point:nth-child(8){top:75%;left:94.75%}.note-point:nth-child(9){top:94.75%;left:75%}.note-point:nth-child(10){top:100%;left:50%}.note-point:nth-child(11){top:94.75%;left:25%}.note-point:nth-child(12){top:75%;left:6.25%}.note-point:nth-child(13){top:50%;left:0}.controls{display:flex;gap:.42em}.controls select{all:unset;background-color:#ffd6a5;color:#000;font-size:1.2rem;padding:.75em;max-width:220px;margin:0 auto;text-align:center;border-radius:10px;cursor:pointer;transition:background-color .75s;box-shadow:1px 1px 1px #000;-webkit-user-select:none;user-select:none}.controls select:hover,.controls select:focus{background-color:#ffb356}@media screen and (min-width: 600px){.clock-container{margin-top:0}.clock{width:320px;height:320px}.note-point{width:45px;height:45px;font-size:.821rem}}.Home{width:100%;height:100%;display:flex;align-items:center;justify-content:space-around;flex-direction:column;gap:.33em;max-width:1024px;margin:0 auto;padding-top:3em}.intro-section{display:flex;flex-direction:column;align-items:center;gap:1.2em}.intro-section h1{font-family:Tilt Neon,sans-serif;font-size:3rem}.start-link{all:unset;background-color:#c8e8f7;color:#101010;border-radius:8px;width:200px;padding:1em 0;text-align:center;cursor:pointer;transition:background-color .75s;border:2px solid black;box-shadow:1px 1px 1px 1px #474747;margin-bottom:10px}.start-link:hover{background-color:#88cdf0}.topic{all:unset;background-color:#ebf1f4;width:80%;text-decoration:none;color:6px solid black;cursor:pointer;text-align:left;display:flex;flex-direction:column;padding:1em;box-shadow:1px 1px 1px 1px #000;border-radius:6px;transition:all 1s}.topic:hover{transform:translate(-3%);background-color:#c6e9fa}.topic h3{font-size:1.2rem}.topic p{font-size:1rem;margin-top:4px}.topics{display:flex;height:100%;flex-direction:column;gap:2em;width:100%;align-items:center}.roadmap{height:100%;padding:3em 2em 1em;display:flex;flex-direction:column;gap:2em}.roadmap-desc{font-size:1rem;font-weight:400;line-height:1.5;text-align:center}.conventions{font-size:1rem}.conventions p{margin-bottom:4px}@media (min-width: 870px){.roadmap{max-width:720px;margin:0 auto;padding:4em 2em 2em}}.interval-card{padding:1em .65em;background-color:#639}.topic-explanation{display:flex;flex-direction:column;gap:1em}.topic-explanation h3{font-size:1.5rem}.topic-explanation p{margin-top:1.5em;font-size:1.27rem;font-weight:300;word-spacing:.15em;line-height:1.5}.interval-categories{width:100%;justify-content:space-evenly}.dissonances h3,.dissonances h4{margin-top:1em}.types-of-consonances{display:flex;gap:4em;margin-top:1em}.types-of-consonances ul,.dissonances ul{list-style:none;margin-top:.75em;font-weight:300}.interval-examples,.interval-example{display:flex;flex-direction:column;gap:1em;width:100%}.interval-examples iframe{width:80%;height:27rem}.header{width:100%;height:50px;background-color:#272727;color:#d8d8d8;display:flex;justify-content:center;align-items:center;position:fixed;z-index:2}.navbar{width:100%;height:100%}.navbar a{color:#f5f5f5;text-decoration:none;display:flex;height:100%;align-items:center;justify-content:center;gap:1em}.navbar a h4{font-family:Tilt Neon,sans-serif;font-size:1.375rem}.navbar a img{height:57%}.footer{display:flex;justify-content:center;align-items:end;padding-bottom:.4em}.footer a{color:#88cdf0;text-decoration:none;font-weight:700}*{margin:0;padding:0;box-sizing:border-box;font-family:Lato,sans-serif}html,body{width:100%;min-height:100%;background-color:#fff7ed}body{display:flex;flex-direction:column}