:root {
  --text-main: #ffffff;
  --text-alt: #ffffff8e;
  --body-bg: #141414;
  --seg-bg: #1d1d1f;
  --box-shadow: #121212;
}

* {
  transition: background-color 0.3s linear;
}

.lightmode {
  --text-alt: #b06c6e;
  --text-main: #67422f;
  --body-bg: #baaaaa;
  --seg-bg: #c7bac8;
  --box-shadow: #14141457;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--body-bg);
  color: var(--text-main);
  font-size: 12px;
  font-family: "Poppins", sans-serif;
}

.segment {
  background-color: var(--seg-bg);
  width: 85%;
  max-width: 800px;
  border-radius: 8px;
  padding: 12px;
  margin: 0 auto;
  margin-bottom: 10px;
  -webkit-box-shadow: 5px 5px 15px 5px var(--box-shadow);
  box-shadow: 5px 5px 15px 5px var(--box-shadow);
}

.hidden {
  display: none;
  visibility: hidden;
}

/*~~~~~~~~~~~~HEADER BOX CODE START~~~~~~~~~~~~*/

header {
  background-color: var(--seg-bg);
  width: 85%;
  max-width: 800px;
  margin-top: 24px;
  border-radius: 8px;
  padding: 12px 12px 0 12px;
  margin: 25px auto;

  display: grid;
  grid-template-columns: 0.66fr 1fr;
  grid-template-rows: repeat(7, 1fr);
  grid-column-gap: 24px;
  grid-row-gap: 0px;

  -webkit-box-shadow: 5px 5px 5px 5px var(--box-shadow);
  box-shadow: 5px 5px 5px 5px var(--box-shadow);
}

.pfp > img {
  width: 120px;
  border-radius: 50%;
  border: 2px solid #ffffff75;
}

.label {
  color: var(--text-alt);
  font-size: 12px;
}

.content {
  font-size: 12px;
  margin-left: 0.25rem;
}

.content > a {
  text-decoration: none;
  color: inherit;
}

.pfp {
  grid-area: 1 / 1 / 6 / 2;
  display: flex;
  justify-content: center;
  align-items: center;
}
.name {
  display: flex;
  align-items: center;
  font-size: 28px;
  grid-area: 1 / 2 / 3 / 3;
}
.location {
  display: flex;
  align-items: center;
  grid-area: 3 / 2 / 4 / 3;
}
.phone {
  display: flex;
  align-items: center;
  grid-area: 4 / 2 / 5 / 3;
}
.email {
  display: flex;
  align-items: center;
  grid-area: 5 / 2 / 6 / 3;
}

.nav {
  grid-area: 6 / 1 / 8 / 3;
  margin-top: 12px;
  width: 100%;
  position: relative;

  display: flex;
  justify-content: space-around;
  align-items: center;
}

.nav a {
  text-decoration: none;
}

.moon {
  d: path(
    "M24 42q-7.5 0-12.75-5.25T6 24q0-6.75 3.975-11.45Q13.95 7.85 20.4 6.5q2.05-.4 2.8.7t-.05 3q-.45 1.15-.7 2.35-.25 1.2-.25 2.45 0 4.5 3.15 7.65Q28.5 25.8 33 25.8q1.25 0 2.425-.225 1.175-.225 2.275-.625 2.15-.8 3.2.075 1.05.875.55 2.975-1.35 6.05-6.05 10.025Q30.7 42 24 42Zm0-3q5.45 0 9.5-3.375t5.05-7.925q-1.25.55-2.675.825Q34.45 28.8 33 28.8q-5.75 0-9.775-4.025T19.2 15q0-1.2.25-2.575.25-1.375.9-3.125-4.9 1.35-8.125 5.475Q9 18.9 9 24q0 6.25 4.375 10.625T24 39Zm-.2-14.85Z"
  );
}

#svg-dark-mode {
  position: absolute;
}

/*~~~~~~~~~~~~HEADER BOX CODE END~~~~~~~~~~~~*/

