@import url('https://fonts.googleapis.com/css2?family=Alkalami&family=Sedgwick+Ave+Display&family=Ubuntu:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  /* change the values below to your colors from your palette */
  --primary-color: #0e811e;
  --secondary-color: #81A9B1;
  --secondary-variant-color: #4A606D;
  --accent1-color: #303436;
  --accent2-color: #edfdff;

  /* change the values below to your chosen font(s) */
  --special-heading-font: "Sedgwick Ave Display", Impact, Courier;
  --heading-font: Alkalami, Helvetica, Tahoma;
  --paragraph-font: Ubuntu, "Open Sans", sans-serif;

  /* these colors below should be chosen from among your palette colors above */
  --headline-color-on-white: #303436;  /* headlines on a white background */ 
  --headline-color-on-color: #edfdff; /* headlines on a colored background */ 
  --paragraph-color-on-white: #303436; /* paragraph text on a white background */ 
  --paragraph-color-on-color: #edfdff; /* paragraph text on a colored background */ 
  --paragraph-background-color: #0e811e  ;
  --nav-link-color: #303436;
  --nav-background-color: #81A9B1;
  --nav-hover-link-color: #edfdff;
  --nav-hover-background-color: #4A606D;
}

/* ------------------------------ Home Page ------------------------------ */

body {
  margin: 0;
  max-width: 1300px;
}

h1, h2, h3, h4 {
  font-family: var(--heading-font);
}

p, a {
  font-family: var(--paragraph-font);
  line-height: 1.3em;
}

/* --------------- Nav --------------- */

.logo {
  width: 100px;
  margin-left: 0;
}

nav {
  width: 100%;
  background-color: var(--nav-background-color);
  display: flex;
  align-items: center;
}

nav a {
  color: var(--nav-link-color);
  text-decoration: none;
  text-align: center;
  height: 100px;
  line-height: 100px;
  font-family: var(--paragraph-font);
  font-size: 1.2em;
  padding: 0px 30px;
  width: auto;
}

nav a:hover {
  background-color: var(--nav-hover-background-color);
  color: var(--nav-hover-link-color);
  
}

.logo-link {
  width: 100px;
  padding: 0px;
  min-width: 100px;
}

#secret-page-link {
  color: var(--nav-background-color);
}

/* --------------- Main --------------- */

main h1, main h2, main h3 {
  margin: 30px auto 10px auto;
  text-align: center;
}

main p {
  margin: auto 10% 20px 10%;
}

.slider-box {
  display: grid;
  grid-template-columns: 1fr 315px;
  padding: 5% 10%;
  background-color: var(--paragraph-background-color);
}

.slider-box p {
  padding-right: 30px;
  margin: 0;
  color: var(--paragraph-color-on-color);
}

.slider-box * {
  box-sizing: border-box;
}

.image-slider {
  position: relative;
}

.mySlides {
  display: none;
}

.cursor {
  cursor: pointer;
}

