/*
         ) (                    )   (   (             )     )         )        (    (     
   (  ( /( )\ )          (   ( /(   )\ ))\ )  (    ( /(  ( /(      ( /(  (     )\ ) )\ )  
   )\ )\()|()/(  (     ( )\  )\()) (()/(()/(  )\   )\()) )\())     )\()) )\   (()/((()/(  
 (((_|(_)\ /(_)) )\    )((_)((_)\   /(_))(_)|((_)|((_)\ ((_)\ ___ ((_)((((_)(  /(_))/(_)) 
 )\___ ((_|_))_ ((_)  ((_)___ ((_) (_))(_)) )\___|_ ((_)_ ((_)___|_ ((_)\ _ )\(_)) (_))   
((/ __/ _ \|   \| __|  | _ ) \ / / | _ \_ _((/ __| |/ /\ \ / /   \ \ / (_)_\(_) _ \/ __|  
 | (_| (_) | |) | _|   | _ \\ V /  |   /| | | (__  ' <  \ V /     \ V / / _ \ |  _/\__ \  
  \___\___/|___/|___|  |___/ |_|   |_|_\___| \___|_|\_\  |_|       |_| /_/ \_\|_|  |___/       
  @ricky-yaps on tumblr
*/

:root {
  --red: #c13d31; /* h1 "color", a:hover "color" */
  --white: #f6efef; /* main "background-color", h1 "-webkit-text-stroke", #directory a "color, border" */
  --darkblue: #4c5d8b; /* directory a "background-color", h2 "text-shadow", footer "border-top" */
  --lightblue: #adbacc; /* h2, directory a:hover "color, border" */
  --rust: #ab6144; /* h3 "color", a "color" */
}

/* SECTIONING */
body {
  background-image: url(gingham.jpg);
  background-repeat: repeat;
  background-size: 20%; /* You can adjust this to change the size of the gingham */
  overflow: hidden;
}

main {
  background-color: var(--white);
  width: 50vw;
  height: 65vh;
  overflow-y: auto;
  margin: auto;
  padding: 2em;
  padding-top: 0;
  border-top: 1.75em solid var(--white);
  box-shadow: 0px 2px 0.5vw #222;
}

#directory {
  width: inherit;
  margin: inherit;
  text-align: center;
  margin-bottom: 1em;
  margin-left: 3em;
}

#directory > * {
  margin: 0 1vw; /* This ads a gap between each button in the directory */
}

footer {
  background-color: inherit;
  margin-top: 5em;
  display: block;
  border-top: 3px double var(--darkblue);
  z-index: 2;
}

/* TEXT */

* {
  font-family: Georgia, serif;
}

h1 {
 font-family: "Sonsie One", "Brush Script MT", cursive; /* Sonsie is not a websafe font! It may not appear if you don't have it linked in your html. */
 font-weight: 700;
 font-size: 2.5em;
 text-align: center;
 width: 50vw;
 margin-left: auto;
 margin-right: auto;
 color: var(--red);
 text-shadow: 5px 2px 0px black;
 -webkit-text-stroke: 0.5px var(--white);
}

h2 {
  font-family: "Sonsie One", "Brush Script MT", cursive;
  text-shadow: 2px 2px 0px var(--darkblue);
  color: var(--lightblue);
}

h3 {
  font-weight: bold;
  text-transform: capitalize;
  font-style: italic;
  color: var(--rust);
}

blockquote::before {
  content:  url(kiss.png);
  font-size:20px;
  vertical-align: middle;
  z-index: 0;
}

blockquote {
  font-style: italic;
}

a {
  transform: all 0.2s linear;
  color: var(--rust);
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  color: var(--red);
}

#directory a { /* I don't actually like using the button element, so this is just an anchor element styled as a pseudo-button instead */
  transition: all 0.2s linear;
  color: var(--white);
  text-decoration: none;
  background-color: var(--darkblue);
  border: 3px double var(--white);
  padding: 1vh 1.5vw;
  text-transform: uppercase;
  border-radius: 5px;
}

#directory a:hover {
  color: var(--lightblue);
  border: 3px double var(--lightblue);
}

/* IMAGES */

img.deco { /* You could turn this into a link easily by adding an href attribute to its html! */
  position: absolute;
  height: 15%;
  bottom: 75vh;
  filter: drop-shadow(0px 2px 0.25vw #222);
}

.gallery {
  width: 75%;
  height: 100%;
  display: grid;
  grid-template-columns: auto auto; /* The grid is set to 2x2 by default. You'll gave to edit the grid-template properties to add any more photos */
  grid-template-rows: auto auto;
  gap: 5px;
  padding-right: 3em;
  margin: auto;
}

.gallery img {
  transition: 0.2s linear;
  width: 20vw;
  height: 33vh;
  object-fit: cover;
  filter: sepia(75%);
}

.gallery img:hover {
  filter: sepia(0);
}


/* MOBILE OPTIMIZATION */

@media screen and (min-width:640px) {
  #directory.mobile {
    display:none;
  }
}

@media screen and (max-width:640px) {
  main {
    height: 55vh;
    width: 80vw;
  }
  
  #directory.pc {
    display: none;
  }
  
  #directory.mobile {
    margin-top: 3vh;
    text-align: center;
    margin-left: unset;
    line-height: 3em;
  }
  
  h1 {
    font-size: 2.25em;
  }
}