@charset "UTF-8";
/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */
/* nn.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */
/* ==========================================================================
Base styles: opinionated defaults
============================================================================= */
html {
  color: #222;
  font-size: 18px;
  line-height: 1.4;
  height: 100%;
  scroll: smooth;
}

/*
* Remove text-shadow in selection highlight:
* https://twitter.com/miketaylr/status/12228805301
*
* Vendor-prefixed and regular ::selection selectors cannot be combined:
* https://stackoverflow.com/a/16982510/7133471
*
* Customize the background color to match your design.
*/
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */
textarea {
  resize: vertical;
}

/* ==========================================================================
Bootstrap Overrides
============================================================================= */
.vh-75 {
  height: 75vh !important;
}

/* ==========================================================================
Sydney's custom styles
============================================================================= */
/* 6666666666666666666 Typography 6666666666666666666 */
/* ~~~~~~~~~~~~~~~~~~~~~ Variables ~~~~~~~~~~~~~~~~~~~~~ */
/* Dear future Sydney. Remember to refer to https://sass-lang.com/guide if you ever get confused. Sincerely, past Sydney. */
/* <3<3<3<3<3<3<3<3<3<3 Keyframes <3<3<3<3<3<3<3<3<3*/
@keyframes floating {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 10px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes floating-glow {
  0% {
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  }
  50% {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.6);
  }
  100% {
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  }
}
@keyframes buzz {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(0, 2px);
  }
  50% {
    transform: translate(0, 0);
  }
  75% {
    transform: translate(0, -2px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes img-scroll {
  0% {
    object-position: top;
  }
  40% {
    object-position: bottom;
  }
  60% {
    object-position: bottom;
  }
  100% {
    object-position: top;
  }
}
/* ∞8∞8∞8∞8∞8∞8∞8∞8∞8∞8 Mixins ∞8∞8∞8∞8∞8∞8∞8∞8∞8∞8 */
/* !¡!¡!¡!¡!¡!¡!¡!¡!¡!¡!¡ Global Styles & Classes !¡!¡!¡!¡!¡!¡!¡!¡!¡!¡!¡ */
.btn {
  border-radius: 2px !important;
  border: none !important;
  box-shadow: -8px 7px 0 0 #383339;
}

body {
  background-color: #383339;
  height: 100%;
  position: relative;
  /* .•º˙˚˙º•.•º˙˚˙º•. typography .•º˙˚˙º•.•º˙˚˙º•. */
  /*-*/
  /*-*/
}
body a, body address, body article, body blockquote, body button, body caption, body cite, body details, body dfn, body form, body input, body label, body li, body link, body mark, body ol, body p, body q, body small, body source, body sub, body summary, body sup, body textarea, body ul {
  font-family: "Roboto Flex", Arial, sans-serif;
  font-size: 1rem;
  color: #383339;
}
body h1 {
  font-family: "Teko", "Futura Bold", Helvetica, sans-serif;
}
body h2, body h3, body h4, body h5, body h6 {
  font-family: "Teko", "Futura Bold", Helvetica, sans-serif;
  color: #e23b1a;
}
body h1 {
  font-size: 9vw !important;
}
body #about h2 {
  font-size: clamp(50px, 9vw, 160px) !important;
}
body #contact h2 {
  font-size: clamp(50px, 5.5vw, 98px) !important;
}
body #experience h2 {
  font-size: clamp(45px, 10vw, 200px) !important;
}
body #projects h3 {
  font-size: clamp(48px, 5vw, 125px) !important;
}
body #contact h4, body footer h4 {
  font-size: clamp(40px, 3vw, 65px) !important;
}
body nav {
  position: fixed !important;
  width: 100vw;
}
body nav #navbar {
  justify-content: flex-end;
}
body nav #navbar ul > li {
  padding: 0 1rem;
}
body nav a:link {
  text-decoration: none;
}
body nav a:hover {
  color: #e23b1a !important;
}
body nav .btn {
  background: #e23b1a !important;
  border: none !important;
}
body nav .btn:hover {
  color: white !important;
  box-shadow: none;
}
body #top {
  height: 90vh;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  position: relative;
}
body #top img {
  width: 100vw;
  height: auto;
  position: absolute;
  z-index: 1;
  min-height: 80vh;
}
body #top div {
  position: relative;
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 90vw !important;
  margin-top: 70px;
  height: 100%;
}
body #top div h1 {
  transform: translate(0, -50%);
  color: white;
  text-align: left;
  max-height: 40vh;
}
body main {
  margin: 0;
  width: 100%;
  /*-*/
}
body main section {
  width: 100%;
  transform-style: inherit;
  overflow-x: clip;
}
body main section#about {
  position: relative;
  z-index: 1;
  background: #ffffff;
  box-shadow: 0 0 18px 1px rgba(0, 0, 0, 0.6);
}
body main section#about div h2 {
  line-height: 80%;
  text-transform: uppercase;
}
body main section#about div .p-col {
  -webkit-columns: 2 200px;
  -moz-columns: 2 200px;
  columns: 2 200px;
}
body main section#about div .p-col .job {
  color: #e23b1a;
  font-weight: bolder;
}
body main section#projects {
  position: static;
  scroll-snap-type: mandatory;
  scroll-snap-points-y: repeat(300px);
  scroll-snap-type: y mandatory;
  text-align: justify;
}
body main section#projects .scroll-float {
  animation: floating 2.5s ease-in-out infinite;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}
