@font-face {
    font-family: game-font;
    src: url(prstartk.ttf);
}


:root{
    font-size: 16px;
}

body{
    margin: 0;
    background-image: url('../assets/bg.png');
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vh;
    position: relative;
    font-family: game-font;
    overflow: hidden;
}

a{
  cursor: pointer;
}

main{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content:end;
    align-items: center;
}

#bus{
    /* display: inline-block; */
    /* border: 1px solid #333; */
    height: 60vh;
    position: relative;
    z-index: 99;
    text-align: center;
    margin-top: 22vh;
    display: flex;
    justify-content: center;
    align-items: end;
    /* filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4)); */
}

#demo-container{
  height: 100%;
  /* width: 100%; */
  position: relative;
  /* border: 2px solid #000; */
}

#demo-container>p{
  line-height: 1.6;
  color: #35731a;
  text-shadow: 2px 2px #FFDB53;
  display: inline-block;
  position: absolute;
  left: -150px;
  bottom: 50px;
  width: 180px;
  text-align: right;
  font-weight: bold;
}

#demo-container>img{
  height: 100%;
  transition: .4s;
  cursor: pointer;
  display: inline-block;
}

#demo-container>img:hover {
  transform: scale(.95) translateY(5px);
}

#bg-blocker{
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  background: rgba(51,51,51, .7);
  z-index: 99999;
}

video{
  opacity: 0;
  display: none;
  z-index: 0;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000000;
  width: 80%;
  border: 4px solid #000;
  box-shadow: 4px 4px 10px #333;
  border-radius: 15px;
}

#play-sign-group{
  width: 10vw;
  min-width: 145px;
  position: fixed;
  margin-left: 10%;
  right: 20%;
  bottom: -1%;
  transition: .4s;
}

#play-sign-link{
  font-size: 1vw;
  line-height: 1.4vw;
  text-decoration: none;
  position: absolute;
  top: 42%;
  left: 47%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100px;
  text-align: center;
  transition: .4s;
  color: #f1f1f1;
}

#play-sign-link:hover{
  color: #FFDB53;
  text-shadow: 2px 2px #333;
}

#play-sign-group:has(#play-sign-link:hover) {
  transform: scale(.95) translateY(5px);
}


#play-sign-bg{
  width: 100%;
  
}

#character{
    /* display: inline-block; */
    /* border: 1px solid #333; */
    height: 45vh;
    text-align: center;
    position: relative;
    margin-top: 36vh;
    z-index: 99999;
    /* filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4)); */
}

nav{
    width: 80%;
    height: 12vh;
    background-image: url('../assets/nav.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 10000;
    top:5%;
}

nav>ul{
    /* border: 1px solid #fff; */
    width: 60%;
    list-style: none;
    color: #fff;
    font-size: 1.5vw;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

#about-board{
    width: 60%;
    height: 80%;
    position: relative;
    z-index: 999;
    margin: 14vh auto 0;
    /* border: 1px solid #333; */
}

#about-board-bg{
  width: 90%;
   /* border: 1px solid #333; */
   margin-left:5%;
}


#player-img{
    position: absolute;
    /* width: 10%; */
    height: 40%;
    left: -7%;
    top: 45%;
    -webkit-filter: drop-shadow(5px 5px 5px #333);
        filter: drop-shadow(5px 5px 5px #333);
}





#about-dialogue, #board-content{
    /* border: 1px solid #333; */
    position: absolute;
    top:36%;
    /* text-align: center; */
    z-index: 9999;
    color:#fff;
    left: 15%;
    width: 70%;
    max-width: 1100px;
    /* border: 1px solid #333; */
    height: 46.8%;
    overflow: hidden;
}

#contact-board{
  display: flex;
  flex-direction: row;
  /* justify-content: center; */
  /* border: 1px solid #333; */
  width: 60%;
  height: 60%;
  position: relative;
  z-index: 999;
  margin: 22vh auto 0;
}

#contact-left{
  position: relative;
  /* border: 1px solid #333; */
}

