@import url(https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,300;1,300&family=Spectral+SC:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap);
.app .title-container{width:100%;height:100vh;background:#e6dfea;background:radial-gradient(circle at bottom left, rgb(230, 223, 234) 0%, rgb(209, 190, 224) 13%, rgb(147, 118, 203) 48%, rgb(95, 62, 188) 62%, rgb(69, 26, 167) 76%, rgb(64, 19, 163) 88%, rgb(5, 8, 39) 100%)}.app .info-background{position:relative;width:100%;background-repeat:no-repeat;background-color:#160e16;background-position:top;overflow-y:hidden}

.title-section .spellward-title-logo-container-desktop{position:sticky;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100vw;height:100vh}.title-section .spellward-title-logo-container-desktop .spellward-title-logo-desktop{width:60%;height:auto}.title-section .parallax-title-container-desktop .spellward-stars-container-desktop{display:flex;justify-content:center;width:100%;height:100%}.title-section .parallax-title-container-desktop .spellward-stars-container-desktop .spellward-stars-desktop{position:absolute;width:100%;height:auto}.title-section .parallax-title-container-desktop .spellward-mountain-container-desktop{display:flex;justify-content:flex-start;align-items:flex-start;width:100vw;height:100%;z-index:1}.title-section .parallax-title-container-desktop .spellward-mountain-container-desktop .spellward-mountain-desktop{width:90vw;height:auto}.title-section .parallax-title-container-desktop .forest-background-container-desktop{display:flex;justify-content:center;align-items:center;width:100%;height:90%}.title-section .parallax-title-container-desktop .spellward-forest-back-container-desktop{display:flex;justify-content:center;align-items:flex-start}.title-section .parallax-title-container-desktop .spellward-forest-back-container-desktop .spellward-forest-back-desktop{width:100vw;height:auto}.title-section .parallax-title-container-desktop .spellward-forest-back-container-desktop{z-index:2}.title-section .parallax-title-container-desktop .spellward-forest-front-container-desktop{display:flex;justify-content:center;align-items:flex-start}.title-section .parallax-title-container-desktop .spellward-forest-front-container-desktop .spellward-forest-front-desktop{width:100vw;height:auto}.title-section .parallax-title-container-desktop .spellward-forest-front-container-desktop{z-index:3}.title-section .parallax-title-container-desktop::-webkit-scrollbar{display:none}
.title-section{position:relative;display:flex;justify-content:center;width:100%;height:100vh;background-repeat:no-repeat;background-size:auto 100%;overflow:hidden}.title-section .spellward-title-logo-container-mobile{position:absolute;top:20%;width:90%}.title-section .spellward-title-logo-container-mobile .spellward-title-logo-mobile{width:100%;height:auto}.title-section .spellward-mountain-container-mobile{position:absolute;bottom:0;width:175%;z-index:1}.title-section .spellward-mountain-container-mobile .spellward-mountain-mobile{width:100%;height:auto}.title-section .spellward-forest-back-container-mobile{position:absolute;bottom:0;right:-46%;width:175%;z-index:2}.title-section .spellward-forest-back-container-mobile .spellward-forest-back-mobile{width:100%;height:auto}.title-section .spellward-forest-front-container-mobile{position:absolute;bottom:-12%;width:175%;z-index:3}.title-section .spellward-forest-front-container-mobile .spellward-forest-front-mobile{width:100%;height:auto}
.info-section .info-card:first-child{margin-top:0}@media(orientation: portrait){.info-section .info-card:first-child{margin-top:2vh}}
.video-container{position:relative;display:flex;align-items:center;justify-content:center;width:100%;cursor:pointer}.video-container .video{width:100%;border-radius:1vw}.video-container .video-button{position:absolute;bottom:0}
.button{transition:.25s;display:inline-block;background:linear-gradient(#211327, #211327) padding-box,linear-gradient(to right, #FF4D8D, #6424CB) border-box;width:-moz-max-content;width:max-content;padding:.4vw 2.5vw;font-size:1.5vw;border:.25vw solid rgba(0,0,0,0);border-radius:2vw;cursor:pointer}.button:hover{transform:scale(1.1);background:linear-gradient(#351f3f, #351f3f) padding-box,linear-gradient(to right, #ff5e99, #6d31cc) border-box}
.info-card{display:flex;flex-wrap:wrap;justify-content:center;text-align:center;margin-top:5vw}.info-card .info-container{display:flex;justify-content:space-around;width:80vw;margin-top:2vw}.info-card .info-container .video-card-container{width:40vw}.info-card .info-container .card-text-container{display:flex;justify-content:space-between;flex-direction:column;width:40vw;height:100%;font-size:1.35vw;text-align:left}.info-card .info-container .card-text-container p{font-weight:200}.info-card:first-child{margin-top:0}@media(orientation: portrait){.info-container{flex-direction:column;align-items:center}.info-container .video-card-container{width:80vw !important}.info-container .card-text-container{width:80vw !important;font-size:3vw !important;margin-top:2vw;text-align:center !important}.info-container .card-text-container p{margin-top:2vw}}
.roles-section{margin-top:5vw}.roles-section .roles-header{display:flex;justify-content:center;flex-wrap:wrap;text-align:center}.roles-section .roles-header .card-header{width:100%}.roles-section .roles-header .roles-subheader-text{width:-moz-max-content;width:max-content}.roles-section .available-roles{position:relative;display:flex;justify-content:center;width:100%;min-height:36vw}.roles-section .available-roles .role-info-container{padding:1vw}.roles-section .available-roles .role-info-container .role-info-text-header{font-size:2.4vw;font-weight:500}.roles-section .available-roles .role-info-container .role-info-text{font-size:1.1vw;font-weight:200}@media(orientation: portrait){.available-roles{position:relative !important;display:inline-flex !important;justify-content:flex-start !important;height:97vw !important;margin:5vw 1vw !important;overflow-x:scroll !important}.available-roles .role-info-container{padding:5vw 2vw 2vw 2vw !important}.available-roles .role-info-container .role-info-text-header{font-size:4.8vw !important}.available-roles .role-info-container .role-info-text{font-size:3vw !important}}
.role-card-container{width:18.5vw;height:100%;background-color:#29212d;border-radius:1vw;margin:0 .7vw}.role-card-container .role-card-image-container{position:relative;width:100%;height:18.5vw;padding:.3vw}.role-card-container .role-card-image-container .role-card-image{width:100%;height:auto;border-radius:.7vw}@media(orientation: portrait){.role-card-container{min-width:45vw !important;min-height:100% !important}.role-card-container .role-card-image-container{height:40vw !important;padding:1vw !important}}
.how-to-play-section{margin-top:5vw}.how-to-play-section .how-to-play-header-text{display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center}.how-to-play-section .how-to-play-header-text .roles-subheader-text{max-width:70vw;margin-top:2vw}.how-to-play-section .how-to-play-header-text .roles-subheader-text .card-subheader:last-child{margin-top:3vw}.how-to-play-section .links-container{display:flex;justify-content:center}.how-to-play-section .links-container .media-button-container{width:10vw;height:20vw;margin:5vw}@media(orientation: portrait){.media-button-container{width:15vw !important}}
.media-button-container{position:relative;display:flex;flex-direction:column;justify-content:space-around;width:100%;height:100%;cursor:pointer}.media-button-container .media-button-svg-container{width:100%}.media-button-container .media-button-svg-container svg{transition:.2s;width:100%;height:auto}.media-button-container .media-button-info-text{display:flex;justify-content:center;align-items:center;text-align:center;cursor:pointer}.media-button-container:hover svg{transform:scale(1.1)}
.footer{display:flex;justify-content:center;flex-wrap:wrap;width:100%;margin-top:5vw}.footer-content-container{display:flex;justify-content:space-around;width:80vw;border-top:2px solid #4c414f}.footer-content-container .links-container{position:relative;display:flex;justify-content:space-between;margin-top:2vw;width:100%}.footer-content-container .links-container .footer-logo-container{position:relative;display:flex;justify-content:center;align-items:center;width:10vw}.footer-content-container .links-container .footer-logo-container img{width:100%;height:auto}.footer-content-container .footer-link{display:flex;justify-content:center;align-items:center;transition:.1s;font-size:1.5vw;cursor:pointer}.footer-content-container .footer-link:hover{transform:scale(1.1)}.footer .license-text{width:60vw;margin-top:2vw;margin-bottom:2vw;text-align:center;font-size:1vw;font-weight:200;opacity:.3}
*{margin:0;padding:0;font-family:"Spectral SC",serif;font-optical-sizing:auto;font-weight:300;font-style:normal;color:#fff;box-sizing:border-box}html,body{background-color:#160e16;overflow-x:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none}.card-header{width:100%;font-size:4vw;font-weight:600}.card-subheader{width:100%;font-size:2vw;font-weight:200}@media(orientation: portrait){.card-header{font-size:7vw !important}.card-subheader{width:100%;font-size:4vw;font-weight:200}}