.heading {
  line-height: 40px;
  font-weight: bold;
  width: 85%;
  max-width: 800px;
  margin: 0 auto;
}

.value-proposition {
  margin-bottom: 10px;
  padding-top: 15px;
}
/*~~~~~~~~~~~~SKILLS BOX CODE START~~~~~~~~~~~~*/

.skills {
  margin-bottom: 10px;
  columns: 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(5, 1fr);
  color: var(--text-alt);
}

.skill1 {
  grid-area: 1 / 1 / 2 / 2;
}
.skill2 {
  grid-area: 2 / 1 / 3 / 2;
}
.skill3 {
  grid-area: 3 / 1 / 4 / 2;
}
.skill4 {
  grid-area: 4 / 1 / 5 / 2;
}
.skill5 {
  grid-area: 5 / 1 / 6 / 2;
}
.skill6 {
  grid-area: 1 / 2 / 2 / 3;
}
.skill7 {
  grid-area: 2 / 2 / 3 / 3;
}
.skill8 {
  grid-area: 3 / 2 / 4 / 3;
}
.skill9 {
  grid-area: 4 / 2 / 5 / 3;
}
.skill10 {
  grid-area: 5 / 2 / 6 / 3;
}
/*~~~~~~~~~~~~SKILLS BOX CODE END~~~~~~~~~~~~*/

/*~~~~~~~~~~~~EXPERIENCE BOX CODE START~~~~~~~~~~~~*/

.job {
  font-size: 12px;
  padding: 5px;
}

.title {
  font-weight: bold;
  font-size: 14px;
}

.dates {
  color: var(--text-alt);
  font-weight: bold;
}

.description {
  font-size: 10px;
  color: var(--text-alt);
}

/*~~~~~~~~~~~~EXPERIENCE BOX CODE END~~~~~~~~~~~~*/
/*~~~~~~~~~~~~PORTFOLIO BOX CODE START~~~~~~~~~~~~*/
.carousel-wrapper {
  position: relative;
  overflow: hidden;
  /* margin: 0.75rem; */
}

.slide-arrow {
  position: absolute;
  display: flex;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 4rem;
  background-color: white;
  border: none;
  width: 2rem;
  font-size: 3rem;
  padding: 0;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 100ms;
  z-index: 2;
}

.slide-arrow:hover {
  opacity: 1;
}

#slideArrowPrev {
  left: 0;
  padding-left: 0.25rem;
  border-radius: 0 2rem 2rem 0;
}

#slideArrowNext {
  right: 0;
  padding-left: 0.75rem;
  border-radius: 2rem 0 0 2rem;
}

.slides-container {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: scroll;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.slides-container::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.slide {
  width: 100%;
  height: 100%;
  flex: 1 0 100%;
  /* border: 1px dashed yellow; */
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  object-fit: cover;
  /* pointer-events: none; */
}

a {
  height: 100%;
  text-decoration: none;
  color: var(--text-main);
}

li img {
  height: 16rem;
}

.slide-title {
  font-size: 1.5rem;
}

.slide-head {
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--body-bg);
  opacity: 0.75;
  padding: 0.5rem;
  border-radius: 7px;
  display: flex;
  flex-direction: column;
}

@media (max-width: 700px) {
  body {
    font-size: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .segment,
  header {
    width: 95%;
    margin: 0;
    -webkit-box-shadow: 3px 3px 13px 3px var(--box-shadow);
    box-shadow: 3px 3px 13px 3px var(--box-shadow);
  }

  header {
    margin-top: 0.5rem;
  }

  .label,
  .content {
    font-size: 10px;
  }

  nav a svg {
    height: 17px;
    margin-bottom: 0.25rem;
  }

  header .name {
    font-size: 18px;
  }
  header .pfp {
    width: 90px;
    margin-left: 0.25rem;
  }

  header .pfp img {
    width: 100%;
  }

  .heading {
    width: 90%;
  }
}