.fontAudioWide {
  font-family: "Audiowide", sans-serif;
  font-weight: 400;
  font-style: normal;
}

body {
  margin: 0;
  padding: 0;
  background: rgb(217.4125, 189.525, 147.0875);
  color: #121212;
  font-family: "Lato", sans-serif;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
}

.splashContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background: rgb(217.4125, 189.525, 147.0875);
}
.splashContainer .backgroundCanvas {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  z-index: 0;
}
.splashContainer .splashTitleContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1;
}
.splashContainer .splashTitleContainer h1, .splashContainer .splashTitleContainer h2 {
  margin: 10px;
  text-shadow: 0px 0px 10px rgb(217.4125, 189.525, 147.0875);
  text-align: center;
}
.splashContainer .splashTitleContainer h1 {
  font-size: 72px;
  font-family: "Audiowide", sans-serif;
  font-weight: 400;
  font-style: normal;
}
@media (max-width: 800px) {
  .splashContainer .splashTitleContainer h1 {
    font-size: 36px;
  }
}
.splashContainer .splashTitleContainer h2 {
  font-size: 36px;
}
@media (max-width: 800px) {
  .splashContainer .splashTitleContainer h2 {
    font-size: 24px;
  }
}
.splashContainer .splashTitleContainer a {
  text-decoration: none;
  color: #121212;
}
.splashContainer .splashTitleContainer a .splashButton {
  background: #3B3B98;
  padding: 10px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
  border-radius: 5px;
}
.splashContainer .splashTitleContainer a .splashButton:hover {
  filter: brightness(1.1);
}
.splashContainer .splashTitleContainer a .splashButton .buttonText {
  width: 100px;
  font-size: 20px;
  text-align: center;
  margin-right: 10px;
}
.splashContainer .splashTitleContainer a .splashButton .buttonArrow {
  font-size: 48px;
}

.sectionContainer {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 100px;
  padding-top: 50px;
  padding-bottom: 50px;
  background-color: rgb(217.4125, 189.525, 147.0875);
}
.sectionContainer .titleContainer {
  display: flex;
  justify-content: center;
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  margin-top: 50px;
  margin-bottom: 50px;
}
.sectionContainer .leftSide {
  flex: 1;
}
.sectionContainer .rightSide {
  flex: 1;
}
.sectionContainer h1 {
  font-size: 60px;
}
.sectionContainer p {
  font-size: 22px;
}

.projectsContainer {
  display: flex;
  margin-top: 100px;
  gap: 50px;
}
.projectsContainer a:nth-child(1) .projectItem {
  border-color: #4834d4;
  color: #4834d4;
}
.projectsContainer a:nth-child(2) .projectItem {
  border-color: #eb4d4b;
  color: #eb4d4b;
}
.projectsContainer a:nth-child(3) .projectItem {
  border-color: #6ab04c;
  color: #6ab04c;
}
.projectsContainer a:nth-child(4) .projectItem {
  border-color: #f0932b;
  color: #f0932b;
}

.projectItem {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  background: rgb(236.20625, 222.2625, 201.04375);
  box-shadow: 5px 5px 0px rgb(130.4475, 113.715, 88.2525);
  border: 10px solid black;
  transition: 0.2s;
}
.projectItem span {
  padding: 10px;
  font-size: 32px;
  text-align: center;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.projectItem .material-symbols-outlined {
  transition: 0.2s;
  font-size: 90px;
  opacity: 1;
}
.projectItem .projectItemTitle {
  transition: 0.2s;
  opacity: 0;
}
.projectItem:hover {
  transform: translate(-5px, -5px);
  box-shadow: 10px 10px 0px rgb(130.4475, 113.715, 88.2525);
  cursor: pointer;
}
.projectItem:hover .material-symbols-outlined {
  opacity: 0;
}
.projectItem:hover .projectItemTitle {
  opacity: 1;
}

.projectPageContainer {
  width: 80vw;
  max-width: 1400px;
  margin: auto;
  margin-top: 100px;
  margin-bottom: 100px;
}
.projectPageContainer .backButton {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #121212;
  font-size: 22px;
}
.projectPageContainer .backButton:hover {
  color: #30336b;
}
.projectPageContainer h1 {
  font-size: 72px;
}
.projectPageContainer h2 {
  font-size: 36px;
}
.projectPageContainer h3 {
  font-size: 26px;
}
.projectPageContainer p, .projectPageContainer b {
  font-size: 22px;
}
.projectPageContainer .skillsTags {
  display: flex;
  flex-direction: row;
  gap: 5px;
  margin-bottom: 10px;
}
.projectPageContainer .skillsTags span {
  background: gray;
  color: white;
  padding: 2px 7px;
  border-radius: 5px;
}
.projectPageContainer .skillsTags .green {
  background: #27ae60;
}
.projectPageContainer .skillsTags .blue {
  background: #2980b9;
}
.projectPageContainer .skillsTags .purple {
  background: #8e44ad;
}
.projectPageContainer .skillsTags .red {
  background: #c0392b;
}
.projectPageContainer .skillsTags .yellow {
  background: #f39c12;
}
.projectPageContainer .imageTiltedGallery img {
  position: absolute;
  width: 600px;
  margin-top: 100px;
  margin-bottom: 100px;
  transform: rotateY(45deg) skewY(5deg);
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
  transition: 0.2s;
}
.projectPageContainer .imageTiltedGallery img:nth-child(1) {
  right: 200px;
  z-index: 1;
}
.projectPageContainer .imageTiltedGallery img:hover {
  z-index: 10;
  transform: rotateY(0deg) skewY(0deg) translateY(-20px);
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
  width: 800px;
}
.projectPageContainer .imageTiltedGallery img:nth-child(2) {
  right: 400px;
  z-index: 2;
}
.projectPageContainer .imageTiltedGallery img:hover {
  z-index: 10;
  transform: rotateY(0deg) skewY(0deg) translateY(-20px);
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
  width: 800px;
}
.projectPageContainer .imageTiltedGallery img:nth-child(3) {
  right: 600px;
  z-index: 3;
}
.projectPageContainer .imageTiltedGallery img:hover {
  z-index: 10;
  transform: rotateY(0deg) skewY(0deg) translateY(-20px);
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
  width: 800px;
}
.projectPageContainer .imageTiltedGallery img:nth-child(4) {
  right: 800px;
  z-index: 4;
}
.projectPageContainer .imageTiltedGallery img:hover {
  z-index: 10;
  transform: rotateY(0deg) skewY(0deg) translateY(-20px);
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
  width: 800px;
}
.projectPageContainer .imageTiltedGallery img:nth-child(5) {
  right: 1000px;
  z-index: 5;
}
.projectPageContainer .imageTiltedGallery img:hover {
  z-index: 10;
  transform: rotateY(0deg) skewY(0deg) translateY(-20px);
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
  width: 800px;
}

.imageGridGallery {
  display: flex;
  flex-direction: column;
  width: 80vw;
  max-width: 80vw;
  gap: 10px;
}
.imageGridGallery .row {
  display: flex;
  justify-content: center;
  flex-direction: row;
  width: 100%;
  gap: 10px;
}
.imageGridGallery .row img {
  width: 100%;
}
.imageGridGallery .row img.half {
  max-width: 50%;
}
.imageGridGallery .row img.fifth {
  max-width: 20%;
}/*# sourceMappingURL=style.css.map */