/* CSS files add styling rules to your content */
 
/*FONTS*/

@font-face {
   font-family: 'eroded';
   src: url('Slightly Eroded.ttf');
}

 @font-face {
   font-family: 'type';
   src: url('Oceanside Typewriter.ttf');
   }


@font-face {
   font-family: 'monoital';
   src: url('lmmonoslant10-regular.otf') format("opentype");
}

@font-face{
  font-family: 'monoreg';
  src: url('lmmonoproplt10-regular.otf') format("opentype");
}

@font-face{
  font-family: 'monobold';
  src: url('lmmonoproplt10-bold.otf') format("opentype");
}

@font-face{
  font-family: 'monoboldob';
  src: url('lmmonoproplt10-boldoblique.otf') format("opentype");
}

html{
  height: 100vh;
}

body {
  background-color:#f4e8e0;
  margin: auto;
  max-width: 100vw;
  border: 3vw solid #f47460;
}

/* LOGO *******************************/
img.logo{
  width: 80vw;
}
/* HEADER AND TEXT STYLING ***********************/
h1, h2, h4, h5{
  font-family: 'eroded';
  color: #322724;
  line-height: 1.5em;
}
h3{
  font-family: monoboldob;
  font-weight: bold;
  color: #322724;
  font-size: x-large;

}
p{
  font-family: monoreg;

}

/* basic link styling **********************/
a{
  font-family: monobold;
  color: #ba3f2c;
  text-decoration: none;
}
a:hover{
  color: #f47460;
}

/* image with caption styling **************/
.withcaption{
  text-align: center;
  width: 100%;
}
.withcaption p{
  font-family: monoital;
  font-weight: initial;
  font-size: smaller;
  color: #322724;
  text-align: center;
  text-indent: 1em;
  margin: 0;
}
  
/* header styling *********************/
header{
  text-align: center;
  margin-bottom: 1em;
  margin-top: 2em;
}

/*section styling*/
section{
  text-align: center;
  background-color: #f0d7c5;
  margin: 1.5em .5em .5em .5em;
  padding: .75em;
}
section button{
  display: inline-block;
}
section p{
  color: #322724;
  text-align: left;
  text-indent: 1em;
}

/*tour section styling*/
section .tours button{
  display: inline-block;
  margin: 0 2em;
}
section .tours p{
  color: #322724;
  text-align: left;
  text-indent: 1em;
}
section.press ul{
  font-size: large;
  display: block;
  text-align: left;
}


/* image styling **********************/
img{
  width: 100%;
  padding:2% 2% 0 2%;
  display: block;
  margin: auto;
}

/*  form styling **********************/
iframe{
  min-width: 10em;
  width: 100%;

}
/* button styling *********************/
button{
  padding: 1em 3em;
  
  margin: 3em 2em 1em 2em;
  border: none;
  background-color: #efaba7;
  color: #322724;
  font-weight: bolder;
  box-shadow: -6px 12px #f47460;
}
button:hover{
  background-color: #efaba7;
  color: #322724;
  cursor: help;
  transform: translateY(8px);
  box-shadow: -6px 8px #f47460;
}

/* nav buttons styling *******************/

.nav{
  text-align: center;
}

/* site signature ***********************/
.signature p{
  margin-top: 2em;
  text-align: left;
}


/* desktop styling addendum *****************/
@media screen and (min-width: 620px) {
  img{
    width: 50%;
  }
  img.logo{
  width: 40vw;
}
section{
  margin: 2em 10em;
  padding: 2em 5em 5em 5em;
}
section.gaythings img{
 display: inline-block;
 width: 75%;
 max-height: 60%;
}

}