*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Roboto,sans-serif}a,a:active{color:#000;text-decoration:none}header{margin-top:25px;text-align:center}main{margin-top:20px;display:grid;grid-template-columns:.2fr 1fr;grid-template-rows:.5fr 1fr;gap:20px;padding:0 10px}.progress-container{grid-column:1/span 2;grid-row:1/1}.progressbar-container{max-width:400px;justify-self:center}.semester-bar{width:100%;max-width:150px;display:flex;flex-direction:column;gap:10px;margin:10px 0}.semester{width:100%;text-align:center;background-color:#d6d6d6;border-radius:10px;height:50px;border:none;font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:4px 0}.semester:hover{background-color:#000}.semester:hover .semester-button,.semester:hover .trash{color:#fff}.semester-button{background-color:transparent;border:none;font-weight:700;height:100%;width:100%}.active{background-color:#000}.active .semester-button,.active .trash{color:#fff}#credit{width:30px}.add-semester{border-radius:15px;border:none;padding:0 4px;font-weight:700;background-color:#3e98c7;color:#fff;height:50px}.add-semester:hover{background:radial-gradient(circle,red,orange,#ff0,green,#00f,indigo,violet);color:#fff}.result-input-container{margin:20px 0}.result-header{display:flex;justify-content:space-between}.labels,.inputs{display:grid;grid-template-columns:1fr .1fr .1fr .1fr;gap:20px;margin-top:10px}.trash{background-color:transparent;border:none}.trash-course button{width:20px}.trash-course button svg{width:100%}.semester-container{max-width:800px}.results{display:flex;justify-content:space-between}.results input{height:25px;padding:2px 5px;border:1px solid black;border-radius:10px}.results select{height:25px;border:1px solid black}.results button{padding-top:20px;background-color:transparent;border:none}.course-name{width:50%}.course-name input{width:100%}.semester-header{display:flex;justify-content:space-between;font-size:1.2rem;font-weight:700;margin-bottom:10px}.course{display:flex;flex-direction:column;gap:5px}.course-buttons{margin:20px 0;display:flex;justify-content:center;gap:10px}.add-course{background-color:#036764;border:none;height:35px;width:80px;border-radius:10px;color:#fff;font-weight:700;padding:0 3px}.clear-all{background-color:#d62246;border:none;height:35px;width:80px;border-radius:10px;color:#fff;font-weight:700}.small{width:40px}.small input{width:100%}.inputs{display:flex;text-align:left;justify-content:space-evenly}@media screen and (min-width: 720px){main{margin-top:20px;display:grid;grid-template-columns:.2fr 1fr;grid-template-rows:.3fr 1fr;padding:0 30px}.progressbar-container{width:20%;margin-bottom:10px}header{padding:0 40px;display:flex;justify-content:center;align-items:center}header .options{display:flex;align-items:center;gap:20px}.semester{flex-direction:row;width:110px;padding:0 5px}.semester-bar{min-width:85px}.progress-container{display:flex;width:100%;justify-content:space-evenly}.tr-head{display:grid;grid-template-columns:.7fr .1fr .1fr;gap:20px;text-align:left}}.CircularProgressbar{width:100%;vertical-align:middle}.CircularProgressbar .CircularProgressbar-path{stroke:#3e98c7;stroke-linecap:round;-webkit-transition:stroke-dashoffset .5s ease 0s;transition:stroke-dashoffset .5s ease 0s}.CircularProgressbar .CircularProgressbar-trail{stroke:#d6d6d6;stroke-linecap:round}.CircularProgressbar .CircularProgressbar-text{fill:#3e98c7;font-size:20px;dominant-baseline:middle;text-anchor:middle}.CircularProgressbar .CircularProgressbar-background{fill:#d6d6d6}.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-background{fill:#3e98c7}.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-text{fill:#fff}.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-path{stroke:#fff}.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-trail{stroke:transparent}