@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&display=swap');

html, body {
  padding:0;
  margin:0;
  scroll-behavior: smooth;
}

::selection {
  background: #fff000; /* WebKit/Blink Browsers */
  color:#000;
}

::-moz-selection {
  background: #fff000; /* Gecko Browsers */
  color:#000;
}

html {
  background-color:#000;
}

body {
  font-family: 'Lato', sans-serif;
  font-weight:300;
  color:#fff;
  min-height:110vh;

}

body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 150vh;
  z-index: -10;
  background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('assets/headerbackground.jpg');
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  -moz-background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('assets/headerbackground.jpg');
  -moz-background-size: cover;
  -moz-background-attachment: fixed;
  -moz-background-position: center;
  -moz-background-repeat: no-repeat;
}

em a, em a:visited {
  color: #fff;
  text-decoration: none;
  padding:5px;
  border: 1px red solid;
  border-radius:5px;
  display:inline-block;
  transition:.5s;
}

em a:hover, em a:visited:hover {
  color: red;
}

#contain {
  width:800px;
  margin:0 auto;
  padding-bottom:4vh;
  padding-top:4vh;
  margin-top:0vh;
}

.containtwo {
  width:800px;
  margin:0 auto;
  padding-bottom:4vh;
  padding-top:4vh;
  clear:both;
  margin-top:40vh;
}

.wrapper {
  width:800px;
  padding-top:5vh;
  padding-bottom:5vh;
  margin:0 auto;
  text-align:right;
  z-index:1;
  position:relative;
}

h1 {
  font-weight:900;
  color:#fff;
  margin:0 auto;
  display:inline-block;
}

.wrapper h1 {
  padding:.5vw 1vw;
  background-color:#fff000;
  color:#000;

}

h2 {
   font-weight:900;
   color:#fff000;
   text-align:center;
   display:inline-block;
   margin:0;
}

h1 {
  font-size:4em;
}

h2 {
  font-size:2.5em;
}

h3 {
  font-size:1.2em;
  margin:0;
  font-weight:300;
  text-shadow: 2px 2px 4px #000;
}

.back2 {
  width:100%;
  z-index:1;
  position:relative;
}

.entry {
  height:auto;
  padding:1vh 0;
}

.entry p {
    border:dashed 2px white;
    padding:15px;
    text-shadow: 2px 2px 4px #000;
    text-align: justify;
}

.entry h1 {
  color:#fff000;
  font-size:2em;
  text-align:left;
  margin-top:.5vh;
  padding:0;
  background-color:rgba(0,0,0,0);
  margin-left:0;
  font-family: 'Playfair Display', serif;
  text-shadow: 2px 2px 4px #000;
  display:block;
}

.entry h2 {
  color:#fff;
  font-size:1.3em;
  font-weight:300;
  padding-right:100px;
  text-align:left;
  font-style:italic;
  font-family: 'Playfair Display', serif;
  text-shadow: 2px 2px 4px #000;
  display:block;
}

.entry h3  {
  color:#fff;
  font-size:1.3em;
  text-align:left;
  font-family: 'Playfair Display', serif;
  text-shadow: 2px 2px 4px #000;
  display:block;
}

footer h3 {
  color:#fff;
  font-size:1.3em;
  text-align:center;
  font-family: 'Playfair Display', serif;
  text-shadow: 2px 2px 4px #000;
  margin-top:15px;
}

