/*
**  style
**  @Description: 
**  @Author: Richard S. Hutchison
**  @Email: email@example.com
**  @Creation Date:   2018-07-20 13:19:59
**  
**  @Usage: 
**  
**  @Last Modified by:   Innovate
**  @Last Modified time: 2019-04-18 11:47:18
*/

:root {
  --total-height: 100vh;
  --container-box-height: calc(var(--total-height) - 4vmin);
  --head-height: calc(var(--container-box-height) * .15);
  --titl-margin-height: calc(var(--container-box-height) * .025);
  --content-height: calc(var(--container-box-height) * .50);
  --order-height: calc(var(--container-box-height) * .35);
  --salelink-height: calc(var(--container-box-height) * .3);;
  --fig-caption-height: calc(var(--container-box-height) * .05);
}


/*================= fucking scroll bar =================*/
/*.element::-webkit-scrollbar { width: 0 !important; }
.element { overflow: -moz-scrollbars-none; }
.element { -ms-overflow-style: none; }*/
/*
html::-webkit-scrollbar { width: 0 !important; }
html { overflow: -moz-scrollbars-none; }
html { -ms-overflow-style: none; }*/

html {
    /*overflow: scroll;
    overflow-x: hidden;*/ /* maybe don't need these??? */
}
::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #FF0000;
}

@-moz-document url-prefix() {
    html,body{overflow: hidden !important;}
}

/*================= fucking scroll bar =================*/



