*, *::before, *::after {
  box-sizing: border-box;
  font-family: Menlo-Regular, Oswald, sans-serif;
  font-weight: normal;
  /* Menlo-Regular, */
}

:root {
  --background-image: url('/static/images/fabrication/tank floor.jpeg');
  /* --logo: url('/static/artwork/NFTYGiFY-LOGO.svg'); */
  /* --logo-stamp: url('/static/artwork/mystamp.svg'); */
  --overlay-back-colour: rgba(12, 44, 85, 0.95);
  --overlay-border: solid 5px blue;
  --overlay-button-colour: #117415;
  --overlay-button-hover-colour: #41A445;
  /* --colour: white; */
  --colour: #bababa;
  --header-colour: #1b1a1a;
  --subsection-bg: #1b1a1a;
  --button-bg: #2a2a2a;
  --input-border: 3px solid blue;
  --input-background-colour: rgba(0,0,0,0.5);
  --input-colour: #bababa;
  --background-colour: #000000;
  --highlight-colour: rgba(196, 80, 80, 0.38);
  --gallery-button-background: rgb(0, 106, 255);
  /* --infoBut: url('/static/artwork/butt/NFTYGiFY-infobutton.svg'); */
  --header-height:  80px;
}

/* @media (prefers-color-scheme: light) {
  :root {
    --background-image: url('/static/artwork/NFTyGify_BG-fullpage.png');
    --overlay-back-colour: rgba(12, 44, 85, 0.95);
    --overlay-border: solid 5px blue;
    --overlay-button-colour: #117415;
    --overlay-button-hover-colour: #41A445;
    --colour: white;
    --input-border: 3px solid #a20c0c;
    --input-background-colour: white;
    --input-colour: black;
    --background-colour: #000000;
  }
} */

html {
  /* background-color: rgba(0,0,0,0.3); */
  height: 100%;
}

body {
  position: relative;
  padding: 0;
  margin: 0;
  background-image: var(--background-image);
  background-size: cover;
  background-position: center;
  /* background-size: 120%; */
  /* touch-action: pan-y pinch-zoom; */
  /* overflow: auto; */
  /*! min-height: 100%; */
}

header {
  display: flex;
  position: fixed;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: var(--header-height);
  padding: 10px;
  color: var(--colour);
  background-color: var(--header-colour)
}

.title {
  position: absolute;
  left: 0;
  padding-left: 20px;
  font-weight: bold;
}

.headertagline {
  position: absolute;
  font-size: 1.1em;
  right: 0;
  padding-right: 20px;
}

main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-evenly;
  position: absolute;
  overflow-y: scroll;
  top: var(--header-height);
  height: calc(100vh - calc(2 * var(--header-height)));
  /* height: 200vh; */
  width: 100%;
  padding: 10px;
}

.blurb {
  width: 90%;
  /* align-self: center; */
  background-color: var(--subsection-bg);
  color: var(--colour);
  padding: 20px;
  margin-left: 3%;
  border-radius: 6px;
}

.subsectionbox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-evenly;
  width: 80%;
  row-gap: 10px;
  /* min-height: 60vh; */
  padding-left: 3%;
}

.subsection {
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  column-gap: 5%;
  width: 100%;
  /* margin-left: 5%; */
  background-color: var(--subsection-bg);
  color: var(--colour);
  border-radius: 6px;
  padding: 10px;
}

.sublink {
  color: var(--colour);
  font-size: 1.6em;
  text-decoration: none;
  background-color: var(--button-bg);
  padding: 18px;
  /* margin: 10px; */
  min-width: 190px;
  width: 40%;
}

.sublink h3 {
  font-size: .9em;
  margin: 0;
}

.sublink p {

}

footer {
  display: flex;
  position: fixed;
  /* bottom: 0px; */
  top: calc(100vh - var(--header-height));
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: var(--header-height);
  padding: 10px;
  color: var(--colour);
  background-color: var(--header-colour)
}

.contactbox {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: space-between;
  column-gap: 40px;
  right: 0;
  font-size: 1.1em;
  text-decoration: none;
  color: var(--colour);
  padding-right: 20px;
}

.phonelink, .textlink, .phonenumber {
  /* position: absolute; */
  /* right: 0; */
  text-decoration: none;
  color: var(--colour);
  padding: 12px;
}

.phonelink, .textlink {
  background-color: var(--button-bg);
  border-radius: 6px;
  border: solid var(--highlight-colour) 1px;
}

.phonelink::after {
  content: url("/static/artwork/phone.icon.edit.svg");
  display: inline-block;
  position: relative;
  top: 3px;
  height: .9em;
  width: .9em;
  margin-left: 13px;
}

.textlink::after {
  content: url("/static/artwork/text.icon.svg");
  display: inline-block;
  position: relative;
  top: 3px;
  height: .9em;
  width: .9em;
  margin-left: 13px;
}

@media (orientation: portrait) and (max-width: 890px){

  main {

  }

  .headertagline {
    visibility: hidden;
  }

  .subsectionbox {
    width: 80%;
    row-gap: 5px;
    margin: 20px 0 20px 0;
  }

  .subsection {
    /* width: 80%; */
    /* margin-left: 5%; */
    /* padding: 10px; */
  }

  .subsection p {
    display: none;
  }

  .sublink {
    width: 100%;
    font-size: 1.5em;
  }

  .sublink::after {
    /* content: url("/static/artwork/text.icon.svg");
    display: inline-block;
    position: relative;
    top: 3px;
    height: .9em;
    width: .9em;
    margin-left: 13px; */
  }

  .contactbox {
    position: relative;
    column-gap: 5px;
    font-size: 2em;
    width: 100%;
    padding: 0;
  }

  .phonelink, .textlink, .phonenumber {
    font-size: .5em;
    padding: 10px 15px 10px 15px;
    border-radius: 4px;
  }

  .phonenumber {
    font-size: .4em;
    padding: 5px;
  }
}