@font-face {
   font-family: 'Orbitron';
   src: url('/mdn_games/assets/fonts/Orbitron-Bold.ttf') format('truetype'),
      url('/mdn_games/assets/fonts/Orbitron-ExtraBold.ttf') format('truetype'),
      url('/mdn_games/assets/fonts/Roboto-Regular.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: 'Roboto';
   src: url('/mdn_games/assets/fonts/Roboto-Regular.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Game-7';
   src: url('/mdn_games/assets/fonts/game_font_7.ttf') format('truetype');
   font-display: swap;
}


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

body {
   font-family: 'Roboto', Arial, "Helvetica Neue", Helvetica, sans-serif;
   display: flex;
   flex-direction: column;
   align-items: center;
   min-height: 100dvh;
   width: 100%;
   background-color: #0A1931;
   position: relative;
}

header {
   width: 100%;
   background-color: #132743;
   position: relative;
}

header ul {
   list-style-type: none;
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 14px;
}


header li:first-child {
   margin-right: auto;
   flex-basis: 100px;
   flex-shrink: 0;
}

header li:last-child {
   flex-shrink: 0;
}

header li a {
   display: block;
   padding: 15px 15px;
   text-decoration: none;
   color: #ffffff;
   font-size: inherit;
}

header li a:hover {
   background-color: #4A90E2;
}

header a.active {
   border-bottom: 2px solid #4A90E2;
   border-right: 2px solid #4A90E2;
   padding: 12px;
   transition: .2s;
   padding-left: 15px;
}

header a.active:hover {
   background-color: unset;
}


/* global button */
button {
   box-shadow: 2px 2px 4px #000;
   border: none;
   background: none;
   cursor: pointer;
}

main {
   display: flex;
   flex-direction: column;
   align-items: center;
   flex-grow: 1;
}

.game-card {
   width: 95dvw;
   margin-top: 20px;
   max-width: 350px;
   min-width: 280px;
   height: fit-content;
   border: 1px solid #2E4C6D;
   padding: 10px;
   flex-grow: 1;
   gap: 45px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   background-color: rgba(255, 255, 255, 0.1);
   border-radius: 10px;
   box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
   position: relative;
}

.top-features {
   display: flex;
   justify-content: space-between;
}

.top-features .count-board {
   width: 150px;
   background-color: #0d0903;
   color: #00FF00;
   text-align: center;
   padding: 8px;
   font-size: 22px;
   display: flex;
   flex-direction: column;
   border-radius: 4px;
   border-bottom: 3px groove orangered;
   margin-bottom: 5px;
   border: 2px solid #CCCCCC;
   box-shadow: 4px 4px 8px #000;
}

.leftGuessesEl {
   font-size: 68px;
   font-weight: 600;
   color: #fff;
   font-family: 'Orbitron', sans-serif;
}

.left {
   height: 100%;
   display: flex;
   flex-direction: column;
   border-radius: 5px;
}

.timerEl {
   align-self: center;
   font-family: 'Game-7', sans-serif;
   box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.5);
   letter-spacing: 3px;
   font-weight: bold;
   width: 150px;
   height: 80px;
   background-color: #8B0000;
   border: 12px groove #FF0000;
   display: flex;
   justify-content: center;
   align-items: center;
   color: #fff;
   font-size: 50px;
   padding: 8px;
   text-shadow: 2px 2px 2px #000;
}

.actions {
   display: flex;
   flex-direction: column;
   gap: 15px;
   justify-content: center;
   text-align: center;
}

.actions h2 {
   border-bottom: 3px solid red;
   color: #ffffff;
}

.actions button {
   flex-shrink: 0;
   padding: 10px 10px;
   background-color: #2E4C6D;
   border-radius: 5px;
   color: #FFFFFF;
}

.actions button:hover {
   background-color: #3E5C7D;
}

/* help button */
.bi-question-circle {
   position: absolute;
   color: #CCCCCC;
   text-shadow: 2px 2px 4px #0A1931;
   cursor: pointer;
   right: 3%;
   top: 50%;
   width: 1em;
   font-size: 24px;
   animation: bounce 1s infinite;
}

@keyframes bounce {

   0%,
   100% {
      transform: translateY(0);
   }

   50% {
      transform: translateY(-2px);
      font-size: 27px;
   }
}


.bottom-features {
   height: auto;
   display: flex;
   flex-direction: column;
   gap: 5px;
}

.bottom-features {
   color: #CCCCCC;
}

.form {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
}

.form .inputEl {
   flex-grow: 1;
   flex-basis: 150px;
   margin-right: auto;
   display: block;
   padding: 8px;
   background-color: #fff;
   border: 1px solid #2E4C6D;
   font-size: 16px;
   outline-color: #fff;
   outline-width: 1px;
   border-radius: 5px;
}

.form .submitEl {
   flex-basis: 85px;
   flex-shrink: 0;
   background-color: #019c01;
   box-shadow: 2px 2px 4px #000;
   border: none;
   border-radius: 5px;
   font-size: 16px;
   color: #fff;
   cursor: pointer;
}

.form .submitEl:hover {
   background-color: #388E3C
}

.gameStatesEl {
   display: flex;
   flex-direction: column;
   height: 150px;
   gap: 5px;
   margin-top: 15px;
   color: #CCCCCC;
   position: relative;
}

.gameStatesEl p {
   font-size: 14.5px;
   padding: 8px 0;
}

.gameStatesEl div {
   display: flex;
   align-items: center;
   gap: 5px;
}

.gameStatesEl .text {
   flex-shrink: 0;
   font-size: 14.5px;
   color: #CCCCCC;
}

.gameStatesEl .guessOutcomeEl {
   background-color: #e5070770;
   padding: 8px;
   font-size: large;
   width: 100%;
   display: none;
   font-weight: 600;
   text-align: center;
   align-self: center;
   margin-top: 2px;
   border-radius: 1px;
}

.prvGuessEl {
   background-color: rgba(255, 255, 255, 0.05);
   border: 1px solid #2E4C6D;
   padding: 2px;
   font-size: 16px;
   color: #ffffff;
   border-radius: 5px;
}

footer {
   background-color: #132743;
   width: 100%;
   height: 45px;
   font-size: 15px;
   padding: 10px;
   color: #CCCCCC;
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: 30px;
}

footer .bi {
   font-size: 18px;
   color: #a7aeb1;
   transition: .2s;
}

.bi:hover {
   color: #fff;
}

.socials {
   position: absolute;
   left: 10px;
   display: flex;
   gap: 10px;
   text-shadow: 0px 0px 0px 40px #000;
}

footer .copyright {
   flex: 0 1 auto;
   text-align: center;
}

/* modals */
.helpEl,
.gameLevelsEl,
.gameOverEl {
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.92);
   position: absolute;
   top: 46px;
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 1;
   transition: 1s;
}