@font-face {
    font-family: 'poor_richardregular';
    src: url('poorich-webfont.eot');
    src: url('poorich-webfont.eot?#iefix') format('embedded-opentype'),
         url('poorich-webfont.woff2') format('woff2'),
         url('poorich-webfont.woff') format('woff'),
         url('poorich-webfont.ttf') format('truetype'),
         url('poorich-webfont.svg#poor_richardregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

* {
  box-sizing: border-box;
}

html {
  /*--total-height: 100vh;*/
  /*height: 100vh;*/
}

html, #main {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}


body {
  
  /*max-height: 100%; */ /*works well enough*/
  /*border: 24px solid transparent;*/ /*works well enough*/
  max-height: var(--total-height);
  /*max-height: 100vh;*/
  
  /* THIS IS WHAT WORKED, but it doesn't work in Safari...*/
  /*border: 2vmin solid transparent;*/ 
  /* THIS IS WHAT WORKED, but it doesn't work in Safari...*/
  
  /* THIS IS THE SUGGESTED FIX, does it work in everything else???...*/
  border-width: 2vmin;
  border-style: solid;
  /* THIS IS THE SUGGESTED FIX, does it work in everything else???...(just checked, it does, except not checking ie or edge or whatever bastard microsoft has spawned*/
  border-image: url(../images/Flag_of_the_United_States.svg) 30; /*use this*/
  
  /*background-color: rgba(150,50,100,0.5); */  /* for developing when people can see */
  
}

/*for prototyping*/
div { 
  /*background-color: gray; 
  border: solid 1px black;*/
}
/*for prototyping*/

/*img {
  max-height: 100vh;
}*/

#main {
  /*height: calc(var(--total-height) - 4vmin);*/ /* did this just fix it?!?! This works*/
  overflow: auto;
  /*height: calc(var(--total-height) - 4vmin);*/ /* did this just fix it?!?! This works*/
  height: var(--container-box-height);
  max-height: var(--container-box-height);
}

.container {
  max-width: 100%;
  padding: 0px; /*to correct for bootstrap container padding*/
}

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  /*min-width: 1024px;*/
  
  /* Set up proportionate scaling */
  height: 100%;
  width: auto;
  
  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

.head {
/*  height: calc(var(--container-box-height) * .15);
  max-height: calc(var(--container-box-height) * .15);  */
  height: var(--head-height);
  max-height: var(--head-height);
}

h1.titl {

  text-align: center;
  /*font-size: calc(var(--container-box-height) * .10);*/ /* need to figure out how to allow word wrap and sizing for best results */
  font-size: 6vmin; /*works well enough for now*/
  opacity: 0.9;
  white-space: nowrap;
  letter-spacing: 0.05em;
  line-height: calc(var(--container-box-height) * .10);
  margin-top: var(--titl-margin-height);
  margin-bottom: var(--titl-margin-height);
  text-transform: uppercase;
  word-wrap: normal;
}

h1.titl2 {
  /*maybe keep*/
  font-family: 'poor_richardregular', "Palatino Linotype", "Book Antiqua", Palatino, serif; 
  
  text-align: center;
  /*font-size: calc(var(--container-box-height) * .10);*/ /* need to figure out how to allow word wrap and sizing for best results */
  font-size: 8vmin; /*works well enough for now*/
  color: #bf0930;
  
  /* make relative */
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  /*ALTERNATE these look super similar, which is preferred?*/
  -webkit-text-stroke: 1px black; /* This is the shorthand for the next 2 lines*/
  /*-webkit-text-stroke-color: black;
  -webkit-text-stroke-width: 1px;
  color: #bf0930;
  -webkit-text-fill-color: white;*/ /* Will override color (regardless of order) */
  /*-webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;*/



  /**/
  /* make relative */

  opacity: 0.9;
  white-space: nowrap;
  letter-spacing: 0.05em;
  line-height: calc(var(--container-box-height) * .10);
  margin-top: var(--titl-margin-height);
  margin-bottom: var(--titl-margin-height);
  
  /*maybe keep*/
  /*text-transform: uppercase;*/
  
  word-wrap: normal;
} 

.otherlink {
  font-size: 5vmin; /*works well enough for now*/
  font-weight: bold;
}

.center {
  align-items: center;
  text-align: center;
  align-content: center;
}

.content {
 /*testing*/
 /* display: flex; 
  justify-content: space-between;
  align-items: center;
  align-content: center;*/
  /*testing*/
  text-align: center;
  fill: black;
  
  /*doesn't do shit -- I take it back, it helps determine the lower pictures*/
  max-height: 70%; 
  /*doesn't do shit -- I take it back, it helps determine the lower pictures*/

/*  height: calc(var(--container-box-height) * .50);
  max-height: calc(var(--container-box-height) * .50);*/
  height: var(--content-height);
  max-height: var(--content-height);

}

img.mane {
  /*max-height: 50vh;*/
  height: var(--content-height);
  max-height: var(--content-height);
  width: auto;
  /*position: absolute;*/
  align-items: center;

  /*THESE KINDA WORKED BUT I WONDER IF THEY'RE WHY IT SPILLED OUTSIDE BODY BORDER*/
  /*margin-top: 20px;
  margin-bottom: 30px;  */

  padding-top: 20px;
  padding-bottom: 30px;
/*  opacity: .05; */ /* for developing when people can see */
}

.order {
  display: flex;
  /*justify-content: space-between;*/
  justify-content: space-around;
  align-items: center;
  /*max-height: 30vh;*/ /*this allows the divs to spill over their parents*/
  
  /* this fixes it */
  /*max-height: 30%; */
  /* this fixes it */
  text-align: center;
  font-size: calc(var(--container-box-height) * .03);
  height: var(--order-height);
  max-height: var(--order-height);
  /*height: calc(var(--container-box-height) * .35);  
  max-height: calc(var(--container-box-height) * .35);*/
  
  /* attempting to evenly distribute sales links */
  /*padding-left: 10%;
  padding-right: 10%;*/
  /* attempting to evenly distribute sales links */

}

  /* attempting to evenly distribute sales links */
.left, .center, .right {
  
}
  /* attempting to evenly distribute sales links */


.salelink {
  /*max-height: 30vh;*/
  height: var(--salelink-height);
  max-height: var(--salelink-height);
  width: auto;
}

figcaption {
  /*replaced in favor of the same definitions in .order*/
  /*text-align: center;
  font-size: 2vw;*/

  color: white;

  height: var(--fig-caption-height);
  max-height: var(--fig-caption-height);
}
.left {
  /*replaced in favor of the same definitions in .order*/
  /*text-align: center;
  font-size: 4vw;*/
  height: var(--order-height);
  max-height: var(--order-height);
}

.center {
  /*replaced in favor of the same definitions in .order*/
/*  text-align: center;
  font-size: 4vw;*/
  border: none;
  word-wrap: none;
  /*font-size: auto;*/
}

.right {
  /*replaced in favor of the same definitions in .order*/
 /* text-align: center;
  font-size: 4vw;*/
  
  /*height: calc(var(--container-box-height) * .35);
  max-height: calc(var(--container-box-height) * .35);*/
  height: var(--order-height);
  max-height: var(--order-height);
}