#contact-right{
  background: url('../assets/contact-right-sign.png') center / contain no-repeat;
  /* border: 1px solid #333; */
  position: absolute;
  width: 15vw;
  height: 40vh;
  -webkit-filter: drop-shadow(1px 5px 5px #333);
        filter: drop-shadow(1px 5px 5px #333);
  /* z-index: -100; */
  right: 10px;
  bottom:-10px;
}

.cta-link{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: .9vw;
  text-decoration: none;
  position: absolute;
}

.cta-link, .cta-link:visited, .cta-link:hover, .cta-link:active {
  color: #f1f1f1;
}

.cta-link:hover{
  color:#FFDB53;
  text-shadow: 4px 4px #333;
}


.bsi-website{
  top:17.5%;
  left: 25%;
  /* border: 1px solid #333; */
}

.logo.bsi{
  width: 1.8vw;
  margin-right: 1rem;
  border-radius: 5px;
  -webkit-filter: drop-shadow(1px 1px 2px #999);
        filter: drop-shadow(1px 1px 2px #999);
}

.logo.medium{
  width: 1.8vw;
  margin-right: 1rem;
  border-radius: 5px;
  background: #000;
  padding: 3px;
  -webkit-filter: drop-shadow(1px 1px 2px #999);
        filter: drop-shadow(1px 1px 2px #999);
}

.bsi-medium{
  top:52%;
  left: 23%;
  /* border: 1px solid #333; */
}

#contact-board-bg{
  height: 100%;
  display: block;
  /* border: 1px solid #333; */
}
#contact-board-logo-container{
  position: absolute;
  top: 8%;
  right: 6%;
  z-index: 99999;
  width: 10vw;
  /* height: 3vh; */
  /* border: 1px solid #333; */
  background: url('../assets/logo-sheet.png') center / contain no-repeat;
  padding: 2.5%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate(1deg);
  -webkit-filter: drop-shadow(1px 5px 5px #333);
        filter: drop-shadow(1px 5px 5px #333);
}

#contact-board-logo{
  /* border: 3px solid blue; */
  width: 100%;
  /* height: 95%; */
  border-radius: 5px;
}

#contact-board-content{
  background: url('../assets/sheet.png') center / contain no-repeat;
  position: absolute;
  /* border: 1px solid #333; */
  height: 40vh;
  width: 19vw;
  color: #000;
  text-shadow: 2px 2px #999;
  z-index: 9999;
  top: 7%;
  left: 5%;
  -webkit-filter: drop-shadow(1px 5px 5px #333);
        filter: drop-shadow(1px 5px 5px #333);
  
  transform: rotate(-.5deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#contact-board-content>h1{
  margin-top: 20%;
  width:82%;
  margin: 2% auto 0;
  font-size: 1vw;
  /* border: 1px solid #333; */
}


#contact-follow-container{
  background: url('../assets/follow-sheet.png') center / contain no-repeat;
  /* border: 1px solid #333; */
  position: absolute;
  width: 28%;
  height: 35%;
  bottom: 29%;
  right:5%;
  padding: 2.5% 0% 2.5% 5%;
  transform: rotate(-1deg);
  -webkit-filter: drop-shadow(-3px 5px 5px #333);
        filter: drop-shadow(-3px 5px 5px #333);

  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: start;
}

#contact-follow-container>h2{
  font-size: .75vw;
  border-bottom: 4px dashed #333;
  /* width: 100%; */
  padding-bottom: 10px;
  /* border: 1px solid #333; */
  /* text-align: center; */
}

.logo-gp{
  /* border: 1px solid #333; */
  height: 10%;
  /* width: 100%; */
  font-size: .6vw;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  text-decoration: none;
}

.logo-gp, .logo-gp:visited, .logo-gp:hover, .logo-gp:active {
  color: inherit;
}

.logo-gp:hover{
  color:#4F758B;
  text-shadow: 4px 4px #FFDB53;
}

.logo{
  margin-right: 10px;
}

.logo.linkedin{
  background: url('../assets/linkedin-logo.png') center / contain no-repeat;
  width: 1.2vw;
  height: 1.2vw;
}

.logo.instagram{
  background: url('../assets/ig-logo.png') center / contain no-repeat;
  width: 1.2vw;
  height: 1.2vw;
}

.logo.twitter{
  background: url('../assets/twitter-logo.png') center / contain no-repeat;
  width: 1.2vw;
  height: 1.2vw;
}

.form{
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  /* border: 1px solid #333; */
  height: 30vh;
  width: 16vw;
  margin-top: 2%;
}

input{
  font-family: game-font;
  font-size: .7vw;
  width: 95%;
  height: 7%;
}

#form-btn{
  font-family: game-font;
  font-size: .7vw;
  /* padding: 10px; */
  width: 96%;
  height: 12%;
  border-radius: 20px;
  background: #555;
  color: #f1f1f1;
  border: 3px solid #333;
  cursor: pointer;
}
#form-btn:hover{
  color: #333;
  background: #FFDB53;

}



textarea{
  font-family: game-font;
  font-size: .7vw;
  width: 95%;
}


#about-dialogue>p{
  font-size: 1vw;
  line-height: 2.1vw;
  /* text-align: center; */
}

#board-content{
  height: 42%;
}



#about-title{
  z-index: 9999;
  color:#fff;
  position: absolute;
  top:18%;
  left: 10%;
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* border: 1px solid #fff; */
  height: 17%;
}

#about-title>h1{
  font-size: 1.4vw;
  line-height: 2.2rem;
  padding: 0;
}

