main {
  position: relative;
  margin: 0 auto;
}

#lang {
  position: fixed;
  top: var(--sameContextGap);
  right: var(--sameContextGap);
  display: inline-block;
  width: auto;
  cursor: pointer;
  z-index: 100;
}

#darkmode {
  position: fixed;
  bottom: var(--sameContextGap);
  right: var(--sameContextGap);
  border-radius: 50%;
  background: var(--neutral);
  border: solid var(--prim) var(--borderSize);
  height: calc(var(--sameContextGap) * 3);
  width: calc(var(--sameContextGap) * 3);
  cursor: pointer;
  z-index: 100;
}

header {
  width: 100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: var(--neutral);
  z-index: 100;
}
header nav {
  display: flex;
  justify-content: space-between;
  color: var(--prim);
}
header nav ul {
  display: flex;
  justify-content: flex-end;
}
header nav ul li {
  list-style: none;
  padding: var(--sameContextGap);
  font-size: 1.2rem;
  color: var(--neutral);
}
header nav ul li a {
  font-size: inherit;
  color: inherit;
}

.hero {
  --height: 90vh;
  background: var(--prim);
  min-height: var(--height);
  padding: 0;
}
.hero .bgContainer {
  width: 100%;
  height: var(--height);
  background: url("img/Untitled.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 100% 100%;
}
.hero .bgContainer .wrapper {
  height: var(--height);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.hero .bgContainer .wrapper .col-4 {
  height: 60vh;
}
.hero .bgContainer .wrapper .col-4.cta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hero .bgContainer .wrapper .col-4.cta .bullets ul {
  margin-left: calc(var(--sameContextGap) * 1.5);
}
.hero .bgContainer .wrapper .col-4.cta .bullets ul li {
  margin-bottom: var(--sameContextGap);
}
.hero .bgContainer .wrapper .col-4.image {
  border: var(--neutral) var(--borderSize) solid;
  border-radius: var(--borderRadius);
}

/* .col-4
 *  width: calc(50% - 213.33px)
 *  background: var(--second) 
 *  color: var(--neutral)
 *  display: flex
 *  align-items: flex-start
 *  flex-direction: column
 *  .subcontainer
 *      padding-left: var(--sameContextGap)
 *      margin-bottom: 0
 *      max-width: 426.66px
 *      height: 100%
 *      display: flex
 *      flex-direction: column
 *      justify-content: space-between
 *  h1
 *      font-size: 3em
 *  p
 *      font-size: 1.2em
 *  h1,h2,h3,h4,h5,h6,p,div
 *      color: var(--neutral)
 *      margin-bottom: calc(var(--sameContextGap) / 2)
 *      &::selection
 *          color: var(--prim)
 *          background: var(--neutral) */
.center {
  margin-left: auto;
  margin-right: auto;
}

/* .col-8
 *  width: 66.666% */
.ExContent {
  border: var(--borderSize) solid var(--second);
  padding: calc(var(--sameContextGap) / 2) var(--sameContextGap);
  border-radius: var(--borderRadius);
}

/* <Companies> */
.companies {
  /* padding: var(--sameContextGap) */
  /* padding-right: var(--sameContextGap) */
  margin-bottom: var(--differentContextGap);
}
.companies > ul {
  display: flex;
  /* background: var(--neutral) */
  /* border-radius: var(--borderRadius) */
  /* border: solid var(--borderSize) var(--prim) */
  align-items: center;
  /* justify-content: space-around */
  /* align-items: center */
}
.companies > ul > li {
  height: 8vh;
  text-align: center;
  list-style: none;
  width: 33.333%;
  padding: 0 var(--differentContextGap) var(--sameContextGap);
}
.companies > ul > li.extraPadding {
  padding: calc(var(--sameContextGap) * 0.5) var(--differentContextGap) calc(var(--sameContextGap) * 1.5);
}
.companies > ul > li img {
  height: 100%;
  width: auto;
}

/* </Companies> */
/* <ProfileText> */
.profileText {
  margin-top: var(--sameContextGap);
  margin-bottom: var(--differentContextGap);
  padding: 0 var(--sameContextGap) 0 var(--sameContextGap);
}
.profileText h1 {
  text-align: center;
}
.profileText article > div {
  padding: 0 var(--sameContextGap);
}
.profileText article > div > p:last-of-type {
  margin-bottom: 0;
}

/* </ProfileText> */
/* <skills> */
.skills {
  margin-bottom: var(--differentContextGap);
}
.skills .skillsContainer {
  display: flex;
  width: 100%;
}
.skills .skillsContainer .col-4 {
  padding: var(--sameContextGap);
  margin: var(--sameContextGap);
  border: solid var(--borderSize) var(--second);
  border-radius: var(--borderRadius);
}

/* </skills> */
/* <Category Title> */
.categoryTitle {
  padding-top: var(--sameContextGap);
  /* padding-right: var(--sameContextGap) */
  /* padding-left: var(--sameContextGap) */
  display: flex;
  align-items: center;
  color: var(--prim);
}
.categoryTitle span {
  font-size: inherit;
  margin-left: var(--sameContextGap);
  color: var(--second);
}
.categoryTitle span:first-of-type {
  margin-left: 0;
  color: var(--prim);
}
.categoryTitle::before, .categoryTitle::after {
  content: "";
  display: block;
  height: var(--borderSize);
  width: 50%;
  background: var(--second);
  border-radius: var(--borderRadius);
}
.categoryTitle::before {
  margin-right: var(--sameContextGap);
}
.categoryTitle::after {
  margin-left: var(--sameContextGap);
}

/* </Category Title> */
/* <CV> */
.cv {
  margin-bottom: var(--sameContextGap);
}
.cv > div {
  margin-top: var(--differentContextGap);
}
.cv > div:first-of-type {
  margin-top: 0;
}

.titleHours {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.titleHours > p {
  width: auto;
  margin-right: 1em;
}

figure img {
  -o-object-fit: contain;
     object-fit: contain;
  height: 1em;
  width: 1em;
  margin-right: 0.3em;
}

.ExperienceContent {
  margin: 0 var(--sameContextGap) var(--sameContextGap);
  border: solid var(--borderSize) var(--second);
  border-radius: var(--borderRadius);
  padding: var(--sameContextGap);
}
.ExperienceContent h2 {
  color: var(--prim);
}
.ExperienceContent > article > p:last-of-type {
  margin-bottom: 0;
}

/* </CV> */
/* <Recommendations> */
.recommendations {
  /* padding-left: var(--sameContextGap) */
  /* padding-right: var(--sameContextGap) */
  margin-bottom: var(--differentContextGap);
}
.recommendations .recommendation {
  padding: var(--sameContextGap);
}
.recommendations .recommendation article p:last-of-type {
  margin-block: 0;
}

/* </Recommendations> */
/* <footer> */
footer {
  padding: var(--sameContextGap) 0 var(--differentContextGap);
  background: var(--second);
  color: var(--neutral);
}

/* </footer> *//*# sourceMappingURL=style.css.map */