body main section#projects .scroll-float .bi-chevron-double-down {
  animation: floating-glow 2.5s ease-in-out infinite;
  color: white;
  font-size: 2rem;
}
body main section#projects .sticky-wrapper {
  scroll-snap-align: start;
  min-height: 120vh;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body main section#projects .sticky-wrapper#hh-1 {
  background-color: #9FBDB0;
  color: #383339;
}
body main section#projects .sticky-wrapper#hh-2 {
  background-color: #283F3B;
  color: #383339;
}
body main section#projects .sticky-wrapper#hh-2 .half-half > .hh-text > h3, body main section#projects .sticky-wrapper#hh-2 .half-half > .hh-text > p {
  color: white;
}
body main section#projects .sticky-wrapper#hh-3 {
  background-color: #EAD465;
  color: #383339;
}
body main section#projects .sticky-wrapper#hh-4 {
  background-color: #383339;
}
body main section#projects .sticky-wrapper#hh-4 .half-half > .hh-text > h3, body main section#projects .sticky-wrapper#hh-4 .half-half > .hh-text > p {
  color: white;
}
body main section#projects .sticky-wrapper#hh-5 {
  background-color: #D4ADA3;
  color: #383339;
}
body main section#projects .sticky-wrapper .half-half {
  width: 100vw;
  min-height: 100vh;
  position: sticky;
  top: 0;
  padding: 10vh 0;
  box-sizing: border-box;
}
body main section#projects .sticky-wrapper .half-half div {
  flex: 1 1 0px;
  padding: 0 4rem;
  width: 100%;
}
body main section#projects .sticky-wrapper .half-half .hh-img > a > .blink {
  display: block;
  overflow: hidden;
  box-shadow: 0 12px 20px 2px rgba(0, 0, 0, 0.4);
  object-fit: cover;
  object-position: top;
  height: 50vh;
  width: 100%;
}
body main section#projects .sticky-wrapper .half-half .hh-img > a > .blink a {
  border: none;
  text-decoration: none;
}
body main section#projects .sticky-wrapper .half-half .blink {
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0);
  outline: 1px solid;
  outline-color: rgba(255, 255, 255, 0.5);
  outline-offset: 0px;
  text-shadow: none;
  transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
}
body main section#projects .sticky-wrapper .half-half .blink:hover {
  border: 1px solid transparent;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.2);
  outline-color: rgba(255, 255, 255, 0);
  outline-offset: 15px;
  animation: img-scroll 12s ease-in-out 1;
}
body main section#experience {
  background-color: #e23b1a;
  padding: 5rem 2rem;
}
body main section#experience .spacer {
  height: 4rem;
}
body main section#experience .container-fluid {
  flex-direction: row;
}
body main section#experience .container-fluid .exp-col {
  width: 50%;
  flex-basis: 50%;
  gap: 2rem;
}
body main section#experience .container-fluid .exp-col.exp-text {
  margin-right: 2.5rem;
}
body main section#experience .container-fluid .exp-col.exp-text h2 {
  color: white;
  line-height: 80%;
  text-transform: uppercase;
  text-align: left;
}
body main section#experience .container-fluid .exp-col.exp-text p {
  color: white;
  font-size: 2vw;
}
body main section#experience .container-fluid .exp-col.exp-text .slide-button {
  padding-left: 4rem !important;
  padding-right: 4rem !important;
  background-color: white;
}
body main section#experience .container-fluid .exp-col.exp-text .slide-button .main-button, body main section#experience .container-fluid .exp-col.exp-text .slide-button .hidden-button {
  color: #e23b1a;
}
body main section#experience .container-fluid .exp-col.exp-text .slide-button .hidden-button {
  color: white;
}
body main section#experience .container-fluid .exp-col.exp-img {
  margin: 0 auto;
  display: block;
  width: auto;
  padding: 1px;
}
body main section#experience .container-fluid .exp-col.exp-img button {
  margin: 0 auto;
  display: block;
  border: none !important;
}
body main section#experience .container-fluid .exp-col.exp-img button img {
  height: auto;
  max-height: 70vh;
  width: auto;
  max-width: 90vw;
  box-shadow: -2rem 2rem 0 0 maroon;
}
body main section#experience .btn-close::selection {
  border: none !important;
}
body main section#contact {
  background-color: #ffffff;
  min-height: 50vh;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: stretch;
  align-items: center;
  flex-direction: row;
}
body main section#contact .con-col {
  width: 50%;
  flex-basis: 50%;
  gap: 2rem;
  padding: 3rem;
}
body main section#contact .con-col h2 {
  line-height: 80%;
}
body main section#contact .con-info .info-box {
  background-color: #e23b1a;
  height: 100%;
  width: 100%;
  padding: 3rem;
  color: white;
}
body main section#contact .con-info .info-box ul > li, body main section#contact .con-info .info-box a, body main section#contact .con-info .info-box h4 {
  color: white;
  list-style-type: none;
}
body main section#contact .con-info .info-box ul {
  padding-left: 0 !important;
}
body main section#contact .con-info .info-box ul > li:hover {
  text-decoration: underline;
  animation: buzz 0.2s linear infinite;
}
body main section#contact .con-info a {
  font-size: 2vw;
  text-decoration: none;
  transition: all 5s ease;
}
body main section#contact .con-info a i {
  padding-right: 1rem;
}

