@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');
*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: Outfit;
}
html{
   height: 100vh;
   width: 100vw;
}

body{
   background-color: rgb(132, 132, 132);
   display: flex;
   flex-direction: column;
   align-items: center;
   height: 100vh;
   width: 100vw;
   justify-content: center;
   flex-wrap: wrap;
}

section{
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
   background-color: rgb(125, 173, 119);
   border: 5px solid rgb(55, 75, 51);
   border-radius: 10px;
   justify-content: center;
   max-width: fit-content;
}

h1{
   text-transform: uppercase;
   text-overflow: ellipsis;
   font-size: 7vw;
   max-width: 300px;
   font-size: 50px;
   text-align: center;
   display: block;
}

.mundos{
   max-width: 700px;
    margin: 50px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.mundo{
   margin: 20px;
   height: 150px;
   background-color: white;
}

a{
   text-decoration: none;
}

p{
   text-align: center;
   color: black;
   text-transform: uppercase;
   font-weight: bold;
}

img, img.img{
   width:140px;
   max-height: 100%;
   max-width: 100%;
}

canvas{
   background-color: black;
   height: auto;
   width: 600px;
   max-width: 100vw;
   min-width: 50vw;
   image-rendering: pixelated;
   image-rendering: crisp-edges;
   image-rendering: -moz-crisp-edges;
   border: 10px white solid;
}

#controles{
   display: none;
   height: 40%;
   width: 100%;
   background-color: rgba(255, 255, 255, 0.243);
   position: fixed;
   bottom: 0;
}

button.mov-control{
   background-color: rgba(0, 0, 0, 0.228);
   border: rgba(245, 222, 179, 0.504) 2px solid;
   border-radius: 500px;
   padding: 4px;
   width: min-content;
   transition: all .1s;
}

button.mov-control:active{
   transform: scale(.8);
   background-color: rgba(0, 0, 0, 0.704);
}

div.lados{
   display: flex;
   width:100%;
   justify-content: space-around;
}


span.seta{
   font-size: 70px;
}

#points{
   position: fixed;
   top: 15px;
   left: 15px;
}

@media (max-width : 466px) {
   section{
   margin-top: 10vh;
   }

   body{
      justify-content: flex-start;
      padding-top: 40px;
   }

   #controles{
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
   }

   
}