:root {
  --light1: #ffeed7;
  --light2: #d9b8a5;
  --dark1: #181818;
  --dark2: #090909;
}

@font-face {
  font-family: Duralith;
  src: url(Duralith.ttf);
}

@font-face {
  font-family: DrakoheartRegular;
  src: url(DrakoheartLeiendRegular.ttf);
}

@font-face {
  font-family: DrakoheartBold;
  src: url(DrakoheartLeiendBold.ttf);
}

@font-face {
  font-family: DeathHector;
  src: url(DeathHector.ttf);
}

@font-face {
  font-family: Elyaris;
  src: url(Elyaris.ttf);
}

@font-face {
  font-family: GraveDigger;
  src: url(GraveDigger.ttf);
}

@font-face {
  font-family: MegamaxJones;
  src: url(MegamaxJones.ttf);
}

body {
  background: #000;
  color: var(--light2);
  font-family: 'Elyaris', serif;
  font-size: 18px;
  font-weight: 200;
  letter-spacing: .07em;
  line-height: 1.6em;
}

a {
  color: var(--light1);
  text-decoration: none;
}

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

.containerVideo {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.download {
  text-align:center;
  font-size: 22px;
  padding-top: 40px;
}

.download h1, #lore h1 {
    color: var(--light1);
    font-family: GraveDigger;
    letter-spacing: .1em;
    font-size: 36px;
    line-height: 1.5em;
}

#lore h2 {
    color: var(--light1);
    font-family: GraveDigger;
    letter-spacing: .1em;
    font-size: 28px;
    line-height: 1.5em;
}

.download a {
    text-decoration: underline;
}

.download .address {
    font-size: 30px;
    color: #a6c7d9;
}

.download img.mayTheeGodz {
  max-width: 400px;
}

.download .help {
  font-size: 14px;
}

.container {
  display:grid;
  height:100vh;
  grid-template-columns: 2.7fr 1.3fr;
  grid-template-rows: 1fr 3fr .1fr 4fr 2fr 2fr 2fr .1fr .2fr;
  grid-template-areas:
    "header header"
    "devices devices"
    "border2 border2"
    "slideshow description"
    "lore description"
    "bolyro description"
    "imalie description"
    "border3 border3"
    "footer footer";
    grid-gap: 0;
  padding: 0 50px;
}

.boxPanel {
  background-color: var(--dark2);
  border: 1px solid var(--dark1);
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 25px;
}

#header {
  grid-area: header;
  width: 100%;
  padding: 20px 0 30px 0;
  text-align: center;
}

#header #logo {
  display: block;
  max-width: 230px;
  margin: 0 auto 25px;
}

.border1 {
  width: 100%;
  height:4px;
  margin: 0 auto;
  border-top: 1px solid var(--dark1);
  border-bottom: 1px solid var(--dark1);
}

.slogan {
  padding-top: 20px;
  font-style: italic;
  font-weight: bold;
  color: var(--light2);
}

#lore {
  grid-area: lore;
}

#devices {
  margin: 0 auto;
  grid-area: devices;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas:
    "device device device";
  grid-gap: 0;
}

.device {
  max-width: 330px;
  min-width: 200px;
  margin:40px;
  text-align: center;
}

.device img {
  display: block;
  padding-bottom: 30px;
}

.device h1 {
  padding: 0;
  margin: 0;
  color: var(--light1);
}

.device h1.roodniss {
  font-family: GraveDigger;
  letter-spacing: .1em;
  font-size: 32px;
}

.device h1.loozer {
  font-family: DeathHector;
  letter-spacing: .2em;
  font-size: 17px;
}

.device h1.dickhed {
  font-family: MegamaxJones;
  letter-spacing: .1em;
  font-size: 21px;
}

.device p {
  padding: 0;
  margin: 0;
  color: var(--light2);
  font-family: Duralith;
  letter-spacing: .2em;
  font-size: 16px;
}

#border2 {
  grid-area: border2;
  width: 100%;
  height:4px;
  margin: 20px auto 50px;
  border-top: 1px solid var(--dark1);
  border-bottom: 1px solid var(--dark1);
}