.slide-button {
  position: relative;
  overflow: hidden;
  transition: all 0.4s;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  border: none !important;
  box-shadow: none !important;
}
.slide-button .main-button,
.slide-button .hidden-button {
  display: inline-block;
  transition: all 0.4s;
}
.slide-button .main-button {
  min-width: 120px;
}
.slide-button .hidden-button {
  position: absolute;
  left: -8rem;
  background: #383339;
  padding: 0.5rem;
}
.slide-button:hover .main-button {
  transform: translate(1rem, 0);
}
.slide-button:hover .hidden-button {
  left: 0;
}
.slide-button:active {
  border: none !important;
  text-decoration: none !important;
}

/*-*/
footer {
  background-color: #383339;
  box-shadow: inset 0 1rem 3rem rgba(0, 0, 0, 0.3);
}
footer .row p, footer .row ul, footer .row li, footer .row a {
  font-size: 1.5vw;
  color: white;
  text-decoration: none;
}
footer .row ul {
  list-style-type: none;
  padding-left: 0;
}
footer .row ul li {
  box-sizing: border-box;
  display: block;
  margin: 1rem 0;
  padding: 1px;
}
footer .row ul li a {
  border-radius: 2px;
  padding: 0.5rem 1rem;
  box-shadow: inset 0 0 0 0 #e23b1a;
  -webkit-transition: ease-out 0.4s;
  -moz-transition: ease-out 0.4s;
  transition: ease-out 0.4s;
}
footer .row ul li a:hover {
  box-shadow: inset 400px 0 0 0 white;
  color: #e23b1a;
}
footer .slide-button {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
  background-color: #e23b1a !important;
}
footer .slide-button .hidden-button {
  background-color: white;
  color: #e23b1a;
}
footer .slide-button .main-button {
  color: white;
}

.large-accord {
  display: block;
}

