@charset "UTF-8";

/* HTML styles */

:root{
  --border-radius: 4px;
  --nav-scroll-height: 70px;
  --tab-height: 42px;
  --tab-width: 120px;
  --easing: cubic-bezier(0.645, 0.045, 0.355,1);
  --font: "Red Hat Display", sans-serif;
  --transition: all 0.25s cubic-bezier(0.645,0,045,0.355,1);
  --hamburger-width: 30px;
  --ham-before: top 0.1s ease-in 0.25s,opacity 0.1s ease-in;
  --ham-before-active: top 0.1s ease-out,opacity 0.1s ease-out 0.12s;
  --ham-after: bottom 0.1s ease-in 0.25s,transform 0.22s cubic-bezier(0.55,0.055,0.675,0.19);
  --ham-after-active: bottom 0.1s ease-out,transform 0.22s cubic-bezier(0.215,0.61,0.355,1) 0.12s;
  --purple: #14032f; 
  --porp: #1F0A42;
  --pink: #f665b0;
  --gray: #ccc2c2;
  --lavender: #976fd7;
  --blue: #4DBAE5;
  --white: #FFFFFF;
}

body {
  margin: 0px;
  width: 100%;
  min-height: 100%;
  background-color: var(--purple);
  color: var(--gray);
  font-family: var(--font);
  font-size: 20px;
  line-height: 1.3;
  counter-reset: item;
}

html{
  scrollbar-width: thin;
  scrollbar-color: var(--pink) #14032f;
  width: 100%;
  scroll-behavior: smooth;
}

h2{
  font-weight: 600;
  color: var(--white);
  line-height: 1.1;
  margin: 0px 0px 10px;
  font-size: 36px;
}

h3{
  margin-bottom: 2px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--white);
}

/* NAV BAR */

.navbar-nav .nav-item {
  display: flex;
}

.navbar-nav .nav-item span {
  margin-right: 0.5px; 
  margin-top: 8px;
}


.un .deux .trois .quatre .cinq{
color: var(--pink);
}


.flex-row{

}


.navbar-brand{
  
}

.navbar-brand img{
 width: 50%;
 height: 50%;
}

/* unvisited link */
.nav-link:link {
  color: var(--blue);
  }
  
/* visited link */
.nav-link:visited {
color: var(--blue);
}

/* mouse over link */
.nav-link:hover {
color: var(--lavender);
}

/* selected link */
.nav-link:active {
color: var(--lavender);
}

/* resume button properties */
.resume-button{
color: var(--blue);
background-color: transparent;
border: 1px solid var(--blue);
border-radius: 4px;
padding: 0.75rem 1rem;
font-family: "Red Hat Display", sans-serif;
line-height: 1;
text-decoration: none;
transition: var(--transition);
margin-left: 15px;
font-size: 20px;
}

.resume-button:hover{
outline: none;
box-shadow: 3px 3px 0 0 var(--blue);
transform: translate(-4px, -4px);
}

.resume-button:focus-visible{
outline: none;
box-shadow: 3px 3px 0 0 var(--blue);
transform: translate(-4px, -4px);
}

/* navbar css */
.navbar{
  background-color: var(--purple);
}

.nav-link{
  margin: 0px 5px;
}
  /*counter-increment: item;
}

.nav-link:before{
  content: "0" counter(item) ".";
  margin-right: 5px;
  color: #f665b0;
  text-align: right;
}

*/

/* OffCanvas Navbar */

.offcanvas-body{
  background-color: var(--purple);
}

.offcanvas-header{
  background-color: var(--purple);
}

.offcanvas{
  color: var(--pink);
}

.offcanvas-end{
  color: var(--pink);
}


/* HERO SECTION */

.softy{
  color: var(--blue);
}

.webby{
  color: var(--lavender);
}

.wiggle{
  transition: var(--transition);
  display: block;
  position: relative;
  border-radius: var(--border-radius);
  
}

 .wiggle .img {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  mix-blend-mode: multiply;
  filter: grayscale(100%) contrast(1);
  transition: var(--transition);
  
}


.wiggle::before{
  top: 0px;
  left: 0px;
  mix-blend-mode: screen;
  border-radius: var(--border-radius);
}

.wiggle::before, .wiggle::after{
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius);
  transition: var(--transition);
}


