body {
  font-family: "Kantumruy Pro", sans-serif;
  margin:0;
  padding:0;

  background: #2b2b2b;

  min-height: 100vh;

  display: flex;
  flex-direction: column;
}

h1 {
  font-family: "JetBrains Mono", monospace;
  color: white;
  text-shadow: 1px 0 10px black;
  font-weight: bold;
}

h2 {
  font-family: "JetBrains Mono", monospace;
  color: white;
  font-weight: bold;
  font-size: 50px;
}

h3 {
  font-family: "Kantumruy Pro", sans-serif;
  color: white;
}

p {
  font-family: "Kantumruy Pro", sans-serif;
  color: white;
  font-size: 26px;
}

a {
  font-family: "Kantumruy Pro", sans-serif;
  color: white;
  font-size: 18px;
}

main {
  flex: 1;
}


.button-empty {
  border: 0px;
    
  text-decoration: none;
  cursor: pointer;

  transition: all 0.2s ease;
}

.navbar {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 10px 20px 10px 20px;

  position: sticky;
  top: 0;

  z-index: 1000;

  background: #000000;
}

.logo {
  width: 200px;
  height: auto;
  justify-content: left;

  text-decoration: none;
  cursor: pointer;

  transition: all 0.2s ease;
}

.logo:hover {
  transform: scale(1.1);
}

.game-thumbnail {
  width: 300px;
  height:400px;

  padding: 20px;

  background: #667;

  text-decoration: none;
  cursor: pointer;

  transition: all 0.2s ease;
}

.game-thumbnail:hover {
  transform: scale(1.1);
}

.navbar-button {
  width: 160px;
  height: 30px;

  display:inline-block;
  padding: 10px;

  align-content:center;
  text-align:center;

  background: #222;
  color: white;
  
  border: 0px;

  font-family: "JetBrains Mono", monospace;
  font-size: 18px;
  font-weight: bold;
    

  text-decoration: none;
  cursor: pointer;

  transition: all 0.2s ease;
}

.navbar-button:hover {
  background: #333;
  border-color: #667;
  transform: scale(1.1);
}

.navbar-button:active {
  transform: translateY(0px);
  background: #111;
}

.navbar-sub-menu {
    display: none;

    position: absolute;
    top: 100%;
    left: -5%;
    right: -5%;

    background: #072169;
    min-width: 160px;
}

.navbar-sub-button {
  width: 160px;
  height: 30px;

  display:inline-block;
  padding: 10px;

  align-content:center;
  text-align:center;

  background: #222;
  color: white;
  
  border: 0px;

  font-family: "JetBrains Mono", monospace;
  font-size: 18px;
  font-weight: bold;
    

  text-decoration: none;
  cursor: pointer;

  transition: all 0.2s ease;
}

.navbar-sub-button:hover {
  background: #333;
  border-color: #667;
  transform: scaleX(1.05) translateX(-2.5%);
}

.navbar-dropdown {
  position: relative;
}

.navbar-dropdown:hover .navbar-button{
  background: #333;
  transform: scale(1.1);
}

.navbar-dropdown:hover .navbar-sub-menu{
  display:inline-block;
  position: absolute;
  background: rgb(7, 33, 105);

  padding-left: 10%;
}


a {
    text-decoration: none;
    color: white;
}

.hero {
    height: 60vh;

    background-size: cover;
    background-position: center;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;

    position: relative;
}

.footer {
    background: #000000;
    color: white;

    padding: 20px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-element {
  padding-left: 20px;
  padding-right: 20px;
}