/* tutorial: https://www.youtube.com/watch?v=wARbgs5Fmuw */
/* This allows responsive font scaling to be easily manipulated with a default set (mobile) and one Desktop scaling w/ Media query. */
:root {
   --ff-body: "Varela", sans-serif;

   /* Recommended Clamp: 
     Start at 3rem minimum.
     Grow by 6% of the screen width (6vw).
     Cap at 8rem maximum.
  */
   --fs-xl: clamp(3rem, 6vw + 1rem, 8rem);
   --fs-lg: 2.2rem;
   --fs-md: 1.55rem;
   --fs-sm: 1.4rem;
   --fs-xs: 1.0rem;
}

/* DESKTOP SCALING (Min width 40em) */
@media (min-width: 60em) {
   :root {
      /* Desktop Clamp: 
       Slightly larger minimum for desktop screens 
    */
      --fs-xl: clamp(5rem, 8vw + 1rem, 10rem);
      --fs-lg: 3.0rem;
      --fs-md: 2.0rem;
      --fs-sm: 1.4rem;
      --fs-xs: 1.2rem;
   }
}

/************************/
/* for the body/html */
html {
   font-size: 75%;
}

body {
   font-size: var(--fs-sm);
   min-height: 100vh;
   min-height: 100svh;
   width: 100%;
   background-color: #5F6F88 !important;
   overflow-x: hidden !important;

}

/************************/
/* Navigation SECTION */
.navbar-custom {
   font-family: "Varela", sans-serif;
   background-color: #5F6F88 !important;
   padding: 15px !important;
}.navbar-toggler {
   border: 0 !important;
   text-decoration: none !important;
}.dropdown-item,.dropdown-menu {
   background-color: #f8f9fa !important;
   border: 0 !important;
   margin-top: 5px;
   color: #7A7766 !important;
}.navbar i {
   color: white !important;
   font-size: var(--fs-lg);
   text-shadow: -10px 10px 15px rgb(0, 0, 0);
}.nav-link {
   font-size: var(--fs-sm) !important;
   color: #c6d3e7 !important;
   text-shadow: -10px 10px 15px rgb(0, 0, 0);
}.nav-link:hover {
   color: #ffffff !important;
}.dropdown-item:hover {
   color: #555347 !important;
}

/* 1. Removes the grey/blue overlay on tap (iOS specific) */
.navbar-nav .nav-link,
.dropdown-menu .dropdown-item {
    -webkit-tap-highlight-color: transparent !important; 
}

/* 2. Removes the border/glow focus ring (Bootstrap specific) */
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:active,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:active {
    outline: none !important;
    box-shadow: none !important;
}

/************************/
/* WELCOME SECTION */

/* Viewport height (or vh) is INCREDIBLY IMPORTANT for this welcome screen. 
It will scale this container to always be 100% of the browsers' AVAILABLE viewing, no matter the browser size. 

MIN-HEIGHT is also INCREDIBLY IMPORTANT so that the text inside this container doesn't OVERFLOW when the browser gets small.
The height will flex above 40vh when needed for browser size. 
Tutorial: https://youtu.be/_sgF8I-Q1Gs */



/* Background for welcome header */
.welcome-custom {
   /* centers my name */
   display: flex !important;
   justify-content: center !important;
   align-items: center;

   /* leaves just enough room to hint to users (hello, if you're reading this) to keep scrolling down */
   /* min-height, so on smaller screens text doesn't overflow. Static heights for this is not good practice. */
   min-height: 70vh;
   min-height: 70svh;
   background-color: #5F6F88;
}

#IntroContainer {
   padding: 25px !important;
}

/* Welcome text - my name & animation */
.andrew-custom {
   color: white;
   font-family: "Fascinate Inline", system-ui !important;
   font-size: var(--fs-xl) !important;
   text-align: center !important;
   font-weight: 600 !important;
   text-shadow: -25px -10px 55px rgb(160, 171, 189);
}

.animate-bottom {
   position: relative;
   -webkit-animation-name: animatebottom;
   -webkit-animation-duration: 3s;
   animation-name: animatebottom;
   animation-duration: s
}

@-webkit-keyframes animatebottom {
   from {
      bottom: -100px;
      opacity: 0
   }

   to {
      bottom: 0px;
      opacity: 1
   }
}

@keyframes animatebottom {
   from {
      bottom: -100px;
      opacity: 0
   }

   to {
      bottom: 0;
      opacity: 1
   }
}

/* 1. DEFAULT STATE: Visible -- A MUST for if SCRIPT.JS is not loaded server side, and keeps text from loading. We want the text to always load by default first. */
.biographyText,
.accordion-item {
   opacity: 1;
   transform: translateY(0);
   /* Keep transition here so it animates when the classes change */
   transition: opacity 2.0s ease-out, transform 0.6s ease-out;
}

