.main-container{height:100vh}.no-scroll{overflow-y:hidden}.scroll{scroll-snap-type:y mandatory;overflow-y:scroll}
.mascot-container{height:min(25vw,20vh);animation:1s ease-out .5s forwards bounce;position:relative;top:calc(50% - min(25vw,20vh)/2);transform:translateY(-70vh)}.hero-main{scroll-snap-align:start;width:100vw;height:100vh;position:relative}.first-fade{opacity:0;animation:1s 2s forwards fadeIn}.hero-title{color:#fff;font-family:var(--font-kanit);text-align:right;font-size:min(10vw,15vh)}.hero-subtitle{color:#d7d7d7;font-family:var(--font-kanit);text-align:right;font-size:min(4vw,6vh)}.red-border{border-bottom:12px solid #ac2b37}.scroll-down-box{opacity:0;flex-direction:column;align-items:center;gap:1rem;width:100vw;animation-name:verticalFadeIn,hover;animation-duration:1.5s,.75s;animation-timing-function:ease,ease-out;animation-iteration-count:1,infinite;animation-direction:normal,alternate;animation-play-state:running,running;animation-delay:3.5s;animation-fill-mode:forwards,none;animation-timeline:auto,auto;display:flex;position:absolute;bottom:50px}.scroll-down-text{color:#fff;font-family:var(--font-kanit);text-align:center;font-size:1.5rem}.hero-title-box{opacity:0;visibility:hidden;animation:1s 3s forwards verticalFadeIn;position:absolute;top:25px;right:60px;transform:translateY(20px)}.hero-blur{-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.clickable{cursor:pointer;transition:transform .25s;transform:scale(1)}.clickable:hover{transform:scale(1.03)}.clickable:active{transform:scale(.97)}@keyframes bounce{0%{opacity:1;transform:translateY(-70vh)}20%{transform:translateY(5vh)}36%{transform:translateY(-2vh)}52%{transform:translateY(0)}80%{opacity:1}to{opacity:0;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes verticalFadeIn{0%{opacity:0;visibility:visible;transform:translateY(20px)}to{opacity:1;visibility:visible;transform:translateY(0)}}@keyframes hover{0%{transform:translateY(0)}to{transform:translateY(7px)}}
.introduction-main{scroll-snap-align:start;gap:7rem;height:100vh;padding:30px 40px;display:flex}.white-border{border-bottom:12px solid #fff}.introduction-left{flex-direction:column;justify-content:space-around;gap:2rem;width:100%;height:100%;padding:5rem 0;display:flex}.introduction-right{background-color:#a9b0b7;border:8px solid #fff;border-radius:2rem;flex-shrink:0;width:min(50%,80vh - 48px);height:100%;position:relative;overflow:hidden}.introduction-right:after{content:"";pointer-events:none;background:radial-gradient(#0000 60%,#0006 100%);position:absolute;inset:0}.introduction-title{color:#fff;font-family:var(--font-inter);font-size:4rem;font-weight:500}.introduction-description{color:#fff;font-family:var(--font-inter);flex:1;min-height:0;font-size:1.4rem;overflow-y:scroll}.introduction-left-top{flex-direction:column;flex:1;gap:2rem;min-height:0;display:flex}.introduction-left-bottom{flex:0;gap:1rem;display:flex}.introduction-background-image{animation:.5s ease-in-out fadeOut}.introduction-image{transition:transform .5s;animation:.5s ease-in-out fadeIn;transform:scale(1)}.introduction-image:hover{transform:scale(1.03)translateY(-.5rem)}.introduction-highlight{color:#e0d020;cursor:pointer;transition:color .25s}.introduction-highlight:hover{text-decoration:underline}.introduction-selected{color:#f2ff00;text-decoration:underline}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}
.media-link{cursor:pointer}.media-button{border-radius:100%;position:relative;overflow:hidden;box-shadow:0 4px 12px #00000026}.media-transition{transition:transform .25s}.media-transition:hover{transform:scale(1.05)}.media-transition:active{transform:scale(.97)}
.coursework-main{scroll-snap-align:start;background-color:#fff;flex-direction:column;justify-content:space-between;gap:3.5rem;height:100vh;padding:30px 40px;display:flex}.coursework-top{flex-shrink:0;justify-content:space-between;align-items:baseline;gap:3rem;display:flex}.coursework-title{color:#ac2b37;font-family:var(--font-inter);flex-shrink:0;font-size:4rem;font-weight:600}.coursework-controls{flex:1;justify-content:center;gap:5rem;display:flex}.coursework-bottom{flex:1;gap:3rem;display:flex}.coursework-term-description{flex-direction:column;flex-shrink:0;gap:2rem;width:30%;display:flex}.coursework-term-title{color:#ac2b37;font-family:var(--font-inter);font-size:2.5rem;font-weight:500}.coursework-term-text{color:#ac2b37;font-family:var(--font-inter);font-size:1.5rem;font-weight:400}
.bubble-display-main{gap:1rem;display:flex}.bubble-display-text{color:#ac2b37;font-family:var(--font-inter);font-size:2rem;font-weight:550}.bubble-display-bubble{cursor:pointer;border:3px solid #ac2b37;border-radius:100%;width:1.75rem;height:1.75rem;transition:transform .25s,background-color .25s}.bubble-display-bubble:hover{transform:scale(1.03)}.bubble-display-bubble:active{transform:scale(.97)}.bubble-display-indicators{align-items:center;gap:.5rem;display:flex}.bubble-display-filled{background-color:#ac2b37}
.course-card-main{border:4px solid #ac2b37;border-radius:2rem;flex-direction:column;gap:3rem;width:100%;height:100%;padding:1rem 2rem;animation:.6s riseIn;display:flex;box-shadow:0 4px 12px #00000026}.course-card-top{flex-shrink:0;justify-content:space-between;align-items:center;gap:6rem;display:flex}.course-card-title{color:#ac2b37;font-family:var(--font-inter);font-size:2.75rem;font-weight:500}.course-card-grade{color:#ac2b37;font-family:var(--font-inter);font-size:2.75rem;font-weight:600}.course-card-middle{color:#ac2b37;font-family:var(--font-inter);flex:1;font-size:1.5rem;font-weight:450;overflow-y:scroll}.course-card-bottom{flex-shrink:0;justify-content:space-between;display:flex}.course-card-arrows{align-items:center;gap:4rem;display:flex}.course-card-progress{color:#ac2b37;font-family:var(--font-inter);font-size:2.5rem;font-weight:600}.course-card-prev,.course-card-next{color:#ac2b37;font-family:var(--font-inter);font-size:3rem;font-weight:600}.course-card-middle ul li{margin-bottom:1rem}.course-card-clickable{cursor:pointer;transition:transform .25s;transform:scale(1)}.course-card-clickable:hover{transform:scale(1.05)}.course-card-clickable:active{transform:scale(.96)}@keyframes riseIn{0%{transform:translateY(12px)}to{transform:translate(0)}}
.coming-soon-card-main{border:4px solid #ac2b37;border-radius:2rem;justify-content:center;align-items:center;width:100%;height:100%;padding:1rem 2rem;animation:.6s riseIn;display:flex;box-shadow:0 4px 12px #00000026}.coming-soon-card-text{color:#ac2b37;font-family:var(--font-inter);font-size:3rem;font-weight:500;transition:transform .25s}.coming-soon-card-text:hover{transform:scale(1.05)}@keyframes riseIn{0%{transform:translateY(12px)}to{transform:translate(0)}}