/* vendor stylesheets */
@import url(../vendor/normalize.css);

/* font stylesheets */
@import url(../fonts/fonts.css);

/* block stylesheets */
@import url(../blocks/page/page.css);
@import url(../blocks/header/header.css);
@import url(../blocks/intro/intro.css);
@import url(../blocks/logo/logo.css);
@import url(../blocks/main/main.css);
@import url(../blocks/about/about.css);
@import url(../blocks/current/current.css);
@import url(../blocks/footer/footer.css);
@import url(../blocks/transparency/transparency.css);
@import url(../blocks/grow/grow.css);
@import url(../blocks/contact/contact.css);
@import url(../blocks/experience/experience.css);
@import url(../blocks/attention/attention.css);
@import url(../blocks/projects/projects.css);
@import url(../blocks/media/media.css);

/* modifiers */
@import url(../blocks/page/_theme/page_theme_dark.css);
@import url(../blocks/page/_theme/page_theme_light.css);

/* Utility Classes */
.hide {
  display: none;
}
.bold {
  font-weight: bold;
}

/* A utility class that animates in elements when they enter the viewport */
.fade-in {
  opacity: 0;
  transform: scale(0.95);
  filter: blur(4px);
  transition: all 1s ease;
}

.fade-in_visible {
  opacity: 1;
  transform: scale(1);
  filter: blur(0px);
}

@media (prefers-reduced-motion) {
  .fade-in_visible {
    transition: none;
  }
}

/* A utility class that adds a rainbow gradient around a button element */
.highlight {
  position: relative;
  border-radius: 50px;
  z-index: 2;
  background-clip: padding-box;
  border: solid 2px transparent;
  background-clip: padding-box;
  /* border: solid 5px transparent; */
  transition: all 0.1s ease;
  background-color: inherit;
}

.highlight_sticky {
  position: sticky;
}

.highlight_primary::before {
  background-color: var(--primary-bg);
}
.highlight_secondary::before {
  background-color: var(--secondary-bg);
}
.highlight_tertiary::before {
  background-color: var(--tertiary-bg);
}

.highlight::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  border-radius: inherit;
  width: 100%;
  height: 100%;
}

.highlight::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2px;
  margin: -2px;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  z-index: -2;
  background: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8f00ff);
}

.highlight:hover {
  transform: scale(1.05);
}

/* Color variables  */

/* Now that the page theme is set with CSS variables, redesign will be far easier
in the future if colors need to be changes. Furthermore, now I'll be able to set
colors using Javascript, targeting only the root styles, rather than targeting
countless individual items. IF A DARK MODE IS TO BE SET WITH JAVASCRIPT SVGs will
need to be placed inline, or duplicated with alternate fill values, which would
require that the sources for each img will be changed at the same time... not
so bad.  */

/* * {
  border: 1px solid antiquewhite;
} */

/* @media (max-width: 1279px) {

}



@media (max-width: 1023px) {

}



@media (max-width: 675px) {

} */

/* Debugging breakpoints */

/* @media (min-width: 1280px) {

}

@media (min-width: 1024px) {

}

@media (min-width: 760px) {

}

@media (min-width: 375px) {

} */

/* Costa Del Sol
#646033

Akaroa
#D4BAA4

Polo Blue
#829CC6

Olive Green
#B1B463

Coffee light to dark:
E9CEB0
FFEFDD
E9CEB0
C6A27B
A57D4F

https://coolors.co/495619-a73c36-3f3d4b-f1d9cc-bfd8ed
*/