.stripes {
  width:calc(50vw - 550px);
  height:1000vh;
  position:fixed;
  top:0;
  left:0;
  background: -moz-linear-gradient(left, rgba(9,30,48,1) 0%, rgba(125,185,232,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, rgba(9,30,48,1) 0%,rgba(125,185,232,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, rgba(9,30,48,1) 0%,rgba(125,185,232,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#091e30', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 */
  z-index:1;
}

.stripestwo {
  width:calc(50vw - 550px);
  height:1000vh;
  position:fixed;
  top:0;
  right:0;
  background: -moz-linear-gradient(left, rgba(125,185,232,0) 0%, rgba(9,30,48,0.99) 99%, rgba(9,30,48,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, rgba(125,185,232,0) 0%,rgba(9,30,48,0.99) 99%,rgba(9,30,48,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, rgba(125,185,232,0) 0%,rgba(9,30,48,0.99) 99%,rgba(9,30,48,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007db9e8', endColorstr='#091e30',GradientType=1 ); /* IE6-9 */
  z-index:1;
}

.sectionbreak {
  height:40vh;
  color:white;
  background-color:black;
  width:100%;
  z-index:100;
  position:absolute;
  text-align:center;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
}

.sectionbreak h1 {
  color:#000;
  background-color:yellow;
  font-size:3em;
  padding:10px;
  text-align:center;
}

.toc {
  padding-top:50px;
  color:white;
  width:100%;
  text-align:center;
  z-index:1;
  position:relative;
}

.toc h1 {
  font-size:2.5em;
  color:#000;
  display:inline-block;
  font-family:Lato;
  background-color:#fff000;
  text-shadow:none;
  margin:0 auto;
  padding:10px;
}

.toc h2 {
  color:#fff;
  font-size:1.2em;
  text-align:center;
  font-weight: 300;
  padding-top:1vh;
  font-family:Lato;
  display:block;
  text-shadow: 2px 2px 2px #000;
}

.backone {
  background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('assets/backone.jpg');
  background-size:cover;
  background-position: center;
  background-attachment: fixed;
}

.backtwo {
  background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('assets/backtwo.jpg');
  background-size:cover;
  background-position: center;
  background-attachment: fixed;
}

.backthree {
  background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('assets/backthree.jpg');
  background-size:cover;
  background-position: center;
  background-attachment: fixed;
}
 header {
   z-index:1;
   position:relative;
 }

header p {
  padding:3vw;
  color:#fff;
  border: dashed 2px #fff;
  text-shadow: 2px 2px 4px #000;
  text-align: justify;
}

footer {
  height: 40vh;
  text-align:center;
  z-index:1;
  position:relative;
}

.arrowbox {
    color: #FFF;
    border: 2px solid rgb(216, 2, 134);
    border-radius: 0px;
    padding: 18px 36px;
    display: inline-block;
    text-decoration:none;
    font-size: 20px;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: inset 0 0 0 0 #D80286;
    -webkit-transition: ease-out 0.4s;
    -moz-transition: ease-out 0.4s;
    transition: ease-out 0.4s;
}

.arrowbox:hover {
    box-shadow: inset 400px 0 0 0 #D80286;
}

.arrowbox img {
  height:25px;
  float:right;
  margin-left:10px;
  margin-top:2px
}

.cover {
  width:190px;
  float:left;
  margin-left:3vw;
  padding-top:15px;
}

.buttons {
  margin:0 auto;
  padding-top:3vh;
  padding-bottom:3vh;
  height: 210px;
}

.button {
  background: rgba(0,0,0,0);
  border: 1px solid #fff;
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 4px;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  line-height: 25px;
  min-height: 40px;
  outline: 0;
  padding: 15px 14px;
  text-align: left;
  text-rendering: geometricprecision;
  text-transform: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: middle;
  transition:.25s;
  text-decoration: none;
  display:inline-block;
  width: 400px;
  margin-top:15px;
  margin-bottom:15px;
  margin-right:3vw;
  float:right;
  text-shadow: 2px 2px 4px #000;
}

.button span {
  padding-top:8px;
  display:block;
}

.button:hover,
.button:active {
  background-color: initial;
  color: rgb(220,220,0);
  border: 1px solid rgb(220,220,0);
  background-position: 0 0;
}

.button:hover img, .button2:hover img {
  filter: brightness(100%) sepia(100) saturate(100) hue-rotate(0deg);
}
.button:active {
  opacity: .5;
}

.button img {
  height:70px;
  margin-right:20px;
  float:left;
  transition: .5s;
}

.button2 img {
  height:40px;
  margin-right:20px;
  float:left;
  transition: .5s;
}

.button2 {
  background: rgba(0,0,0,0);
  border: 1px solid #fff;
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 4px;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  line-height: 40px;
  min-height: 40px;
  outline: 0;
  padding: 15px 14px;
  text-align: left;
  text-rendering: geometricprecision;
  text-transform: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: middle;
  transition:.25s;
  text-decoration: none;
  display:inline-block;
  width: 280px;
  margin-top:15px;
  margin-bottom:15px;
  margin-right:3vw;
  text-shadow: 2px 2px 4px #000;
}

.wrapper .button2 {
  width:100%;
  line-height: 20px;
  color:rgb(220,220,0);
}

.button2:hover,
.button2:active {
  background-color: initial;
  color: rgb(220,220,0);
  border: 1px solid rgb(220,220,0);
  background-position: 0 0;

}

.button2:active {
  opacity: .5;
}

.buttonthree {
  color: #FFF;
  border: 2px solid rgb(216, 2, 134);
  border-radius: 0px;
  padding: 18px 20px;
  display: inline-block;
  font-size: 20px;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: inset 0 0 0 0 #D80286;
  -webkit-transition: ease-out 0.4s;
  -moz-transition: ease-out 0.4s;
  transition: ease-out 0.4s;
}

.buttonthree:hover {
  box-shadow: inset 420px 0 0 0 #D80286;
}

#outer {
  width: 450px;
  margin: 20px auto 20px auto;
  text-align: center;
}

@media only screen and (max-width: 1000px) {
  .wrapper {
    width:90vw;
  }
  .stripes, .stripestwo {
    display:none;
  }

  .cover {
    width:50%;
    margin: 0 25%;
    float:none;
    display:block;
  }

  .containtwo, #contain {
    width:90%;
  }

  .button {
    width: 100%;
    margin:15px auto 15px auto;
    height:100px;
    max-width:600px;
    float:none;
    display:block;
    position:relative;
  }

  .toc {
    padding-top:75px;
    color:white;
    width:90%;
    margin-left:5%;
    clear:both;
    text-align:center;
  }

  .toc h1 {
    color:#000;
    font-size:6vw;
    display:inline-block;
    font-family:Lato;
    background-color:#fff000;
    text-shadow:none;
    margin:0 auto;
    padding:10px;
  }

  .toc h2 {
    font-size:3vw;
    text-align:center;
    font-weight: 300;
    padding-top:1vh;
    font-family:Lato;
  }

  .sectionbreak {
    height:30vh;
  }

  .sectionbreak h1 {
      font-size:6vw;
  }

  .containtwo {
    margin-top:30vh;
  }

  .buttonthree {
    padding: 18px 20px;
    font-size: 16px;
  }

  #outer {
    width: 90%;
    margin: 20px auto 20px auto;
    text-align: center;
  }

  .arrowbox {
      color: #FFF;
      border: 2px solid rgb(216, 2, 134);
      border-radius: 0px;
      padding: 18px 36px;
      display: inline-block;
      text-decoration:none;
      font-size: 16px;
      letter-spacing: 1px;
      cursor: pointer;
      box-shadow: inset 0 0 0 0 #D80286;
      -webkit-transition: ease-out 0.4s;
      -moz-transition: ease-out 0.4s;
      transition: ease-out 0.4s;
  }

  .arrowbox img {
    height:20px;
    float:right;
    margin-left:10px;
    margin-top:2px;
  }

  .arrowbox:hover {
      box-shadow: none;
      background-color:#D80286;
  }

  .buttonthree:hover {
    box-shadow: none;
    background-color:#D80286;
  }

  footer {
    height: 30vh;
    text-align:center;
  }

  .wrapper {
    text-align: center;
  }

  header h1 {
    font-size:10vw;
    background-color:#fff000;
    color:black;
  }

  body {
    padding-top:5vh;
  }

  header h2 {
    font-size:5vw;
  }

  header h3 {
    font-size:3.7vw;
  }

  header h3 {
    margin-bottom:5vh;
    margin-top:1vh;
  }

  html, body {
    overflow-x: hidden;
  }
}