#border3 {
  grid-area: border3;
  width: 100%;
  height:4px;
  //margin: 20px auto 75px;
  border-top: 1px solid var(--dark1);
  border-bottom: 1px solid var(--dark1);
}

#slideshow {
  grid-area: slideshow;
  padding: 0 25px;
  margin: 0 0 25px;
  border: 1px solid var(--dark1);
  border-radius: 12px;
}

#description {
  grid-area: description;
  margin:0;
  padding: 0 25px;
}

#descriptionTop {
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 4fr;
  grid-template-areas:
    "title nft";
  grid-gap: 0;
}

#description h1, #bolyro h1 {
  color: var(--light1);
  font-family: DeathHector;
  letter-spacing: .2em;
  font-size: 22px;
  padding-bottom: 0px;
  text-shadow: 0 0 5px #000, 0 0 7px #000, 0 0 9px #000;
}

#description h2 {
  color: var(--light1);
  font-size: 18px;
  font-family: DrakoheartBold;
  letter-spacing: .1em;
  padding: 0 0 15px 0;
}

#description h3 {
  color: var(--light1);
  font-size: 24px;
  font-family: DrakoheartBold;
  letter-spacing: .1em;
  padding: 0;
  margin: 0;
}

#description ul {
  margin-left: -15px;
}

.bigger {
  color: var(--light1);
  font-size: 18px;
  font-family: DrakoheartBold;
}

#description #title {
  grid-area: title;
  padding-left: 10px;
}

#description #nft {
  grid-area: nft;
  width: 100%;
  margin-left: 10px;
  text-align: center;
}

#nft img {
  max-height: 500px;
}

.price {
  font-size: 18px;
  font-family: Duralith;
  color: var(--light1);
}

#bolyro {
  grid-area: bolyro;
  width: 100%;
  padding: 25px;
  text-align: left;
  display: grid;
  grid-template-columns: .3fr .7fr;
  grid-template-rows: 1fr;
  grid-template-areas:
    "headshot bio";
  grid-gap: 0;
}

#bolyro h2 {
  font-family: DrakoheartBold;
  font-size: 18px;
  letter-spacing: 0em;
  padding: 0 0 15px 0;
  color: var(--light1);
}

#headshot {
  padding: 0 30px 0 0;
}

#headshot img {
    border-radius: 3%;

}

#bio {
  display:grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: .5fr .25fr .25fr .25fr 1fr;
  grid-template-areas:
    "name name"
    "location locationContent"
    "specialty specialtyContent"
    "kwote kwoteContent"
    "phunfact phunfactContent"
    "didjuno didjunoContent";
    grid-gap: 0;
}

#name, #occupation{
  grid-column-start: 1;
  grid-column-end: 3;
}

#imalie {
  grid-area: imalie;
  width: 100%;
}

#footer {
  grid-area: footer;
  width: 100%;
  text-align: center;
  margin: 0 auto;
  padding: 100px 0 50px;
}

.slides {
  display:none;
  width:100%;
  padding-bottom:50px;
}

.w3-left, .w3-right {
  font-size: 32px;
}

.w3-left, .w3-right, .w3-badge {
    cursor:pointer
  }

.w3-badge {
  height:13px;width:13px;padding:0
}

.w3-display-bottommiddle {
    //bottom: -40px;
}

.arrowColor, .arrowColorHover:hover {
  color:var(--light2);
}

.arrowColor2, .arrowColor2Hover:hover {
  color:var(--light1);
}

.mune, .muneHover:hover {
  color:#000;
  background-color:var(--light1);;
}

@media only screen and (max-width:999px) {
  #devices {
    display: block;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas:
    "device"
    "device"
    "device";
  }

  .container {
    grid-template-columns: 1fr;
    grid-template-rows: .2fr 1fr .1fr 1fr 3fr 1fr 1fr 1fr .1fr .2fr;
    grid-template-areas:
    "header"
    "devices"
    "border2"
    "slideshow"
    "description"
    "lore"
    "bolyro"
    "imalie"
    "border3"
    "footer";
    padding:0;
  }

  #bolyro {
    grid-template-columns: 1fr;
    grid-template-rows: .3fr .7fr;
    grid-template-areas:
      "headshot"
      "bio";
    grid-gap: 0;
  }
}