@import url("https://fonts.googleapis.com/css?family=Quicksand:300");
@import url("https://fonts.googleapis.com/css?family=Diplomata");
@import url("https://fonts.googleapis.com/css?family=Kodchasan");
@import url("https://fonts.googleapis.com/css?family=Acme|EB+Garamond&display=swap");
@import url("https://fonts.googleapis.com/css?family=Cinzel&display=swap");
@import url("https://fonts.googleapis.com/css?family=Cinzel|Special+Elite&display=swap");

/*css variables*/
:root {
  --primary: #ddd;
  --dark: #333;
  --light: #fff;
  --hlight: #d3d3d3;
  --shadow: 0 1px 5px rgba(104, 104, 104, 0.8);
}

html {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--dark);
}

body {
  background: #ccc;
  margin: 30px 50px;
  line-height: 1.4;
}

.btn {
  background: var(--dark);
  color: var(--light);
  padding: 0.6rem 1.3rem;
  text-decoration: none;
  border: 0;
  text-align: center;
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(20px, 1fr));
}

img {
  max-width: 100%;
}

.wrapper {
  display: grid;
  grid-gap: 20px;
}

/*navigation*/
.main-nav ul {
  display: grid;
  grid-gap: 20px;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(4, 1fr);
}

.main-nav a {
  background: var(--primary);
  display: block;
  text-decoration: none;
  padding: 0.8rem;
  text-align: center;
  color: var(--dark);
  text-transform: uppercase;
  font-size: 1.1rem;
  box-shadow: var(--shadow);
}

.main-nav a:hover {
  background: var(--dark);
  color: var(--light);
}

/* top container*/
.top-container {
  display: grid;
  grid-gap: 20px;
  grid-template-areas:
    /*'top-box-a showcase showcase '*/ "top-box-b showcase showcase ";
}

/*showcase*/
.showcase {
  grid-area: showcase;
  min-height: 400px;
  background-size: cover;
  background-position: center;
  /*padding: 3rem;*/
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  box-shadow: var(--shadow);
}
.hitler {
  grid-area: showcase;
  min-height: 400px;
  background: url("./../_img/ahdeer.jpg");
  background-size: cover;
  background-position: center;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  box-shadow: var(--shadow);
}
.techniquesIndex {
  grid-area: techniquesIndex;
  min-height: 400px;
  background-size: cover;
  background-position: center;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  box-shadow: var(--shadow);
}

.showcase .nested {
  display: grid;
  align-items: center;
  grid-template-columns: repeat(2, 150fr);
  grid-auto-rows: 70px;
  grid-gap: 1em;
}

.nested > div {
  border: #333 1px solid;
  padding: 1em;
}

.tut1 {
  background: url("./../img/Midgard.jpg");
}

.showcase .midgard {
  width: 100%;
  height: 100%;
  background: url("./../img/Midgard.jpg");
  background-size: cover;
  background-position: center;
  padding: 0;
}

.showcase .alfheim {
  width: 100%;
  height: 100%;
  background: url("./../img/Alvheim02.jpg");
  background-size: cover;
  background-position: center;
  padding: 0;
}

.showcase .helheim {
  width: 100%;
  height: 100%;
  background: url("./../img/HelheimBig.jpg");
  background-size: cover;
  background-position: center;
  padding: 0;
}

.showcase .jotunheim {
  width: 100%;
  height: 100%;
  background: url("./../img/JotunheimBig.jpg");
  background-size: cover;
  background-position: center;
  padding: 0;
}

.showcase .Muspelheim {
  width: 100%;
  height: 100%;
  background: url("./../img/MuspelheimBig.jpg");
  background-size: cover;
  background-position: center;
  padding: 0;
}

.showcase .asgard {
  width: 100%;
  height: 100%;
  background: url("./../img/AsgardBig.jpg");
  background-size: cover;
  background-position: center;
  padding: 0;
}

.showcase .niflheim {
  width: 100%;
  height: 100%;
  background: url("./../img/NiflheimBig.jpg");
  background-size: cover;
  background-position: center;
  padding: 0;
}

.showcase .vanaheim {
  width: 100%;
  height: 100%;
  background: url("./../img/Vanaheim.jpg");
  background-size: cover;
  background-position: center;
  padding: 0;
}

.showcase .helheim {
  width: 100%;
  height: 100%;
  background: url("./../img/HelheimBig.jpg");
  background-size: cover;
  background-position: center;
  padding: 0;
}

.showcase .ragnarok {
  width: 100%;
  height: 100%;
  background: url("../../_events/img/RagnarokRise.jpg");
  background-size: cover;
  background-position: center;
  padding: 0;
}