.numbertext {
  color: var(--accent2-color);
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.mySlides img {
  height: 450px;
  width: 315px;
  border-radius: 15px;
}

.caption-container {
  text-align: center;
  background-color: var(--secondary-color);
  border: 2px solid var(--secondary-variant-color);
}

.caption-container p {
  padding: 2px 16px;
  color: var(--accent1-color);
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  width: 16.66%;
  height: 75px;
  background-color: var(--accent1-color);
}

.demo {
  opacity: 0.75;
  height: 100%;
  width: 100%;
  border-radius: 5px;
}

.active,
.demo:hover {
  opacity: 1;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: var(--accent2-color);
  font-weight: bold;
  font-size: 40px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

.prev:hover, .next:hover {
  background-color: var(--accent1-color);
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* --------------- Pages Description --------------- */

.pages-description {
  position: relative;
  display: grid;
  grid-template-columns: 1fr repeat(3, 75px) 1fr 1fr repeat(3, 75px) 1fr ;
  grid-template-rows: repeat(5, 1fr);
  background-color: var(--secondary-color);
  height: 300px;
  width: 100%;
}

.strategy-desc, .buyers-desc {
  background-color: var(--paragraph-background-color);
  color: var(--paragraph-color-on-color);
  z-index: 2;
  grid-row: 3/4;
  width: 100%;
  height: 200px;
}

.strategy-desc {
  grid-column: 2/5;
}

.base-image-container {
  z-index: 1;
  grid-area: 2/3/5/9;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.base-image-container img {
  height: 100%;
}

.buyers-desc {
  grid-column: 7/10;
}

.pages-description a, .pages-description a:visited {
  text-decoration: none;
  color: var(--headline-color-on-color);
}

.pages-description h3 {
  background-color: var(--secondary-color);
  border: solid 2px var(--secondary-variant-color);
  border-radius: 10px;
  margin: 20px;
  font-family: var(--paragraph-font);
  font-size: 17px;
  line-height: 2em;
}

.pages-description h3:hover {
  background-color: var(--secondary-variant-color);
}

.card-layout {
  display: flex;
}

.card-layout div {
  width: 50%;
}

.custom-deck {
  margin-right: 5%;
  margin-left: 10%;
}

.custom-trade-row {
  margin-right: 10%;
  margin-left: 5%;
}

.card-layout img {
  width: 100%;
  border: var(--accent1-color) solid 2px;
  border-radius: 10px;
  padding: 4px;
}

.card-layout p {
  width: 100%;
  margin: 10px 0;
}

/* --------------- Footer --------------- */

footer {
  display: flex;
  background-color: var(--nav-background-color);
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  padding: 0 10%;
}

footer p {
  width: 60%;
  margin-right: 5%;
}

footer a, footer a:visited {
  text-decoration: none;
  color: var(--nav-link-color);
  margin: 0 10px 0 0;
}

footer a:hover {
  color: var(--nav-hover-link-color);
}

/* ------------------------------ Strategy Guide Page ------------------------------ */

.resources-grid {
  display: grid;
  grid-template-columns: 1fr 4fr;
  justify-items: center;
  align-items: center;
  margin: 20px 10%;
}

.resources-grid img {
  width: 125px;
}

.resources-grid p {
  margin: 20px;
}

.faction-guide {
  background-color: var(--paragraph-background-color);
  color: var(--paragraph-color-on-color);
}

.faction-guide h2 {
  padding-top: 20px;
}

.faction-guide p {
  padding: 0 10%;
  margin: 0;
}

.faction-guide div {
  display: flex;
  justify-content: space-around;
  padding: 20px;
}

.faction-guide img {
  width: 20%;
  border: var(--accent1-color) solid 4px;
  border-radius: 10px;
}

/* ------------------------------ Buyer's Guide Page ------------------------------ */

.base-decks {
  display: grid;
  grid-template-columns: 20% 30% 30% 20%;
  margin: auto 10% 30px 10%;
  align-items: center;
  row-gap: 30px;
}

.base-decks div {
  grid-column: auto / span 2;
  width: 100%;
}

.base-decks img {
  width: 100%;
}

.war-world-img, .frontiers-img {
  grid-column: auto / span 2;
}

.base-decks h2 {
  font-size: 1.3em;
  line-height: 1em;
}

.base-decks p {
  margin: auto 5% 10px 5%;
  text-align: justify;
}

.purchase-options {
  background-color: var(--paragraph-background-color);
  color: var(--paragraph-color-on-color);
  padding: 10%;
}

.purchase-options div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  width: 100%;
}

.purchase-options a {
  display: block;
  width: 225px;
  background-color: var(--secondary-color);
  border: var(--secondary-variant-color) 2px solid;
  color: var(--paragraph-color-on-color);
  text-decoration: none;
  line-height: 2em;
  text-align: center;
  margin: 0 auto;
}

.purchase-options a:hover {
  background-color: var(--secondary-variant-color);
}

.purchase-options div > * {
  margin: 0;
}

.boosters h2 {
  margin-left: 10%;
  text-align: left;
}

.boosters div {
  display: flex;
  margin: auto 10%;
  align-items: center;
}

.boosters div > p {
  width: 70%;
  margin: 0 10px auto 0;
}

.boosters img {
  width: 30%;
}

/* ------------------------------ Deck Strength Calculator ------------------------------ */

.calculator-page p {
  margin-left: 5%;
}

.calculator-page h2 {
  margin-bottom: 0;
  line-height: 0;
  padding: 0;
  text-align: left;
  margin-left: 5%;
}

.copy-flex {
  display: flex;
  justify-content: left;
  align-items: center;
  margin-left: 0;
  height: 100px;
}

.copy-flex > * {
  text-align: left;
  width: auto;
  margin: auto 0 auto 20px;
}

.copy-flex > a {
  width: 200px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: var(--secondary-color);
  border: 2px solid var(--secondary-variant-color);
  color: var(--paragraph-color-on-white);
  text-decoration: none;
}
.copy-flex > a:hover {
  color: var(--paragraph-color-on-color);
  background-color: var(--secondary-variant-color);
}

iframe {
  width: 90%;
  height: 500px;
  overflow: clip;
  margin: 0 5% 0 5%;
  border: 3px solid var(--accent1-color);
}

.calculator-instructions {
  margin: 30px 5%;
  height: auto;
  display: flex;
}

.calculator-page > ul {
  margin: 10px 5%;
  font-family: var(--paragraph-font);
}

.calculator-page div > h2 {
  margin: 0;
}

/* ------------------------------ Smaller Screens ------------------------------ */

@media screen and (max-width: 900px) {
  #secret-page-link, #calculator-page-link {
    display: none;
  }
}
@media screen and (max-width: 750px) {
    nav {
      flex-direction: column;
    }
    .logo {
      position: absolute;
      left: 20px;
      top: 20px;
    }
    .logo-link:hover {
      background-color: var(--nav-background-color);
      cursor: default;
    }
    nav a {
      width: 50%;
      height: auto;
      line-height: 50px;
    }
    .slider-box {
      display: block;
    }
    .image-slider {
      width: 315px;
      margin: 25px auto auto auto;
    }
    .card-layout {
      display: block;
      padding: 0;
      margin: auto 5%;
    }
    .card-layout div {
      width: 90%;
      margin: 0 25px;
    }

    /* ----- Strategy Page ----- */
    .resources-grid {
      display: grid;
      grid-template-columns: 1fr 8fr;
      margin: 20px 10%;
    }
    .resources-grid p {
      margin-right: 0;
    }
    .resources-grid img {
      width: 75px;
    }

    /* ----- Buyer's Page ----- */
    .base-decks {
      display: block;
    }
    .base-decks img {
      width: 80%;
      margin: 10%;
    }
    .boosters div {
      display: block;
    }
    .boosters div > p {
      width: 100%;
    }
    .boosters img {
      width: 100%;
      margin-top: 20px;
    }
    .boosters h2 {
      margin-bottom: 0px;
      line-height: 1em;
    }
}