.modals {
   color: #CCCCCC;
   background-color: #1A2744;
   border: 2px solid #4A90E2;
   border-radius: 10px;
   box-shadow: 0 0 20px #4a90e280;
   width: 300px;
   max-width: 400px;
   height: auto;
   min-height: 320px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
   padding: 20px 12px;
   position: relative;
   animation: open .5s ease-in-out;
   transition: .5s;
}

@keyframes open {

   0%,
   50% {
      transform: scale(0%);
   }

   100% {
      transform: scale(100%);
   }
}

.modals h1 {
   color: #00FFFF;
   text-align: center;
   font-weight: bold;
   margin-bottom: 15px;
   font-size: 28px;
}

.modals button {
   color: #fff;
   padding: 10px 9px;
   background-color: #018301;
   border-radius: 5px;
   font-size: 16px;
   transition: .3s;
}

.modals button:hover {
   transform: translateY(-5px);
}

.modals p {
   padding: 7px 0;
   font-size: 14px;
   line-height: 1.5;
}

.gameOverBtnEl {
   display: flex;
   width: 100%;
   justify-content: space-between;
}

.gameOverBtnEl .restartButtonEl {
   background-color: orangered;
}

.levels {
   display: flex;
   justify-content: space-between;
   width: 100%;
   flex-grow: 1;
   flex-wrap: wrap;
}

.levels button {
   width: 120px;
   text-align: center;
   transition: .3s;
}

.levels button:hover {
   transform: none;
   background-color: #196119;
}

.gameLevelsModal h1 {
   border-bottom: 1px solid #4A90E2;
   padding-bottom: 2px;
   width: 100%;
}

.gameLevelsModal p {
   font-size: 14px;
}


.helpEl p {
   font-size: 14px;
   padding: 3px;
}

.helpEl .modals .close {
   font-size: 24px;
   padding: 0 10px;
   text-align: center;
   transform: none;
   background: none;
   position: absolute;
   right: 10px;
   top: 10px;
   border: 2px solid #4A90E2;
}

.helpEl .close:hover {
   background-color: #4A90E2;
}

.helpEl h1 {
   margin-top: 22px;
   border-bottom: 1px solid #00FFFF;
   padding-bottom: 5px;
   width: 100%;
}

/* Media Query */
@media screen and (min-width: 700px) {
   .modals {
      width: 400px;
      padding: 20px 40px;
   }
}


/* hide  modals */
.gameLevelsEl {
   display: none;
}

.gameOverEl {
   display: none;
}

.helpEl {
   display: none;
}