#logo{
  /* height: 5vh; */
  color: #FFDB53;
  text-shadow: 2px 2px #333;
  width: 30%;
  /* border: 1px solid #333; */
  margin-top: 0;
}

#about-board>div>div{
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-around;
}

#about-board>div>h1{
    text-align: center;
    /* text-decoration: underline; */
}


#render-section{
    overflow: auto;
    width: 100vw;
    height: 100vh;
}

.nav-btn{
    cursor: pointer;
    color: #fff;
    transition: .4s ease;
    padding-bottom: 5px;
    border-bottom: 4px dashed transparent;
}

.active-link{
  color: #FFDB53;
  text-shadow: 2px 2px #333;
  border-bottom: 4px dashed #FFDB53;
}


.nav-btn:hover{
    color: #FFDB53;
    text-shadow: 2px 2px #333;
    border-bottom: 4px dashed #FFDB53;
}

#career{
    height: 60vh;
    width: 60%;
    text-align: center;
    position: relative;
    margin: 22vh auto 0;
    z-index: 99999;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    /* border: 1px solid #fff; */
}

.career-char{
    height: 50vh;
}

/* Book Flip Styling */
.book{
  /* border:1px solid #333; */
  position:relative;
  width: 35%;
  min-width: 350px;
  height: 100%;
  transition: .4s;
}

.paper{
  /* border: 1px solid red; */
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left: -0px;
  perspective: 1500px;
}

#prev-btn, #next-btn{
  color: #f1f1f1;
  font-family: game-font;
  border: none;
  background-color: transparent;
  cursor: pointer;
  width: 3vw;
  height: 3vw;
  border-radius: 10px;
  font-size: 2vw;
  transition: all 0.4s ease;
}

#next-btn{
  background: url("../assets/arrow-btn.png") center / contain no-repeat;
  transform: rotate(90deg);
}

#prev-btn{
  background: url("../assets/arrow-btn.png") center / contain no-repeat;
  transform: rotate(-90deg);
}

#prev-btn:focus, #next-btn:focus{
  outline: none;
}

#prev-btn:hover{
  background: url("../assets/arrow-clicked.png") center / contain no-repeat;
}

#next-btn:hover{
  /* background-color: #eee; */
  background: url("../assets/arrow-clicked.png") center / contain no-repeat;
}



.front,
.back{
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left: 0;
  transform-origin: left;
  transition: all .75s;
}

.book-cover-front{
  width: 100%;
  position: absolute;
  left: -10px;
}

.book-cover-back{
  width: 100%;
  position: absolute;
  right: -10px;
}

.book-cover-front{
  z-index: 0;
  width: 102%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 48%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.book-page{
  z-index: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.book-cover-back{
  z-index: -90;
  width: 102%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 48%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}


.front{
  z-index: 1;
  backface-visibility: hidden;
  
}

.back{
  z-index: 0;
}

.front-content,
.back-content{
  width: 80%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10;
  position: relative;
}

#f1{
  color: #f1f1f1;
  line-height: 2.5rem;
  text-align: center;
}

.cover-obj{
  width: 50px;
}


#tree{
  width: 120px;
}

.page-obj{
  width: 40%;
  position: absolute;
  top:18%;
  left: 12%;
}

.career-obj-gp{
  /* border: 1px solid #333; */
  background: url('../assets/text-box.png') center / contain no-repeat;
  padding: 5px;
  /* height: 0%; */
  position: relative;
  width: 100%;
  height: 40%;
}

.obj{
  position: absolute;
}

#apple{
  width: 10%;
  bottom:20%;
  right: 20%;
  transform: rotate(-20deg);
}

#spoon{
  width: 12%;
  bottom:30%;
  right: 20%;
  transform: rotate(190deg);
}

#grad-hat{
  width: 20%;
  top:25%;
  right: 12%;
  transform: rotate(10deg);
  z-index: 999999;
}

#needle{
  width: 11%;
  bottom:22%;
  right: 20%;
  transform: rotate(210deg);
}

