/* ------------------ FONTS & VARIABLES------------------ */
:root {
  --color-white: #FFFFFF;
  --color-creme: #fffffa;
  --color-black: #000000;
  --color-grey: #333333;
  --color-turqouise: #A8D1D1;
  --color-lila: #9EA1D4;
  --color-apricot: #FD8A8A;
  --font-family-futura: 'Futura', Arial, sans-serif;
  --font-size-regular: calc(.6rem + .8vw);
}

@font-face {
  font-family: 'Futura';
  src: url('/font/Futura.ttf'); /* sets the link to the Standard Font file of the websites font */
  src: url('/font/Futura.eot') format('embedded-opentype'), /* sets the link to the Embedded OpenType Font file of the websites font */
       url('/font/Futura.woff2') format('woff2'), /* sets the link to the WOFF2 Font file of the websites font */
       url('/font/Futura.woff') format('woff'), /* sets the link to the WOFF Font file of the websites font */
       url('/font/Futura.ttf')  format('truetype'), /* sets the link to the TrueType Font file of the websites font */
}

/* ---------------------- GLOBAL STYLES ---------------------- */

html, body {
  background-color: var(--color-creme);
  font-family: var(--font-family-futura);
  font-size: var(--font-size-regular);
  margin: 0;
  padding: 0;
}

h2 img {
  height: calc(20px + 5vw);
}

h3 img {
  height: calc(20px + 5vw);
}

section a {
  color: var(--color-apricot);
}

a:hover {
  color: var(--color-lila);
  text-decoration: overline;
}

section {
  border: 3px var(--color-apricot) dotted;
  border-radius: .5%;
  margin: 30px;
  padding: 30px;
}

header {
  height: 16vw;
  margin: 0;
  padding: 2vw;
}

.header-line {
  border: .5vw var(--color-apricot) solid;
}

.navbar {
  margin: 0;
  padding: 0;
}

.navbar-nav {
  margin-top: -10px;
  margin-right: 5vw;
  flex-direction: row;
}

.nav-item {
  margin: 0 10px;
}

.nav-link {
  padding: 0;
}

.nav-img {
  width: calc(10px + 4vw);
  margin: 0px;
  padding: 2px;

}

.nav-img:hover {
  border: 3px var(--color-lila) dotted;
}

#logo {
  height: 20vw;
}

video {
  border: 5px var(--color-lila) solid;
  border-radius: 5px;
  margin: 20px 0;
  width: 100%;
}

.carousel-inner {
  border: 5px var(--color-lila) solid;
  border-radius: 5px;
  margin: 20px 0;
}

address {
  margin: 5vw;
  text-align: center;
}

.social-img {
  width: 10vw;
}

.social-img:hover {
  padding: 15px;
}

.instagram {
  filter: invert(72%) sepia(100%) saturate(5500%) hue-rotate(345deg) brightness(222%) contrast(94%);
}

.facebook {
  filter: invert(98%) sepia(3%) saturate(3125%) hue-rotate(136deg) brightness(91%) contrast(78%);
}

.tiktok {
  filter: invert(75%) sepia(61%) saturate(1305%) hue-rotate(192deg) brightness(95%) contrast(74%);
}

.youtube {
  filter: invert(63%) sepia(26%) saturate(925%) hue-rotate(314deg) brightness(101%) contrast(107%);
}

footer {
  font-family: var(--font-family-futura);
  background-color: var(--color-apricot);
  color: var(--color-black);
  margin: 0;
}

#copyright img {
  width: 10vw;
}

/* ---------------------- WEBVIEW STYLES ---------------------- */
@media only screen and (min-width: 767px) {
  /* Your CSS rules for mobile devices */
}

/* ---------------------- MOBILE VIEW STYLES ---------------------- */

@media only screen and (max-width: 767px) {
  /* Your CSS rules for mobile devices */
}


/* ---------------------- MAINTENANCE STYLES ---------------------- */


/* html {background-color: black;}
body {background-color: white;}
h2 img {background-color: gold;}
h3 img {background-color: cadetblue}
a {background-color: aqua}
a:hover {background-color: hotpink;}
section {background-color: tan}
header {background-color: firebrick}
.header-line {background-color: chocolate}
.navbar {background-color: cornflowerblue;}
.navbar-nav {background-color: violet}
.nav-item {background-color: ghostwhite;}
.nav-img {background-color: teal}
.nav-img:hover {background-color: darkblue}
#logo {background-color: chartreuse}
video {background-color: royalblue}
.carousel-inner {background-color: tomato}
address {background-color: khaki}
.social-img {background-color: lawngreen}
.social-img:hover {background-color: yellow}
footer {background-color: rebeccapurple}
#copyright img {background-color: brown} */