@font-face {
    font-family: sinistre;
    src: url(fonts/Sinistre-S†Caroline.woff),
    url(fonts/Sinistre-S†Caroline.otf);
}
@font-face {
    font-family: jolybolditalic;
    src: url(fonts/JolyDisplay-BoldDisplayItalic.woff),
    url(fonts/JolyDisplay-BoldDisplayItalic.otf);
}

@font-face {
    font-family: jolyregularitalic;
    src: url(fonts/JolyDisplay-RegularDisplayItalic.woff),
    url(fonts/JolyDisplay-RegularDisplayItalic.otf);
}
@font-face {
    font-family: jolyregular;
    src: url(fonts/JolyDisplay-RegularDisplay.woff),
    url(fonts/JolyDisplay-RegularDisplay.otf);
}

@font-face {
    font-family: jolybold;
    src: url(fonts/JolyDisplay-BoldDisplay.woff),
    url(fonts/JolyDisplay-BoldDisplay.otf);
}
  
  ::-moz-selection { /* Code for Firefox */   
    background: transparent;
  }
  ::selection {
    background: transparent;
  }


 body {
     font-family: jolyregular;
     font-size: 1.8vw;

 }

 .instructions{
    font-family:jolyregularitalic

 }


   #player_img {
    bottom: 20%;
    left: 15%;
    position:absolute ;
    z-index: 20;
}


#ground {
    position: fixed;
    bottom:0px;
    height:83%;
    width: 100%;
    border-top: 0.1vw solid;
}


div.text_container {
    bottom: 2%;
    left:3%;
    right:3%;
    position:fixed;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 1em;
    margin-inline-end: 1em;
    
}

button{
    -webkit-appearance: none;
    background-color: white;
    border: 0.11vw black solid;
    border-radius: 25vw;
    color:black;
    cursor:pointer;
    font-family: jolybolditalic;
}

button:hover{
border: 0.11vw transparent solid;
-webkit-box-shadow: 0px 0px 8px 2px  black;
-moz-box-shadow: 0px 0px 8px 2px  black;
box-shadow: 0px 0px 8px 2px  black;
    
}

span.button_text{
    font-size: 1.6vw;
    padding: 8px;
}

#ned {
    bottom: 21%;
    left: 8%;
    position:absolute ;
    z-index: 20;
}

#barn {
    bottom: 60%;
    right: 10%;
    position:absolute ;
    z-index: 10;
}
#tree2 {
    bottom: 70%;
    right: 7%;
    position:absolute ;
    z-index: 5;
}
#tree1 {
    bottom: 47%;
    left: 8%;
    position:absolute ;
    z-index: 11;
}

#farmer {
    bottom: 75%;
    right: 8%;
    position:absolute ;
    z-index: 10;
}

#mulino {
    bottom: 70%;
    left: 15%;
    position:absolute ;
    z-index: 10;
}

.field{
    width: 40%;
    height: 40%;
    top:10%;
    left: 30%;
    right: 30%;
    position: absolute;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
}
img.corn{
    max-width: 100%;
    max-height: 100%;
    margin: auto;
}



/* hide scroll bar */
/* width */
::-webkit-scrollbar {
    color:white;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: white; 
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: white; 
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: white; 
  }