#doctor-house{
  width: 30%;
  top:18%;
  left: 15%;
}

#pencil{
  width: 12%;
  transform: rotate(25deg);
  margin-left: -10%;
  margin-top: -40%;
}

#paper-roll{
  width: 40%;
  transform: rotate(60deg);
  margin-bottom: -40%;
  margin-left: 0%;
}


.dialogue-content{
  font-size: .75vw;
  /* background: url('../assets/text-box.png') center / contain no-repeat; */
  line-height: 1.4vw;
  text-align: left;
  /* margin-top: 5px; */
  position: relative;
}



#teacher-intro{
  color: orangered;
}

#chef-intro{
  color: #6d3917;
}

.back-content{
  transform: rotateY(180deg);
}

#p1{
  z-index: 4;
}

#p2{
  z-index: 3;
}

#p3{
  z-index: 2;
}

#p4{
  z-index: 1;
}

.flipped .front,
.flipped .back{
  transform: rotateY(-180deg);
}

.career-title{
  text-align: center;
  /* line-height: 200%; */
}

.career-fig{
  -webkit-filter: drop-shadow(5px 5px 5px #333);
        filter: drop-shadow(5px 5px 5px #333);
  height: 50%;
  margin-top: 10%;
}









#grass{
  display: inline-block;
  /* border: 1px solid #333; */
  width: 100vw;
  height: 20vh;
  position: fixed;
  bottom: 0px;
  /* filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4)); */
}

.grass-ground{
  width: clamp(1500px, 100vw, 100vw);
  height: 100%;
  z-index: -99;
  position: relative;
}



.grass-piece{
  position: fixed;
  width: 80px;
  bottom: 17%;
}


.cloud{
  position: absolute;
}

.x1{
  transform: scale(.35);
  top: -300px;
  -webkit-animation: animateCloud 35s linear infinite;
	-moz-animation: animateCloud 35s linear infinite;
	animation: animateCloud 35s linear infinite;
}

.x2{
  transform: scale(.7);
  top: -180px;
  -webkit-animation: animateCloud 22s linear infinite;
	-moz-animation: animateCloud 22s linear infinite;
	animation: animateCloud 22s linear infinite;
}

.x3{
  transform: scale(.3);
  top: -120px;
  -webkit-animation: animateCloud 45s linear infinite;
	-moz-animation: animateCloud 45s linear infinite;
	animation: animateCloud 45s linear infinite;
}

.x4{
  transform: scale(.6);
  top: -50px;
  -webkit-animation: animateCloud 35s linear infinite;
	-moz-animation: animateCloud 35s linear infinite;
	animation: animateCloud 35s linear infinite;
  animation-delay: 7s;
  margin-left: -1500px;
}

.x5{
  transform: scale(.4);
  top: -20px;
  -webkit-animation: animateCloud 55s linear infinite;
	-moz-animation: animateCloud 55s linear infinite;
	animation: animateCloud 55s linear infinite;
  animation-delay: 15s;
  margin-left: -1500px;
}

.x6{
  transform: scale(.6);
  top: -100px;
  -webkit-animation: animateCloud 20s linear infinite;
	-moz-animation: animateCloud 20s linear infinite;
	animation: animateCloud 20s linear infinite;
  animation-delay: 20s;
  margin-left: -1500px;
}

.x7{
  transform: scale(.5);
  top: -28vh;
  -webkit-animation: animateCloud 40s linear infinite;
	-moz-animation: animateCloud 40s linear infinite;
	animation: animateCloud 40s linear infinite;
}

.x8{
  transform: scale(1);
  top: -17vh;
  -webkit-animation: animateCloud 17s linear infinite;
	-moz-animation: animateCloud 17s linear infinite;
	animation: animateCloud 17s linear infinite;
}


/* Animation function */
@keyframes cloudMove {
  0% {left: -50vw}
  100% {left: 100vw}
}

/* KEYFRAMES */

@-webkit-keyframes animateCloud {
  0% {
    margin-left: -1500px;
  }
  10%{
    margin-left: -1000px;
  }
  100% {
      margin-left: 100%;
  }
}

@-moz-keyframes animateCloud {
  0% {
    margin-left: -1500px;
  }
  10%{
    margin-left: -1200px;
  }
  100% {
      margin-left: 100%;
  }
}

@keyframes animateCloud {
  0% {
    margin-left: -1500px;
  }
  10%{
    margin-left: -1200px;
  }
  100% {
      margin-left: 100%;
  }
}