@import url('https://fonts.googleapis.com/css2?family=Homemade+Apple&family=Pixelify+Sans:wght@400..700&family=Playwrite+RO:wght@100..400&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');

body {
   margin:0;
   padding:0;
   font-size: 10px;
   font-family: Century Gothic, Helvetica, sans-serif;
   background-color: blue;
   color: blue;
}

h1{
   font-size: 5rem;
   flex-wrap: wrap;
}

.pixelify-sans-headers {
   font-family: "Pixelify Sans", sans-serif;
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;
   text-align: center;
 }

 #next-token{
  font-size: 2rem;
 }

 #wordel{
  position: absolute;
  bottom:0;
  right:0;
 }

 .word-color{
  line-height: 0;
  color: rgba(99, 88, 88, 0.9);
 }

 .header{
  line-height: 60px;
  margin-top: -20px;
  padding-top: 2rem;
 }

 .img-lift{
  z-index: 20;
 }

.main-content{
   display: flex;
   flex-direction: column;
   align-items: center;
   margin: 0;
   padding: 0;
   width: 100%;
   height: 1472px;
   background: url("../images/kitchen_bg.png") no-repeat, url("../images/kitchen_bg_flipped.png") repeat-x;
   background-size: 616px 936px, 616px 936px;
   background-origin: content-box, content-box;
}

#logo-background{
   position: relative;
   display: flex;
   width: 500px;
   height: 700px;
   color: white;
   border-radius: 10px;
   background-color: rgb(80, 80, 211);
   background-image: url("../images/PixelCat.png");
   background-repeat: no-repeat;
   background-position: center top;
   background-size: 510px auto;
   justify-content: center;
}

.wings-img{ 
   width: 300px;
   height: auto;
}

.cup-img{
  width: 300px;
  height: auto;
}

.arrows-img{
   width: 150px;
   padding: 15px;
}

#game-end {
   display: none;
   width: 100vw;
   align-items: center;
   justify-content: center;
 }

 #game-end-winner{
  display: none;
  align-content: center;
  justify-content: center;
  text-align: center;
 }

 #game-end-game-over{
  align-content: center;
  justify-content: center;
  text-align: center;
 }

 #game-end .circle{
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 700px;
   height: 700px;
   border-radius: 50%;
   background-color: rgb(80, 80, 211);
}

#game-container {
   width: 100vw;
   height: 35vh;
   display: none;
   flex-direction: row;
   justify-content: center;
 }

 #game-screen {
   display: none;
   align-content: center;
   align-items: center;
   padding: 20px 0px;
   overflow: hidden;
   position: relative;
   background-color: rgba(2, 2, 2, 0.9);
 }

 body button {
   font-size: 30px;
   background-color: #870007;
   color: #fff;
   padding: 20px 40px;
   border: 0;
   box-shadow: 0;
   border-radius: 5px;
   margin-bottom: 20px;
 }
 #game-container .stats{
   padding: 15px;
   min-width: 300px;
   background-color: rgb(68, 51, 122);
   color: white;
 }

 #game-intro{
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   justify-content: flex-end;
 }

.score{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 2px;
}

 #game-intro button{
   align-self: center;
 }

 .game-intro-text{
   display: flex;
   flex-direction: row;
 }

 .game-intro-text p {
   width: 200px;
   font-size: 12px;
   padding: 15px;
 }

 .direction-flip {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
 }

 .moveToCenter{
  animation: chefMoveToCenter 10s ease-in;
 }

 @keyframes chefMoveToCenter {
  from {start: 20px;}
  to {left: 200px;}
}