/* inter font used throughout the page */
@font-face {
  font-family: Inter;
  src: url('/fonts/Inter/Regular.woff');
}
/* the top text is using jetbrains mono */
@font-face {
  font-family: JetBrainsMono;
  src: url('/fonts/JetBrainsMono/Regular.woff2');
}

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

/* cover entire screen */
html, body { 
  height: 100%;
} 

body {
  min-height: 100%; 
  background-image: 
    linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.55)),
    url('/assets/bg.png'); 
  background-size: auto;
  background-blend-mode: multiply; 

  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400; 
  font-size: 20px; 
  text-align: center;
  color: white; 

  display: flex;
  
  flex-direction: column;  
  text-align: center;
} 
body .grower {
  flex-grow: 1;
} 

main {
  margin: auto; 
  flex-shrink: 0; 
}  

/* Logic artists is now... text */
#top-text {
  font-family: 'JetBrainsMono', 'Courier New', Courier, monospace; 
  font-size: 1.5em; 
  padding-bottom: 50px;
  text-align: left;
}
/* dynasty full logo */
#dynasty-banner {
  width: 800px;
  margin: 55px 70px; 
  min-width: 50vw;
}   

/* Call to action text within colored borders */
#cta-text { 
  background: 
    linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)) padding-box, /* overlay for the underlying colored box */
    linear-gradient(to right, rgb(169, 228, 0), rgb(229, 0, 0), rgb(255, 230, 0)) border-box; /* actual colored box */
  border-radius: 18px;
  border: 2px solid transparent;

  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center; 
  cursor: pointer; 
  color: white;
  font-weight: 500;
  padding: 10px 90px; 
  text-decoration: none;
} 
#cta-text #arrow {
  color: red;
  font-weight: 600; 
  font-size: 1.1em;
}
  
/* Redirection text at the bottom */
#redir-text {
  padding-top: 40px; 
  font-size: 0.8em;
}
/* THQ Nordic link */
#redir-text #thqn {
  color: red;
  font-weight: bold;
}
 
@media only screen and (max-width: 1000px) {
  #top-text {
    font-size: 3.5vw; 
    text-align: center;
  } 
  #dynasty-banner {
    width: 80vw;
  }
}
@media only screen and (max-width: 690px) {
  #redir-text {
    max-width: 70vw; 
    margin: auto;
  }
  #cta-text {
    margin: 10vw;
  }
}