@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   background: #17153b;
   color: #fff;
   scroll-behavior: smooth;
}

.app {
   display: flex;
   min-height: 100vh;
   align-items: center;
   flex-wrap: wrap;
   position: relative;
}

.game {
   display: flex;
   justify-content: center;
   gap: 50px
}

.game,
.windows {
   flex: 1;
}

.game-header {
   margin-bottom: 10px;
   display: flex;
   justify-content: space-between;
}

.game-text {
   font-size: 20px;
   font-family: "Press Start 2P";
   color: #5542c5
}


canvas {
   outline: 5px solid #221a50;
   box-shadow: 0px 0px 300px 0px #221a50;
}

.header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 65px;
   flex-wrap: wrap;
}

.header-main {
   flex: 1 1 200px
}

.header-logo {
   max-width: 120px;
}

.header-links {
   display: flex;
   gap: 20px;
   padding: 10px;
}

.header-link {
   font-size: 16px;
   color: #fff;
   font-family: "Montserrat";
   text-decoration: none;
   transition: 0.2s;
}

.header-link:hover {
   background: #fff;
   color: #000;
}

.keyboard {
   margin-top: 20px;
}

.keyboard-result {
   margin-bottom: 20px;
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   min-height: 130px;
   align-items: center;
   padding: 20px;
   position: relative;
   border: 10px solid #221a50;
}

.moveto {
   background: #382b84;
   padding: 15px;
   display: inline-block;
   color: #fff;
   cursor: pointer;
   font-family: "Press Start 2P";
   font-size: 20px;
   border-radius: 5px;
   position: relative;

}

.moveto-active {
   background: #533fc4;
}

.moveto-repeater {
   display: flex;
   align-items: center;
   gap: 20px;
}

.moveto-count {
   background: transparent;
   border: 0;
   color: #fff;
   font-size: 16px;
   border-bottom: 1px solid #fff;
   font-family: "Montserrat";
   text-align: center;
   padding: 10px;
   outline: 0;
   max-width: 100px;
}

.hidden {
   display: none;
}

.win-result {
   font-family: "Press Start 2P";
   font-size: 70px;
}

.next-lvl {
   font-family: "Montserrat";
   background: #382b84;
   padding: 15px 50px;
   color: #d7d0ff;
   font-size: 20px;
   font-weight: 600;
   border-top: 4px solid #513ebd;
   border-left: 4px solid #513ebd;
   border-right: 10px solid #221a50;
   border-bottom: 10px solid #221a50;
   margin: 20px 0;
   cursor: pointer;
}

.next-lvl:active {
   border-top: 4px solid #221a50;
   border-left: 4px solid #221a50;
   border-right: 10px solid #513ebd;
   border-bottom: 10px solid #513ebd;
}

.keyboard-buttons {
   display: flex;
   gap: 20px;
   margin-bottom: 20px;
   flex-wrap: wrap;
   align-items: center;
}


.keyboard-icon,
.moveto-icon {
   max-width: 40px
}



.keyboard-btn {
   background: #382b83;
   padding: 20px;
   border: 5px solid #221a50;
   color: #fff;
   font-family: "Montserrat";
   font-size: 20px;
   font-weight: 600;
   letter-spacing: 0.5px;
   cursor: pointer;
   transition: 0.5s;
}

.keyboard-btn:hover {
   opacity: 0.6;
}

.play {
   background: #2b8332;
   border: 5px solid #1a5026;
}

.repeat {
   background: #832b2b;
   border: 5px solid #501a1a;
   position: relative;
}

.kill {
   background: #83472b;
   border: 5px solid #50341a;
}

.seed-text {
   font-family: "Press Start 2P";
}