.wiggle::after{
  border: 2px solid var(--pink);
  top: 14px;
  left: 14px;
  z-index: -1;
  border-radius: var(--border-radius);
}

.wiggle:hover::after, .wiggle:focus::after {
  transform: translate(8px, 8px);
  border-radius: var(--border-radius);
}

/* END OF WIGGLE */

.welcome{
  font-family: "Red Hat Display", sans-serif;
  font-weight: bold;
  color: #ccc2c2;
  font-size: 32px;

}

.natalie{
  font-family: "Red Hat Display", sans-serif;
  color: #f665b0;
  font-weight: bold;
  font-size: 32px;
}

.langevoort{
  font-family: "Red Hat Display", sans-serif;
  color: #f665b0;
  font-weight: bold;
  font-size: 24px;
}


/* About Me */

.wiggleLAV{
  transition: var(--transition);
  display: block;
  position: relative;
  border-radius: var(--border-radius);
}

 .wiggleLAV .img {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  mix-blend-mode: multiply;
  filter: grayscale(100%) contrast(1);
  transition: var(--transition);
}


.wiggleLAV::before{
  top: 0px;
  left: 0px;
  mix-blend-mode: screen;
  border-radius: var(--border-radius);
}

.wiggleLAV::before, .wiggleLAV::after{
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius);
  transition: var(--transition);
}


.wiggleLAV::after{
  border: 2px solid var(--pink);
  top: 14px;
  left: 14px;
  z-index: -1;
  border-radius: var(--border-radius);
}

.wiggleLAV:hover::after, .wiggleLAV:focus::after {
  transform: translate(8px, 8px);
  border-radius: var(--border-radius);
}

/* END OF WIGGLE */

.skills{
  display: grid;
  grid-template-columns: repeat(2,minmax(140px, 200px));
  gap: 0px 10px;
  padding: 0px;
  margin: 20px 0px 0px;
  overflow: hidden;
  list-style: none;
}

.leader{
  color: #ccc2c2;
  font-family: "Red Hat Display", sans-serif;
  font-size: 14px;
}

.leady{
  color: #ccc2c2;
  font-family: "Red Hat Display", sans-serif;
  font-size: 16px;
}

.lead{
  color: #ccc2c2;
  font-family: "Red Hat Display", sans-serif;
  font-size: 16px;
  padding-left: 25px;
  position: relative;
}

.lead::before {
  content: "▹";
  left: 0px;
  color: #f665b0;
  box-sizing: inherit;
  margin-bottom: 10px;
  position: absolute;
}

/* unvisited link */
.btn-link:link {
  color: var(--blue);
  text-decoration: none;
}

/* visited link */
.btn-link:visited {
color: var(--blue);
text-decoration: none;
}

/* mouse over link */
.btn-link:hover {
color: var(--lavender);
text-decoration: none;
}

/* selected link */
.btn-link:active {
color: var(--lavender);
text-decoration: none;
}

/* Numbered Headings */
.numbered-heading{
  display: flex;
  align-items: center;
  position: relative;
  margin: 10px 0px 40px;
  width: 100%;
  font-size: 32px;
  white-space: nowrap;
}

.numbered-heading::before{
  counter-increment: section 1;
  content: "0" counter(section) ".";
  margin-right: 10px;
  color: var(--pink);
  font-weight: 400;
}

.numbered-heading::after{
  content: "";
  display: block;
  position: relative;
  width: 300px;
  height: 1px;
  margin-left: 20px;
  background-color: var(--gray);
}

/* numbered heading FORCED 2 */

.numbered-heading2{
  display: flex;
  align-items: center;
  position: relative;
  margin: 10px 0px 40px;
  width: 100%;
  font-size: 32px;
  white-space: nowrap;
}

.numbered-heading2::before{
  counter-increment: section 2;
  content: "0" counter(section) ".";
  margin-right: 10px;
  color: var(--pink);
  font-weight: 400;
}

.numbered-heading2::after{
  content: "";
  display: block;
  position: relative;
  width: 300px;
  height: 1px;
  margin-left: 20px;
  background-color: var(--gray);
}


/* button width */
.btn-width{
  max-width: 166px;
}

.bs-btn{
  padding: none;
}

/* Company Color */
.company{
  color: var(--pink);
}

