@import url('https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap');

* {
    box-sizing: border-box;
}

body {
    background-image: url(/img/—Pngtree—jungle_5631421.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.flex-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1%;
    font-family: 'Bungee Shade', cursive;
    font-size: x-large;
    color: 313715;
    /* text-shadow: 2px 2px #664228; */
}

.flex-grid {
    display: flex;
    justify-content: center;
}

.grid {
    width: 200px;
    height: 400px;
    display: flex;
    flex-wrap: wrap;
    background-color: rgba(213, 218, 223, 0.4);
  
}

.grid div {
    height: 20px;
    width: 20px;

}

.tetromino {
    background-color: blue;
    border: 2px solid black;
   
}

.mini-grid {
    margin-left: 50px;
    width: 80px;
    height: 80px;
    display: flex;
    flex-wrap: wrap;
    /* background-color: rgba(248, 252, 250, 0.3); */

}

.mini-grid div {
    height: 20px;
    width: 20px;
}


.mini-tut {
    margin-left: 50px;
    width: 200px;
    height: 200px;
    display: flex;
    flex-wrap: wrap;
 
}

.mini-tut div {
    height: 50px;
    width: 50px;
}

.btns {
    /* font-family: 'Bungee Shade', cursive; */
    color: #161615;
    /* text-shadow: 2px 2px rgb(8, 8, 8); */
    font-size: large;
}
.btns-controls {
    font-family: 'Bungee Shade', cursive;
    color: #664228;
    /* text-shadow: 2px 2px rgb(8, 8, 8); */
    font-size: medium;
}