.showcase .construction {
  width: 100%;
  height: 100%;
  background: url("./../img/under_construction.jpg");
  background-size: cover;
  background-position: center;
  padding: 0;
}

.showcase h1 {
  text-align: justify;
  padding-left: 10rem;
  font-size: 6rem;
  margin-bottom: 0;
  color: var(--light);
}

.showcase p {
  padding-left: 10rem;
  font-size: 2.3rem;
  margin-top: 0;
  margin-left: 200px;
  color: var(--light);
}

/*top-box*/
.top-box {
  background: var(--primary);
  display: grid;
  align-items: center;
  justify-items: stretch;
  box-shadow: var(--shadow);
  padding: 1.5rem;
}

.top-box .price {
  font-size: 2.5rem;
}

.top-box-a {
  grid-area: top-box-a;
}

.top-box-c {
  grid-area: top-box-c;
}

.top-box-b {
  grid-area: top-box-b;
}

.top-box .top-box-b .row-box {
  display: inline-block;
}

.top-box .top-box-c .row-box {
  display: inline-block;
}

.button {
  padding: 0.6rem 1.3rem;
  text-align: center;
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.current {
  border-style: solid;
  border-width: 2px;
  border-color: blue;
}

.btn:hover {
  background-color: #666;
  color: white;
}

/*boxes*/
.boxes {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.box {
  background: var(--primary);
  text-align: center;
  padding: 1.5rem 2rem;
  box-shadow: var(--shadow);
}

/*info*/
.info {
  background: var(--primary);
  box-shadow: var(--shadow);
  display: grid;
  grid-gap: 30px;
  grid-template-columns: repeat(2, 1fr);
  padding: 3rem;
}

.xinfo {
  background: var(--primary);
  box-shadow: var(--shadow);
  display: grid;
  grid-gap: 30px;
  grid-template-columns: repeat(1, 1fr);
  padding: 3rem;
}

/*portfolio*/
.portfolio {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.portfolio img {
  width: 100%;
  box-shadow: var(--shadow);
  float: left;
}

/*footer*/
footer {
  margin-top: 2rem;
  background: var(--dark);
  color: var(--light);
  text-align: center;
  padding: 1rem;
}

/*media query*/
@media (max-width: 900px) {
  .top-container {
    grid-template-areas:
      "showcase "
      "top-box-b";
  }

  .showcase h1 {
    font-size: 3rem;
  }

  .showcase h2 {
    font-size: 2.5rem;
  }

  .showcase h3 {
    font-size: 2rem;
  }

  .main-nav ul {
    grid-template-columns: 1fr;
  }

  .info {
    grid-template-columns: 1fr;
  }

  .info .btn {
    display: block;
    text-align: center;
    margin: auto;
  }
}

@media (max-width: 600px) {
  .top-container {
    grid-template-areas:
      "showcase"
      "top-box-a"
      "top-box-b";
  }

  .top-container h6 {
    padding-left: 1rem;
    font-size: 1rem;
    margin-bottom: 0;
    color: var(--light);
  }

  .top-container {
    position: fixed;
    width: 75%;
  }

  .singleunit {
    display: none;
  }
}

.showcase .ah {
  width: 100%;
  height: 100%;
  background: url("./../img/HitlerA/AH_deer.jpg");
  background-size: 100% 100%;
  background-position: center;
  padding: 0rem;
  padding-top: 0;
  margin-top: 0;
}

.showcase .raven {
  width: 100%;
  height: 100%;
  background: url("../_gods/img/Odin/showcase.jpg");

  background-size: cover;
  background-position: center;
  padding: 0;
}

.knots {
  background: url(../../img/Backgrounds/norse_knots.jpg);
  background-repeat: repeat;
  padding: 90px;
  
  color: black;
  border: rgb(107, 105, 105) solid 3px;
  border-radius: 5px;
  background-color: #a3b1b4;
  box-shadow: var(--shadow);
  opacity: 0.8;
}

.knots2 {
  background: url(../../img/Backgrounds/norse2.png);
  background-repeat: repeat;
  padding: 20px;
  color: black;
  border: rgb(107, 105, 105) solid 3px;
  border-radius: 5px;
  background-color: #a3b1b4;
  box-shadow: var(--shadow);
  opacity: 0.8;
}

.decogreen a:link {
  text-decoration: none;
  color: rgb(121, 6, 25);
}

.decogreen a:visited {
  text-decoration: none;
  color: brown;
}

.decogreen a:hover {
  text-decoration: underline;
}

.decogreen a:active {
  text-decoration: underline;
}
.citing::before {
  content: open-quote;
}
.citing::after {
  content: close-quote;
}
.Citing {
  quotes: "“" "”" "‘" "’";
}
.Saga_r {
  background: url(../../_img/global/SS_Platanenmuster_Herbst.jpg);
  grid-column: col 2 / span 3;
  grid-row: row;
  background: #a3b1b4;
  border: #333 solid 3px;
  border-radius: 5px;
  padding: 40px;
}
.sagabackg {
  background: url(../img/Backgrounds/norse2.png);
  background-repeat: repeat;
  padding: 20px;
  color: black;
  border: rgb(107, 105, 105) solid 3px;
  border-radius: 5px;
  background-color: #a3b1b4;
  box-shadow: var(--shadow);
  opacity: 0.8;
}

.sagabg001 {
  background: url(../../img/Backgrounds/norse_knots1.png);
  background-repeat: repeat;
  padding: 20px;
  color: black;
  border: rgb(107, 105, 105) solid 3px;
  border-radius: 5px;
  background-color: #a3b1b4;
  box-shadow: var(--shadow);
  opacity: 0.8;
}

.embla {
  background: url("../../img/Backgrounds/icy_blue_001.jpg");
  background-position: center;
  background-size: cover;
  text-shadow: 1px 2px #76bce6;
}
.mythbox {
  background: var(--primary);
  box-shadow: var(--shadow);
  display: grid;
  grid-gap: 30px;
  grid-template-columns: repeat(2, 1fr);
  padding: 3rem;
}

.mythbox2 {
  /*background: var(--primary);*/
  box-shadow: var(--shadow);
  display: grid;
  position: relative;
  grid-gap: 30px;
  grid-template-columns: repeat(4, [col] auto);
  grid-template-rows: repeat(2, [row] auto);
  box-shadow: var(--shadow);
  padding: 3rem;
  border: #333 solid 3px;
  border-radius: 5px;
  background-color: #023f4d;
}
.showcase2 .thor {
  background: url("../_img/global/SS_Platanenmuster_Herbst.jpg");
  background-size: cover;
  background-position: center;
}
.knotsimg {
  background: url(../../_img/global/Backgrounds/norse_knots.jpg);
  background-repeat: repeat;
  padding: 20px;
  color: black;
  border: rgb(107, 105, 105) solid 3px;
  border-radius: 5px;
  background-color: #a3b1b4;
  box-shadow: var(--shadow);
}
.toc_list a {
  font-family: "Courier New", Courier, monospace;
  text-decoration: none;
}
.toc_list li a:link {
  color: rgb(36, 4, 73);
}

.toc_list li a:hover {
  color: rgb(219, 5, 5);
}

/* selected link */
.toc_list li a:active {
  color: blue;
}
.toc_list ul a:link {
  color: rgb(85, 6, 95);
}

/* visited link */
.toc_list ul a:visited {
  color: green;
}

/* mouse over link */
.toc_list ul a:hover {
  color: rgb(219, 101, 5);
}

/* selected link */
.toc_list ul a:active {
  color: blue;
}

.toc_title {
  font-size: 2rem;
}

.Ragnaroktop h1 {
  font-size: 10rem;
  display: top;
  padding: 1rem;
  padding-top: 0rem;
  align-self: center;
  vertical-align: top;
  margin-top: 0rem;
}

.Ragnaroktop p {
  padding-left: 10rem;
  font-size: 3.3rem;
  margin-top: 0;
  color: var(--light);
}

.snaptun figure {
  float: right;
  width: auto;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
  padding-bottom: 0;
}

.mythbox blockquote {
  font-style: italic;
  font: 0.9em monospace;
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}

.addbrdr {
  border: rgb(107, 105, 105) solid 3px;
  border-radius: 5px;
  background-color: #a3b1b4;
  box-shadow: var(--shadow);
  opacity: 0.8;
}
.Vanir_war {
  background: url("../../img/Backgrounds/War-scene-with-female-sorceress-on-one-side-Picture-Stone-Viking-Age-Gotland.jpg");
  background-position: center;
  background-size: cover;
  text-shadow: 1px 2px #52042b;
}
.vanekrigen {
  background: url(../../img/Backgrounds/vanekrigen.jpg);
  background-repeat: repeat;
  padding: 20px;
  color: black;
  border: rgb(107, 105, 105) solid 3px;
  border-radius: 5px;
  background-color: #a3b1b4;
  box-shadow: var(--shadow);
  opacity: 0.8;
}
.trigger {
  color: red;
}

.hidden {
  display: none;
}
.mead {
  background: url(../../img/misc/Mead-of-Poetry.jpg);
  background-repeat: no-repeat;
  padding: 20px;
  color: black;
  border: rgb(107, 105, 105) solid 3px;
  border-radius: 5px;
  background-color: #a3b1b4;
  box-shadow: var(--shadow);
  opacity: 0.8;

  background-position: center;
  background-size: cover;
}
.runic_banner {
  background: url("../../img/misc/runes.jpg");
  background-position: center;
  background-size: cover;
  text-shadow: 1px 2px #10a9e6;
}
.hammer {
  background: url(../../img/misc/draupnir2.jpg);
  background-repeat: no-repeat;
  padding: 20px;
  color: black;
  border: rgb(107, 105, 105) solid 3px;
  border-radius: 5px;
  background-color: #a3b1b4;
  box-shadow: var(--shadow);
  opacity: 0.8;

  background-position: center;
  background-size: cover;
}
.hammer_banner {
  background: url("../../img/misc/forging+hammer.jpg");
  background-position: center;
  background-size: cover;
  text-shadow: 1px 2px #10a9e6;
}
.asgardwall {
  background: url(../../img/Backgrounds/asgardgates.png);
  background-repeat: no-repeat;

  padding: 20px;
  color: black;
  border: rgb(107, 105, 105) solid 3px;
  border-radius: 5px;
  background-color: #a3b1b4;
  box-shadow: var(--shadow);
  opacity: 0.8;

  background-position: center;
  background-size: cover;
}
.runicheader {
  background: url("../../img/Backgrounds/runiceader.jpg");
  background-position: center;
  background-size: cover;
  text-shadow: 1px 2px #10a9e6;
}
.eindcitaat {
  line-height: 1.5em;
  text-align: left;
  padding-left: 1.6em;
  margin-top: 0px;
  color: rgb(32, 33, 34);
  font-family: sans-serif;
  font-size: 14px;
  font-style: normal;
  font-variant-ligatures: normal;
  font-variant-caps: normal;
  font-weight: 400;
  letter-spacing: normal;
  orphans: 2;
  text-indent: 0px;
  text-transform: none;
  white-space: normal;
  widows: 2;
  word-spacing: 0px;
  -webkit-text-stroke-width: 0px;
  background-color: rgb(255, 255, 255);
  text-decoration-style: initial;
}
.odineye {
  background: url(../../img/misc/Manuscript-Odinn.jpg);
  background-repeat: no-repeat;
}
.eyeheader {
  background: url("../../img/Backgrounds/Gosforth_Cross_Víðarr.jpg");
  background-position: center;
  background-size: cover;
  text-shadow: 1px 2px #0c0c0c;
}
.Fullstory {
  background: #bbb4b4;
}

.Fullstory p {
  padding: 10px;
}
.miscFullstory {
  background-color: white;
  padding: 2.5rem;
  margin: 2.5rem;

  box-shadow: 10px 10px #141414;
  color: rgb(12, 12, 12);
}
.textFullstory {
  /* font-family: 'Cinzel', serif;*/
  font-family: "Special Elite", cursive;
  padding: 95px;
  margin: 1px;
  font-size: 1rem;
  /*text-shadow: 0.5px 3px #e4aa3e;*/
  font-style: italic;
  text-indent: 30px;
  color: #1f1453;
  word-spacing: 2px;
  text-shadow: 0.5px 3px #e4e4e6;
}
.textFullstory h1 {
  font-size: 30px;
  text-decoration: underline;
  text-shadow: 1px 1px #bbb4b4;
  color: #1f1453;
}
.iduna {
  background: url(../../img/Idunn/golden\ apple.jpg);
  background-repeat: no-repeat;

  padding: 20px;
  color: black;
  border: rgb(107, 105, 105) solid 3px;
  border-radius: 5px;
  background-color: #a3b1b4;
  box-shadow: var(--shadow);
  opacity: 0.8;

  background-position: top;
  background-size: 100%;
}
.springheader {
  background: url("../../img/Backgrounds/spring\ landscape.jpg");
  background-position: center;
  background-size: cover;
  text-shadow: 1px 2px #10a9e6;
}
.dwarvensmith {
  background: url("../../img/Backgrounds/dwarvensmith.jpg");
  background-position: center;
  background-size: cover;
  text-shadow: 1px 2px #5d0486;
}
.goldenhair {
  background: url("../../img/Backgrounds/sifhair.jpg");
  background-position: center;
  background-size: cover;
  text-shadow: 1px 2px #5d0486;
}

.SifHair {
  background: url(../../img/Sif/lokiDwarveshair.jpg);
  background-repeat: no-repeat;

  padding: 20px;
  color: black;
  border: rgb(107, 105, 105) solid 3px;
  border-radius: 5px;
  background-color: #a3b1b4;
  box-shadow: var(--shadow);
  opacity: 0.8;

  background-position: top;
  background-size: 100%;
}

.default_par {
  padding: 20px;
  color: black;
  border: rgb(107, 105, 105) solid 3px;
  border-radius: 5px;
  background-color: #a3b1b4;
  box-shadow: var(--shadow);
  opacity: 0.8;

  background-position: top;
  background-size: 100%;
}

.Runicus {
  background: url(../../img/Odin/DoeplerOdhinnHangingonworldtree.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.runicusbanner {
  background: url("../../img/Backgrounds/runicus.jpg");
  background-position: center;
  background-size: cover;
  text-shadow: 1px 2px #470105;
}
.side_index {
  padding: 20px;
  color: black;
  border: rgb(107, 105, 105) solid 3px;
  border-radius: 5px;
  background-color: #a3b1b4;
  box-shadow: var(--shadow);
  opacity: 0.8;

  background-position: top;
  background-size: 100%;
}

.Njordskadi {
  background: url(../../img/NjordSkadi/The_Lovesickness_of_Frey_sm.jpg);
  background-repeat: no-repeat;

  object-fit: contain;
}
.Binding {
  background: url(../../img/Fenrir/fenrir.jpg);
  background-repeat: no-repeat;

  object-fit: fill;
  background-position: top;
  background-size: 100%;
}
.bindingheader {
  background: url("../../img/Fenrir/tyr-bras-fenrir_large.jpg");
  background-position: center;
  background-size: cover;
  text-shadow: 1px 2px #0f0f0f;
}
.boxvik blockquote {
  font-style: italic;
  font: 0.9em monospace;
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}
.GermanWandering {
  width: 100%;
  height: 100%;
  background: url("../../_img/global/History/saarland.jpg");
  background-size: cover;
  background-position: center;
  padding: 0;
  object-fit: cover;
}

.bquote {
  font-style: italic;
  font: 0.9em monospace;
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;

  border: none;
  font-family: Georgia, "Times New Roman", Times, serif;
  margin-bottom: -30px;
  quotes: "\201C""\201D""\2018""\2019";
}

.bquote h3 {
  font-size: 13px;
}

.bquote h3:before {
  content: open-quote;
  font-weight: bold;
  font-size: 50px;
  color: #b4d9cd;
}
.bquote h3:after {
  content: close-quote;
  font-weight: bold;
  font-size: 50px;
  color: #b4d9cd;
}

.Leftinsert {
  align-self: left;
}


.Saga_correct {
  background: url(../../img/161216-The-Saga-of-the-Volsungs-mythology.jpg);
  grid-column: col 2 / span 3;
  grid-row: row;
  ackground: #a3b1b4;
  border: #333 solid 3px;
  border-radius: 5px;
  padding: 90px;
  margin: 10px;
}
.Embla {
  background: url(../../img/Embla/Odin-creates-Ask-and-Embla.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  object-fit: contain;
}
.beer {
  background: url("../../img/Backgrounds/beer.jpg");
  background-position: center;
  background-size: cover;
  text-shadow: 1px 2px #470105;
}

.Jormun {
  background: url("../../img/Backgrounds/ThorFishing.jpg");
  background-position: top;
  background-size: cover;
  text-shadow: 1px 2px #470105;
}

.fishingSidepic {
  background: url(../../img/Backgrounds/jormuntiny.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.knots3 {
  background: url(../../img/Backgrounds/norse_knots.jpg);
  background-repeat: repeat;
  padding: 90px;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 
  color: black;
  border: rgb(107, 105, 105) solid 3px;
  border-radius: 5px;
  background-color: #a3b1b4;
  box-shadow: var(--shadow);
  opacity: 0.8;
}

.leftside{
margin-left: 150px;
}

.knots h6{
  font-size: 34px;
  text-decoration: underline;
margin-bottom: 1px;
margin-top: 1px;
}

.knots3 h6{
  font-size: 34px;
  text-decoration: underline;
margin-bottom: 1px;
margin-top: 1px;
}

.xquote {
  font-style: italic;
  font: 0.9em monospace;
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;

  border: none;
  font-family: Georgia, "Times New Roman", Times, serif;
  margin-bottom: -30px;
  quotes: "\201C""\201D""\2018""\2019";
}

.xquote h3 {
  font-size: 13px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.xquote h3:before {
  content: open-quote;
  font-weight: bold;
  font-size: 50px;
  color: #ad0cf7;
}
.xquote h3:after {
  content: close-quote;
  font-weight: bold;
  font-size: 50px;
  color: #ad0cf7;
}