/* 2. If the js script is able to run, it immediately hides it before the users knows, and applies the animations */
.js-hidden {
   opacity: 0 !important;
   /* Force hide */
   transform: translateY(100px) !important;
}

.visible {
   opacity: 1 !important;
   transform: translateY(0) !important;
}


/************************/
/* HERO IMAGE */
.hero-img {
   background-image: url(images/rodrigo-escalante-photo.jpg);
   background-size: cover;
   background-position: center bottom;
   /* Keeps the image CENTER in a static position */
   background-attachment: fixed;
   /* 100vh = 100% of the available height */
   height: 45vh;
   height: 45svh;
   border-top: 14px solid rgba(255, 255, 255, 0.466);
   border-right: 4px solid rgba(255, 255, 255, 0.466);
   border-left: 4px solid rgba(255, 255, 255, 0.466);
   background-repeat: none;
   border-top-left-radius: 16px;
   border-top-right-radius: 16px;
}

/************************/
/* Resume Section */
/* Avatar*/
.rounded-circle

/* Remember; mobile first mentality. Media query for the desktop. */
   {
   height: 145px;
   width: 145px;
   position: relative;
   top: -50px;
   background-position: center;
   background-attachment: static;
   transition: all 1s;
   border: solid 3px white;
}

@media (min-width:70em) {
   .rounded-circle {
      height: 165px;
      width: 165px;
      position: relative;
      top: -50px;
      background-position: top center;
      background-attachment: static;
      border: solid 3px white;
   }
}

/* Name + Subtext near avatar */
@media (max-width:60em) {
   .content-heading {
      text-align: center;
   }

   .footer-custom {
      background-color: #5F6F88 !important;
      color: white;
      text-align: center;
      border-top-left-radius: 0px !important;
      border-top-right-radius: 0px !important;
      padding: 16px;
   }

   .footer-custom .fa-xl {
      color: white;
   }

   .hero-img {
      background-size: cover;
      background-position: center bottom;
      background-attachment: scroll;
   }

   .andrew-custom {
      text-shadow: -5px -7px 15px rgb(160, 171, 189);
   }

   .navbar i {
      text-shadow: none !important;
      text-shadow: -7px -4px 10px rgb(70, 70, 100) !important;
   }

   .nav-link {
      color: white !important;
      text-shadow: -7px -4px 10px rgb(70, 70, 100) !important;
   }

   #firstNavLink {
      margin-top: 15px !important;
   }
}

.entire-resume-custom {
   background-color: white;
   color: #7A7766;

}

.entire-resume-custom .row {
   margin-bottom: 25px !important;
}

/* the text inside */
.resume-custom {
   margin-top: -55px;
   font-size: var(--fs-sm);
   padding: 45px;
}

.list-group-item {
   font-size: var(--fs-xs) !important;
}


/************************/
/* ACROSS MULTIPLE SCENARIOS */
#h2,
.h2-custom {
   color: #5F6F88;
}

.bold-customHeader {
   font-family: "Titan One";
}


/* All h2 headers. */
.h2-custom {
   font-family: "Titan One";
   font-size: var(--fs-md) !important;
}

/* All h3 headers. */
.h3-custom {
   font-family: "Titan One";
   font-size: var(--fs-md) !important;
}

/************************/
/* About-Me Section */
.about-me-text {
   border-radius: 12px;
   background-size: cover;
   background-position: top center;
   /* Keeps the image CENTER in a static position */
   background-attachment: fixed;
   background-repeat: none;
   background-color: #FAF3EB;
}

/* Text inside */
.about-custom {
   font-size: var(--fs-sm);
   padding: 45px;
   text-align: center !important;
}

/************************/
/* Hero Cherry1 Section */

.materialHeader {
   border-radius: 12px;
   background-color: #5F6F88;
   padding: 15px;
   font-family: "Titan One";
   font-size: var(--fs-md);
   color: white;
   border-top: 5px solid white;
   margin-bottom: 25px;
}

#firstMaterialHeader {
   margin-top: 25px;
}

.downloadContent {
   padding: 15px;
}


/************************/
/* Footer Section */
.footer-custom {
   background-color: white;
   text-align: center;
   border-top-left-radius: 16px;
   border-top-right-radius: 16px;
}

.footer-custom a {
   color: #7A7766 !important;
}

.footer-custom a:hover {
   color: black !important;
}

.btn.btn-social-icon {
   width: 50px;
   height: 50px;
   padding: 0;
}

.btn.btn-rounded {
   border-radius: 20px;
}