.sm-accord {
  display: none;
}

#accordionExample {
  display: flex;
}

@media (max-width: 767px) {
  .large-accord {
    display: none !important;
  }

  .sm-accord {
    display: inline-block !important;
  }

  #accordionExample {
    display: block;
  }
}
/* ==========================================================================
Helper classes
============================================================================= */
/*
 * Hide visually and from screen readers
 */
.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */
.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .sr-only class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */
.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */
.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `::before` to contain the top-margins of child elements.
 */
.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}

.clearfix::after {
  clear: both;
}

*,
*::before,
*::after,
:root {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
============================================================================= */
/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
  */
@media only screen and (min-width: 1400px) {
  /* CSS */
  p, li > a {
    font-size: 1.5vw !important;
  }

  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1440px !important;
  }

  #top {
    height: 80vh !important;
  }

  .half-half {
    flex-direction: row;
    justify-content: center;
    background: rgb(255, 255, 255);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3) 50%);
  }
  .half-half div {
    padding: 0 4rem !important;
  }
  .half-half .hh-text {
    text-align: justify !important;
  }

  #experience .spacer {
    display: none !important;
  }
  #experience .container-fluid {
    flex-wrap: wrap !important;
  }
  #experience .container-fluid .exp-text {
    flex-basis: 50% !important;
    margin: 0 auto !important;
    width: 100% !important;
  }
  #experience .container-fluid .exp-text p {
    font-size: 2vw !important;
    margin-right: 2rem;
  }

  #contact {
    flex-direction: row !important;
    gap: 3rem !important;
  }
  #contact .con-col {
    width: 50% !important;
    flex-basis: 50% !important;
    padding: 3rem;
  }
}
/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
  */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  /* CSS */
  p, li > a {
    font-size: 1.5vw !important;
  }

  #top {
    height: 80vh !important;
  }

  .half-half {
    flex-direction: row;
    justify-content: center;
    background: rgb(255, 255, 255);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3) 50%);
  }
  .half-half div {
    padding: 0 4rem !important;
  }
  .half-half .hh-text {
    text-align: justify !important;
  }

  #experience .spacer {
    display: none !important;
  }
  #experience .container-fluid {
    flex-wrap: wrap !important;
  }
  #experience .container-fluid .exp-text {
    flex-basis: 50% !important;
    margin: 0 auto !important;
    width: 100% !important;
  }
  #experience .container-fluid .exp-text p {
    font-size: 2vw !important;
    margin-right: 2rem !important;
  }

  #contact {
    flex-direction: row !important;
    gap: 3rem !important;
  }
  #contact .con-col {
    width: 50% !important;
    flex-basis: 50% !important;
    padding: 3rem;
  }
}
/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
  */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  /* CSS */
  p, li > a {
    font-size: 1.5vw !important;
  }

  #top {
    height: 80vh !important;
  }

  .half-half {
    flex-direction: row;
    justify-content: center;
    background: rgb(255, 255, 255);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3) 50%);
  }
  .half-half div {
    padding: 0 4rem !important;
  }
  .half-half .hh-text {
    text-align: justify !important;
  }

  #experience .spacer {
    display: none !important;
  }
  #experience .container-fluid {
    flex-wrap: wrap !important;
  }
  #experience .container-fluid .exp-text {
    flex-basis: 50% !important;
    margin: 0 auto !important;
    width: 100% !important;
  }
  #experience .container-fluid .exp-text p {
    font-size: 2vw !important;
    margin-right: 2rem !important;
  }

  #contact {
    flex-direction: row !important;
    gap: 3rem !important;
  }
  #contact .con-col {
    width: 50% !important;
    flex-basis: 50% !important;
    padding: 3rem !important;
  }
}
/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
  */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  /* CSS */
  p, li > a {
    font-size: 18px !important;
  }

  #top {
    height: 60vh !important;
  }
  #top img {
    min-height: 60vh !important;
  }

  .half-half {
    flex-direction: column !important;
    justify-content: center;
    background: rgb(255, 255, 255);
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  }
  .half-half div {
    padding: 0 1rem 1rem 1rem !important;
    flex: 1 1 0px;
    height: 50%;
  }
  .half-half .hh-text {
    text-align: left !important;
  }

  #experience .spacer {
    display: none !important;
  }
  #experience .container-fluid {
    flex-wrap: wrap !important;
  }
  #experience .container-fluid .exp-text {
    flex-basis: 100% !important;
    margin: 0 auto !important;
    width: 100% !important;
  }
  #experience .container-fluid .exp-text p {
    font-size: 18px !important;
    margin-right: 2rem !important;
  }

  #contact {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  #contact .con-col {
    width: 100% !important;
    flex-basis: 100% !important;
    padding: 0.5rem 3rem !important;
  }
}
/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
  */
