/* You Get What You Get */

/* max width */

@media (min-width: 1400px) {
  .container {
    max-width: 1140px;
  }
}


/* fonts */

/* 
font-family: 'Noto Serif', sans-serif;
font-family: 'Rampart One', cursive;
font-family: 'Inconsolata', monospace;
*/

body {
  font-family: 'PT Serif', Georgia, serif;
  font-size: 18px;
  line-height: 1.8;
}

h1, h2, h3, .heading {
  font-family: 'bangers', impact, sans-serif;
  font-weight: 400;
}

p {
  max-width: 50em;
}

b {
  font-weight: bold;
}

.bangers {
  font-family: 'Bangers', cursive;
}

.ptserif {
  font-family: 'PT Serif', Georgia, serif;
}

.inconsolata {
  font-family: 'Inconsolata', monospace;
}


/* header */

header.header {

}

header.header h1 {
  font-size: 48px;
  margin: 20px 0;
}

header.header h2 {
  font-size: 24px;
  margin: 20px 0;
}


/* banner */
header.banner {
  margin-top: 40px;
}

header.banner img {
  max-width: 100%;
  height: auto;
}


/* sections */

section {

  /* border-bottom: 2px dotted #ffd88a; */
  margin-block-start: 1em;
  margin-block-end: 1em;
  padding-block-start: 1em;
  padding-block-end: 1em;

}

section.no-top-margin {
  margin-block-start: 0;
  margin-block-end: 0;
}

section:first-child {

  /* border-top: 2px dotted #ffd88a; */

}

section label {
  background-color: #ffd88a;
  border-radius: 1em;
  font-size: 14px;
  padding: 0.2em 0.6em;
  margin-bottom: 1em;
}


.grid-3 img {
  max-width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 40px;
  }
}

@media (max-width: 768px) {
  .grid-3 img {
    margin-bottom: 40px;
  }
}

h1 {

}

/* -------------------------------- */

header.banner {
  background-image: url(../images/2021-12-01_14-59-04.png);
  background-position: 50% 50%;
  display: flex;
  flex-direction: column;
  min-height: 200px;
  align-items: center;
  justify-content: center;
  background-size: cover;
}

  header.banner h1 {
    /* font-size: 10rem; */
    font-size: 12vw;
    color: #fff;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, .9), 10px 10px 10px rgba(0, 0, 0, .7), 20px 20px 20px rgba(0, 0, 0, .4);
  }

  header.banner h2 {
    /* font-size: 10rem; */
    font-size: 2vw;
    color: #fff;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, .9), 10px 10px 10px rgba(0, 0, 0, .7), 20px 20px 20px rgba(0, 0, 0, .4);
  }

  @media (min-width: 768px) {
    header.banner {
      min-height: 400px;
    }
    header.banner h1 {
      font-size: 12vw;
    }
  }

  @media (min-width: 1400px) {
    header.banner h1 {
      font-size: 8vw;
    }
    header.banner h2 {
      font-size: 2vw;
    }
  }

/* -------------------------------- */

section {
  padding: 40px;
  background-color: #fff;
  overflow: auto;
}

section:nth-child(1n) {
  background-color: #d2deee;
}

section:nth-child(2n) {
  background-color: #eee;
}

section.white {
  background-color: #fff;
}

section.grey {
  background-color: #eee;
}

section.light-blue {
  background-color: #d2deee;
}

section.vignette {
  background: rgb(255,255,255);
  /* background: radial-gradient(circle, rgba(255,255,255,1) 70%, rgba(210,222,238,1) 100%); */
  background: radial-gradient(circle, rgba(255,255,255,1) 70%, #ccc 100%);
}

  section h2 {
    font-size: 2em;
    /* font-size: 10vw; */
  }

    section h2 a {
      color: inherit;
    }

  @media (min-width: 768px) {
    section h2 {
      font-size: 4rem;
      font-size: 4vw;
    }
  }

  section p, section ul, section ol {
    max-width: 40em;
  }

  section img {
    float: left;
    margin: 10px 40px 10px 0;
    /* max-width: 200px; */
    max-width: 100%;
    height: auto;
  }

  @media (min-width: 768px) {

    section img, section img.smaller {
      max-width: 200px;
    }

    section img.medium {
      max-width: 400px;
    }
  }

  /* section img::after {
    clear: left;
  } */

  

/* -------------------------------- */

.vignette {
  position: relative;
}

#nftcontainer {
  display: flex;
  align-items: center;
  justify-content: center;
}

.statement-1 {
  position: absolute;
  top: 40%;
  left: 40px;
  max-width: 100px;
}

.statement-2 {
  position: absolute;
  top: 40%;
  right: 40px;
  max-width: 100px;
}


  

/* -------------------------------- */

.grid-nfts {
  display: grid;
  column-gap: 40px;
  row-gap: 20px;
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .grid-nfts {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 960px) {
  .grid-nfts {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (min-width: 1440px) {
  .grid-nfts {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

.grid-nfts img {
  max-width: 100%;
  display: block;
  margin: 0;
  padding: 0 0 10px 0;
}

.grid-nfts h3 {
  font-family: 'PT Serif', Georgia, serif;
  font-size: 18px;
  font-weight: bold;
  background-color: #ccc;
  padding: 10px;
  margin-bottom: 0;
}

  .grid-nfts h3 a {
    color: inherit;
    text-decoration: none;
  }

.grid-nfts p {
  /* font-family: 'PT Serif', Georgia, serif; */
  /* font-size: 20px; */
  /* font-weight: bold; */
  background-color: #ccc;
  padding: 0 10px 10px 10px;
  margin-top: 0;
}


  

/* -------------------------------- */

.grid-stats {
  display: grid;
  column-gap: 40px;
  row-gap: 20px;
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .grid-stats {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 960px) {
  .grid-stats {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (min-width: 1440px) {
  .grid-stats {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

.grid-stats h3 {
  font-size: 24px;
  font-family: 'PT Serif', Georgia, serif;
  /*font-size: 18px;
  font-weight: bold;
  background-color: #ccc;
  padding: 10px;
  margin-bottom: 0; */
}

.grid-stats p {
  font-size: 32px;
  /* font-family: 'PT Serif', Georgia, serif; */
  font-family: 'Inconsolata', monospace;
  font-weight: bold;
}



/* -------------------------------- */

.bold {
  font-weight: bold;
}

.hidden {
  display: none;
}

.normal {
  font-weight: normal;
}



/* -------------------------------- */

.btn {
  background-color: #d2deee;
}

.btn:hover, .btn:focus {
  background-color: #9bb9e0;
}

.cta .btn {
  margin-right: 20px;
}