:root {
  --tt-first-colour: #9b89b3;
  --tt-second-colour: #fcf7ff;
  --ef-first-colour: #042326;
  --ef-second-colour: #cdd3d4;
  --mtg-first-colour: #1d2837;
  --mtg-second-colour: #e9ecf2;
  --geo-first-colour: #74bfc1;
  --geo-second-colour: #2c5657;
  --geo-third-colour: #f9fcfd;
  --mod-first-colour: #a6290d;
  --mod-second-colour: #251c13;
  --mod-third-colour: #dba99e;
}

body {
  margin: 0;
  background-color: var(--tt-first-colour);
  color: var(--tt-second-colour);
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

a:not(#menu a) {
  -webkit-transition: opacity 0.4s;
  -o-transition: opacity 0.4s;
  transition: opacity 0.4s;
  color: inherit;
}

a:not(#menu a):hover {
  opacity: 0.4;
}

#nav-icon span {
  background-color: var(--tt-second-colour);
}

.portfolio-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow-x: scroll;
  position: relative;
  height: 100vh;
  margin: 0 auto;
  gap: 20%;
  -ms-scroll-snap-type: x mandatory;
  scroll-snap-type: x mandatory;
  -webkit-animation: showPortfolio 1s ease-in-out forwards;
  animation: showPortfolio 1s ease-in-out forwards;
}

@-webkit-keyframes showPortfolio {
  from {
    opacity: 0;
    margin-top: 200px;
  }

  to {
    opacity: 1;
    margin-top: 0;
  }
}

@keyframes showPortfolio {
  from {
    opacity: 0;
    margin-top: 200px;
  }

  to {
    opacity: 1;
    margin-top: 0;
  }
}

.portfolio-content-page {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  padding: 90px 0 235px 0;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  scroll-snap-align: start;
  overflow-y: scroll;
}

.portfolio-content-container {
  margin: 0 20px;
}

.portfolio-title {
  text-align: center;
  font-size: 2.125rem;
  font-weight: 200;
  margin-top: 0;
}

.pagination-dots-container {
  position: fixed;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  bottom: 50px;
  left: 50%;
  -webkit-transform: translate(-50%, 50%);
  -ms-transform: translate(-50%, 50%);
  transform: translate(-50%, 50%);
  z-index: 1000;
}

.pagination-dot {
  background: none;
  padding: 0;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--tt-second-colour);
  cursor: pointer;
}

.pagination-dot:first-of-type {
  background-color: var(--tt-second-colour);
}

.pagination-arrow-previous,
.pagination-arrow-next {
  position: fixed;
  height: 20px;
  bottom: 50px;
  cursor: pointer;
  fill: var(--tt-second-colour);
}

.pagination-arrow-previous {
  left: calc(50% - 90px);
  -webkit-transform: translateY(50%);
  -ms-transform: translateY(50%);
  transform: translateY(50%);
}

.pagination-arrow-next {
  right: calc(50% - 90px);
  -webkit-transform: translateY(50%);
  -ms-transform: translateY(50%);
  transform: translateY(50%);
}

.portfolio-video {
  display: block;
  width: 100%;
  margin-bottom: 40px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 2px solid;
}

.portfolio-text {
  border: 2px solid;
  padding: 0 0.75rem;
  line-height: 1.75;
}

.portfolio-mobile-images-container {
  width: 100%;
  -ms-grid-row: 2;
  grid-row: 2;
  -ms-grid-column: 1;
  grid-column: 1;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-top: 40px;
}

.portfolio-mobile-image-wrapper {
  width: 45%;
  aspect-ratio: 195/422;
  overflow-y: scroll;
  border: 2px solid;
}

.portfolio-mobile-image-wrapper img,
.portfolio-tablet-image-wrapper img {
  width: 100%;
  display: block;
}

.portfolio-tablet-image-wrapper {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: scroll;
  border: 2px solid;
  margin-top: 40px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.portfolio-typeface {
  width: 100%;
}

/* Beginning Of Portfolio Items Styling */

#talky-time ::-moz-selection {
  background-color: var(--tt-second-colour);
  color: var(--tt-first-colour);
}

#talky-time ::selection {
  background-color: var(--tt-second-colour);
  color: var(--tt-first-colour);
}

#eyefocused ::-moz-selection {
  background-color: var(--ef-second-colour);
  color: var(--ef-first-colour);
}

#eyefocused ::selection {
  background-color: var(--ef-second-colour);
  color: var(--ef-first-colour);
}

#music-theory-guide ::-moz-selection {
  background-color: var(--mtg-second-colour);
  color: var(--mtg-first-colour);
}

#music-theory-guide ::selection {
  background-color: var(--mtg-second-colour);
  color: var(--mtg-first-colour);
}

#geomatrica ::-moz-selection {
  background-color: var(--geo-third-colour);
}

#geomatrica ::selection {
  background-color: var(--geo-third-colour);
}

#modulato ::-moz-selection {
  background-color: var(--mod-third-colour);
}

#modulato ::selection {
  background-color: var(--mod-third-colour);
}

#talky-time .portfolio-item {
  background-color: var(--tt-second-colour);
}

#eyefocused .portfolio-item {
  background-color: var(--ef-second-colour);
}

#music-theory-guide .portfolio-item {
  background-color: var(--mtg-second-colour);
}

.modulato-first-image {
  margin-bottom: 75px;
}
/* End Of Portfolio Items Styling */

/* MEDIA QUERIES */
@media screen and (min-width: 577px) {
  .portfolio-content-container {
    margin: 0 40px;
  }
}

@media screen and (min-width: 769px) {
  .portfolio-content-container {
    margin: 0 60px;
  }
}

@media screen and (min-width: 1025px) {
  .portfolio-content-container {
    margin: 0 auto;
    width: 960px;
  }
}

@media screen and (min-width: 1441px) {
  .portfolio-content-container {
    margin: 0 auto;
    width: 1350px;
  }
}