a.inline-link{
  display: inline-block;
  position: relative;
  color: var(--pink);
  transition: var(--transition);
}


@media (prefers-reduced-motion: no-preference){

a.inline-link::after {
    transition: width var(--transition);
}
}

a.inline-link::after{
  content:"";
  display: block;
  width: 0px;
  height: 1px;
  position: relative;
  bottom: 0.37em;
  background-color: var(--pink);
  opacity: 0.5;
}

.range{
  margin-bottom: 25px;
  color: var(--gray);
  font-family: var(--font);
  font-size: 13px;
}

/* Section 02 -- Where I've Worked */

.list-group-item{
  background-color: var(--purple);
  color: var(--gray);
  border-color: var(--purple);
  font-family: var(--font);
  font-size: 15px;
  border-left: var(--pink);
}

.list-item-1{
  background-color: var(--purple);
}

.list-item-1-1{
 background-color: var(--purple);
}

.list-item-1-2{
background-color: var(--purple);
}

.list-group-item.active {
  color: #f665b0;
  background-color: #14032f;
  border-color: #14032f;
  border-left: var(--pink) !important;
}


.scrollspy-example {
  height: 325px;
  overflow: auto;
  border-left: var(--pink);
}

.custom{
  list-style: none;
}


.bar{
  text-decoration: none;
  position: relative;
  display: flex;
  background-color: transparent;
  font-family: var(--font);
  font-size: 20px;
} 


.custom:focus{
color: var(--pink);
border-left: 2px solid var(--pink);
}

/* unvisited link */
.btn-custom:link {
  color: var(--blue); 
  text-decoration: none ;
  background-color: transparent ;
  font-family: var(--font);
  font-size: 15px ;
  text-align: left;
}

/* visited link */
.btn-custom:visited {
color: var(--blue) !important;
text-decoration: none ;
background-color: transparent ;
font-family: var(--font); 
font-size: 15px  ;
text-align: left;
}

/* mouse over link */
.btn-custom:hover {
color: var(--lavender) ;
text-decoration: none ;
background-color: transparent;
font-family: var(--font) ;
font-size: 15px ;
text-align: left ;
}

/* selected link */
.btn-custom:active {
color: var(--lavender) ;
text-decoration: none ;
background-color: transparent;
font-family: var(--font); 
font-size: 15px ;
text-align: left ;
}



/* Skills and Projects */

.box-color{
background-color: var(--porp);
}

.styledJobs{
 max-width: 900px;
 margin: 0px auto;
 padding: 100px 0px;
 flex-wrap: nowrap;
}

.ExpAccordion{
  position: relative;
  width: 100%;
  margin-left: 20px;
  height: auto;
  flex-wrap: nowrap;
}

/* Email Me Button */
.email-link{
color: var(--pink);
background-color: transparent;
border: 1px solid var(--pink);
border-radius: var(--border-radius);
padding: 1.25rem 1.75rem;
font-size: 20px;
font-family: var(--font);
line-height: 1;
text-decoration: none;
transition: var(--transition);
margin-left: 15px;
margin-top: 50px;
}

.email-link:hover{
outline: none;
box-shadow: 3px 3px 0 0 var(--pink);
transform: translate(-4px, -4px);
}
  
.email-link:focus-visible{
outline: none;
box-shadow: 3px 3px 0 0 var(--pink);
transform: translate(-4px, -4px);
}

.contact{
  max-width: 600px;
  margin: 0px auto 100px;
  text-align: center;
  padding: 100px 0px;
}

.contactME{
  display: block;
  margin-bottom: 20px;
  color: var(--pink);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
}

.PLZ{
  font-size: 40px;
  font-weight: bold;
}

/* footer */

.custom-block{
  background-color: var(--purple);
}

svg {
  fill: var(--pink);
}

.bi-instagram:hover{
  fill: var(--blue);
}

.bi-linkedin:hover{
  fill: var(--blue);
}

.bi-github:hover{
  fill: var(--blue);
}

.bi-facebook:hover{
  fill: var(--blue);
}


/* LOL IDK */

#88mph {
  animation: moveX 0.3s linear infinite alternate;
}

@keyframes moveX {
  0% {
    transform: translateX(0); /* Start position */
  }
  100% {
    transform: translateX(30px); /* Move 30px along the x-axis */
  }
}