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

/***************************************************************************************************************************/
/*****************************   GLOBALS and HOME LINK                       ***********************************************/
/***************************************************************************************************************************/

:root {
  --body-color: #e7edff;
  --body-background-color: radial-gradient(circle, rgba(0,3,106,1) 15%, rgba(3,9,218,1) 58%, rgba(92,4,250,1) 91%);
  --link-color: #da093d;
  --link-hover-color: #c300ff;
  --font-header: Bungee,  Arial, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  --font-body: 'Fira Sans', Arial, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
body {
   width: 100%;
   padding: 0;
   margin: 0;
   color:var(--body-color);
   background: var(--body-background-color);
   letter-spacing: .05em;
   font-family:  var(--font-body);
}

* {
    box-sizing: border-box;
  } 


a, a:visited {
  color: var(--link-color);
  text-decoration: none;
 }

 a:hover {
  color: var(--link-hover-color);
  text-decoration: underline;
 }
 .homelink a:focus {
  outline: none;
  text-decoration: none;
}
.container-game {
 grid-row: 2 / 3;
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: column;
}

#homelink {
  position:absolute;
  top: 0; 
  left: 0;
  width: 60px;
  height: 24px;
  margin: 0;
  padding: 2px 2px 2px 2px;
  background-color: var(--body-color);
  border-right: 3px solid var(--link-color);
  border-bottom: 3px solid var(--link-color);
  border-radius: 2px;
 }

h1 {
  text-shadow: 2px 2px #000000;
    font-size: 48px;
    font-family: var(--font-header);
    margin-bottom: 0;
}

/***************************************************************************************************************************/
/******************************************************   GAME             *************************************************/
/***************************************************************************************************************************/



.game-container {
    width: 500px;
    align-content: center;
  }

  .grid {
    height: 400px;
    width: 400px;
    display: flex;
    flex-wrap: wrap;
    background-color: #dcd6bc;
    margin-left: 50px;
    margin-top: 20px;
    border: 10px solid #dcd6bc;
    margin-bottom: 10px;
  }

  .title {
    margin: 20px;
  }
  
  .subtext {
    color: #CCC;
    font-size: 1.5rem;
    margin-bottom: 10px;
  }
  
  .board {
    display: inline-grid;
    padding: 10px;
    grid-template-columns: repeat(var(--size), 60px);
    grid-template-rows: repeat(var(--size), 60px);
    gap: 4px;
    border: 1px solid #ffffff;
    border-radius: 3px;
    background-color: rgb(121, 157, 235);
  }

  .board > * {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    border: 2px solid #BBB;
    user-select: none;
  }
  
  .tile {
    border-radius: 3px;
    box-shadow: 2px 1px ##000000;
  }
  .board > [data-status="hidden"] {
    background-color: rgb(139, 119, 224);
    cursor: pointer;
  }
  
  .board > [data-status="mine"] {
    background-color: red;
  }
  
  .board > [data-status="number"] {
    background-color: none;
  }
  
  .board > [data-status="marked"] {
    background-color: yellow;
  }