/* 
Coral RGB(255,144,141) #ff908d
Yellow RGB(253,188,105) #fdbd69
Green RGB(163,194,89) #a3c259
Blue Green RGB(19,191,207) #13bfcf
Light Blue RGB(171,201,247) #abc9f7
Blue RGB(93,190,227) #5dbde3
Purple RGB(208,141,255) #cf8dff
Pink RGB(255,144,194) #ff90c2
*/

/* FONTS */

@font-face {
  font-family: Open_Sans;
  src: url("../fonts/Open_Sans/OpenSans-Regular.ttf");
  font-display: swap;
}

@font-face {
  font-family: Pangolin;
  src: url("../fonts/Pangolin/Pangolin-Regular.ttf");
  font-display: swap;
}

@font-face {
  font-family: Satisfy;
  src: url("../fonts/Satisfy/Satisfy-Regular.ttf");
  font-display: swap;
}

/* VARIABLES */

:root {
  --font-family-headers: Pangolin, sans-serif;
  --font-family-body: Open_Sans, sans-serif;
  --font-family-quote: Satisfy, cursive;
  --max-width-body: 1170px;
  --color-blue: #5dbde3;
  --color-pink: #ff90c2;
  --color-green: #a3c259;
  --color-purple: #cf8dff;
  --color-coral: #ff908d;
  --color-blue-green: #13bfcf;
  --color-yellow: #fdbd69;
}

/* Generic styling */
* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-family-body);
  font-size: 18px;
  margin: 0;
}

/* Variable font sizes based on width of viewing window (vw) */
h1 {font-size: calc(40px + 3vw);}
h2 {font-size: calc(30px + 2vw);}
h3 {font-size: calc(20px + 1vw);}

/* Prevents the font sizes from continuing to grow for very large screens */
@media only screen and (min-width: 1200px) {
  h1 {font-size: 80px;}
  h2 {font-size: 55px;}
  h3 {font-size: 30px;}
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-family-headers);
}

.hidden {
  display: none;
}

.full-size {
  width: 100%;
  height: 100%;
}

/* Button Styling */
.button {
  padding: 10px 15px;
  font-size: 20px;
  background: transparent;
  transition: ease-out 0.4s;
  text-decoration: none;
  display: inline-block;
  font-family: var(--font-family-body);
}

.button:focus {
  outline: none;
}

button a {
  text-decoration: none;
  color: inherit;
}

.button-dark-bg {
  border: solid 2px white;
  color: white;
  box-shadow: inset 0 0 0 0 white;
}

.button-light-bg {
  border: solid 2px black;
  color: black;
  box-shadow: inset 0 0 0 0 black;
}

.button-pdf {
  padding: 5px;
  margin: 10px;
  border-bottom: solid 2px black;
  color: black;
  box-shadow: inset 0 0 0 0 black;
}

.button-dark-bg:hover {
  box-shadow: inset 275px 0 0 0 white;
  color: black;
  cursor: pointer;
}

.button-light-bg:hover {
  box-shadow: inset 275px 0 0 0 black;
  color: white;
  cursor: pointer;
}

.button-pdf:hover {
  box-shadow: inset 0 -44px 0 0 black;
  color: white;
  cursor: pointer;
}

/* section and section full styling */
.section {
  max-width: var(--max-width-body);
  margin: 50px auto;
  box-shadow: 10px 10px 25px black;
  padding: 20px;
}

.section-full {
  padding: 20px;
}

/* Styling for content/photo split blocks */
.section-split-photo-content {
  display: flex;
  padding: 0;
  align-items: center;
}

.section-split-photo {
  flex: 0 0 400px;
  align-self: stretch;
}

.section-split-photo img {
  object-fit: cover;
  width: 400px;
  height: 100%;
  display: block;
}

.section-split-content {
  flex: 1;
  padding: 20px;
}

@media only screen and (max-width: 999px) {
  .section-split-photo { flex: 0 300px; }
  .section-split-photo img { width: 300px; }
}
  
@media only screen and (max-width: 699px) {
  .section-split-photo-content {flex-direction: column;}
  .section-split-photo img {
    height: 300px;
    width: 100%;
  }
}

/* Text underline styling */
.text-emphasis {
  background: url("/img/Shapes/White_Underline_30opacity.png") center center repeat-x;
}

/* Background colors */
.pink { background: var(--color-pink); }
.blue { background: var(--color-blue); }
.yellow { background: var(--color-yellow); }
.coral { background: var(--color-coral); }
.purple { background: var(--color-purple); }
.blue-green { background: var(--color-blue-green); }
.green { background: var(--color-green); }

/* page containers (one for home and one for all the other pages) */
.home-container {
  font-size: 20px;
}

.page-container {
  text-align: center;
  font-size: 20px;
  padding: 40px 0;
}

/* FOOTER */
footer {
  text-align: center;
  color: black;
  padding: 10px;
}

.footer-content-container {
  display: flex;
  flex-flow: row wrap;
  padding: 20px;
  align-items: center;
  justify-content: center;
}

.footer-content-container div {
  flex: 1 250px;
}

footer a {
  color: black;
  text-decoration: none;
}

footer a:hover {
  font-weight: 600;
  text-decoration: underline;
}

footer iframe {
  width: 100%;
  max-width: 300px;
  padding: 10px;
}

#facebook-link img {
  height: 20px;
}


/* Fixes issues after floating an object */
/* Used in navbar */
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}