/**********************************************************
 * Font Imports
 *********************************************************/

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

@font-face {
  font-family: DenseRegular;
  src: url("Dense-Regular.otf") format("opentype");
}

/**********************************************************
 * Keyframes
 *********************************************************/

@keyframes expandHorizontalRule {
  0% { width: 0; }
  100% { width: 50%; }
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes delayedFadeIn {
  0% { opacity: 0; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

/**********************************************************
 * Base Elements
 *********************************************************/

html {
  width: 100%;
  height: 100%;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  font-family: "Lato", sans-serif;
  color: #fefefe;
  width: 100%;
  height: 100%;
  background-color: #31556d;
  overflow-x: hidden
}

h1 {
  font-size: 100pt;
  font-family: "DenseRegular", sans-serif;
  text-align: center;
  margin-block-start: 0.05em;
  margin-block-end: 0.05em;
  animation: 1.5s ease-in-out fadeIn;
  font-weight: 300;
}

h2 {
  font-size: 16pt;
  margin-top: 6pt;
  text-align: center;
  animation: 1.5s ease-in-out fadeIn;
}

h3 {
  font-size: 12pt;
}

hr {
  border: 1px solid #fefefe;
  width: 50%;
  min-width: 400px;
  animation: 1s ease-in-out expandHorizontalRule;
}

main {
  width: 100%;
  height: 100%;
}

section {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

a {
  text-decoration: none;
  color: #d4af37;
}

footer {
  padding: 10px;
  background-color: #244658;
  border-top: 5px solid #d4af37;
}

nav {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

button {
  background-color: #1b1b1b;
  color: #eaeaea;
  border: 2px solid #d4af37;
  padding: 10px;
  transition: background-color 0.5s, color 0.5s;
  font-weight: bold;
}

canvas {
  position: absolute;
  z-index: -1;
}

/**********************************************************
 * IDs
 *********************************************************/

#title-section {
  text-align: center;
  align-items: center;
  justify-content: space-between;
  background-image: url("../img/Mountains.png");
  background-repeat: no-repeat;
  background-position: bottom;
}

#title-section a {
  animation: 1.5s ease-in-out delayedFadeIn;
}

#store-section {
  background-color: #eaeaea;
  color: #1b1b1b;
}

#half-opacity {
  opacity: 0.5;
}