@media only screen and (min-width: 576px) and (max-width: 767px) {
  /* CSS */
  p, li > a {
    font-size: 18px !important;
  }

  #top {
    height: 40vh !important;
  }
  #top img {
    min-height: 40vh !important;
  }
  #top .container {
    padding-right: 0 !important;
    padding-left: 0 !important;
    box-sizing: content-box !important;
  }
  #top .container h1 {
    margin-top: 10vh !important;
  }

  .half-half {
    height: 100%;
    flex-direction: column !important;
    align-items: center;
    background: rgb(255, 255, 255);
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 100%) !important;
  }
  .half-half div {
    flex: 1 1 0px;
    height: 50%;
    padding: 0 1rem 1rem 1rem !important;
  }
  .half-half .hh-text {
    text-align: left !important;
  }

  #experience .spacer {
    display: none !important;
  }
  #experience .container-fluid {
    flex-wrap: wrap !important;
  }
  #experience .container-fluid .exp-text {
    flex-basis: 100% !important;
    margin: 0 auto !important;
    width: 100% !important;
  }
  #experience .container-fluid .exp-text p {
    font-size: 18px !important;
    margin-right: 0 !important;
  }
  #experience .container-fluid .exp-img img {
    width: 80vw !important;
    height: auto !important;
  }

  #contact {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  #contact .con-col {
    width: 100% !important;
    flex-basis: 100% !important;
    padding: 0.5rem 3rem !important;
  }
}
/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
  */
@media only screen and (max-width: 575px) {
  /* CSS */
  p, li > a {
    font-size: 18px !important;
  }

  #top {
    height: 30vh !important;
    background-image: url("../img/hero-wide.jpg");
    background-position: center;
    background-size: cover;
  }
  #top img {
    display: none;
  }
  #top .container {
    background: transparent !important;
  }
  #top h1 {
    margin-bottom: 10vh !important;
  }

  .half-half {
    height: 100%;
    flex-direction: column !important;
    align-items: center;
    background: rgb(255, 255, 255);
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 100%) !important;
  }
  .half-half div {
    flex: 1 1 0px;
    height: 50%;
    padding: 0 1rem 1rem 1rem !important;
  }
  .half-half .hh-text {
    text-align: left !important;
  }

  #experience .spacer {
    display: none !important;
  }
  #experience .container-fluid {
    flex-wrap: wrap !important;
  }
  #experience .container-fluid .exp-text {
    flex-basis: 100% !important;
    margin: 0 auto !important;
    width: 100% !important;
  }
  #experience .container-fluid .exp-text p {
    font-size: 18px !important;
    margin-right: 0 !important;
  }
  #experience .container-fluid .exp-img img {
    width: 80vw !important;
    height: auto !important;
  }

  #contact {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  #contact .con-col {
    width: 100% !important;
    flex-basis: 100% !important;
    padding: 1rem !important;
  }
}
@media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}
@media (prefers-reduced-motion) {
  .scroll-float {
    animation: none !important;
  }

  .bi-chevron-double-down {
    animation: none !important;
  }

  .con-info ul > li:hover {
    animation: none !important;
  }

  .blink:hover {
    animation: none !important;
  }
}
/* ==========================================================================
Print styles.
Inlined to avoid the additional HTTP request:
https://www.phpied.com/delay-loading-your-print-css/
============================================================================= */
@media print {
  *,
*::before,
*::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  /*
   * Printing Tables:
   * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
   */
  thead {
    display: table-header-group;
  }

  tr,
img {
    page-break-inside: avoid;
  }

  p,
h2,
h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
h3 {
    page-break-after: avoid;
  }
}

/*# sourceMappingURL=main.css.map */