* {
  box-sizing: border-box;
}

html, body {
  background: #000;
  margin: 0;
  padding: 0;
  color: #fff;
}

h1 {
  font-family: "Gabarito", sans-serif;
  font-weight: 900;
  font-size: 4rem;
}

h2 {
  font-family: "Gabarito", sans-serif;
  font-weight: 900;
  font-size: 2rem;
}

h3 {
  font-family: "Gabarito", sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
}

p, ul {
  font-family: "Gabarito", sans-serif;
  font-size: 1rem;
}

a {
  font-family: "Gabarito", sans-serif;
  color: #fff;
  font-size: 1rem;
}

nav a {
  text-decoration: none;
}

.discord {
  position: fixed;
  right: 16px;
  bottom: -430px;
  transition: 0.3s ease 0s;
}
.discord:hover {
  bottom: 0px;
}
.discord iframe {
  border: 0;
}

.splash {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "logo";
  grid-gap: 64px;
  padding: 64px;
  justify-items: center;
  align-items: center;
  background-image: url("./spellsided-splash.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.splash .logo {
  grid-area: logo;
}
.splash .logo img {
  width: 100%;
  max-width: 720px;
  object-fit: contain;
}

.frame {
  margin: 0 auto 0 auto;
  width: 100%;
  padding: 100px 50px 100px 50px;
}
.frame.steam {
  padding: 100px 50px 0 50px;
}
.frame.steam .text {
  margin: auto;
  max-width: 900px;
  text-align: center;
}
.frame.steam .text a {
  text-decoration: none;
}
.frame.steam .text a .wishbutton {
  padding: 16px 0 32px 0;
  transition: 0.1s linear 0s;
  outline: 0 solid #fff;
  background: #111;
}
.frame.steam .text a .wishbutton:hover {
  outline: 4px solid #fff;
  color: #ec97fc;
}
.frame.kickstarter {
  padding: 100px 50px 0 50px;
}
.frame.kickstarter .text {
  margin: auto;
  max-width: 900px;
  text-align: center;
}
.frame.kickstarter .text a {
  text-decoration: none;
}
.frame.kickstarter .text a .wishbutton {
  color: #000;
  padding: 16px 0 32px 0;
  transition: 0.1s linear 0s;
  outline: 0 solid #05CE78;
  background: #fff;
}
.frame.kickstarter .text a .wishbutton:hover {
  outline: 4px solid #05CE78;
  color: #05CE78;
}
.frame.trailer {
  max-width: 1280px;
}
.frame.trailer iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border: 0;
}
.frame.features {
  background: #111;
}
.frame.features b {
  color: #ec97fc;
}
.frame.features .blurb {
  margin: auto;
  max-width: 900px;
}
.frame.features .blurb h2, .frame.features .blurb h3 {
  font-weight: normal;
  text-align: center;
}
.frame.features .card {
  margin: auto;
  max-width: 1500px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "image text";
  grid-gap: 64px;
  padding: 64px;
  align-items: center;
  text-align: left;
}
.frame.features .card:nth-child(odd) {
  text-align: right;
  grid-template-columns: 1fr 2fr;
  grid-template-areas: "text image";
}
.frame.features .card .text {
  grid-area: text;
}
.frame.features .card .media {
  grid-area: image;
}
.frame.features .card .media img {
  width: 100%;
  object-fit: contain;
}
.frame.features .card .media video {
  width: 100%;
  object-fit: contain;
}
.frame.links {
  padding: 50px 50px 0 50px;
}
.frame.links nav {
  display: flex;
  flex-wrap: wrap;
  gap: 64px;
  justify-content: center;
  align-items: center;
}
.frame.links nav a {
  transition: 0.1s linear 0s;
  outline: 0 solid #fff;
}
.frame.links nav a:hover {
  outline: 4px solid #fff;
}
.frame.links img {
  align-self: center;
  max-width: 64px;
  min-width: 64px;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  box-sizing: content-box;
  padding: 16px;
}

footer {
  padding: 32px;
  background-color: #000;
  text-align: center;
}

/*# sourceMappingURL=styles.css.map */