/* google fonts */

:root {
  --default-areas-background-size: 200vh;
}

.major-mono-display-regular {
  font-family: "Major Mono Display", monospace;
  font-weight: 400;
  font-style: normal;
}

.sawarabi-gothic-regular {
  font-family: "Sawarabi Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}


/* --- */

body {
  background-color: rgb(11, 11, 142);
}

* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: rgb(168, 255, 168);
}

.projects-buttons {
  background: linear-gradient(to left,
   rgb(255, 170, 0) 25%,
   rgb(14, 149, 207) 70%);
  display: flex;
  justify-content: center;
  gap: 50px;
}

#prev-button {
  border: 2px solid rgb(157, 0, 0);
  color: white;
  font-size: 20px;
  background-color: rgb(254, 118, 118);
  text-shadow: 1px 2px 1px black;
}

#next-button {
  color: white;
  border: 2px solid green;
  text-shadow: 1px 2px 1px black;
  font-size: 20px;
  background-color: rgb(93, 255, 85);
}

.contact-grid {
  margin-top: 30px;
}

.contact-grid > a {
  color: rgb(248, 255, 117);
  font-size: 20px;
  text-shadow: 1px 1px 1px rgb(96, 0, 0),
  1px 1px 5px rgb(255, 32, 32);
}

h1 {
  text-align: center;
  color: white;
  text-shadow: 1px 1px 1px black;
}

#navbar {
  display: flex;
  justify-content: center;
  width: 100%;
  background-color: black;
  position: fixed;
  gap: 50px;
  z-index: 10;
}

#projects {
  overflow: hidden;
}

.project-tile {
  background-color: red;
  flex: 1 0 100%;
  height: 500px;
  display: flex;
  transition: transform 0.5s ease-in-out;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#projects-grid {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1)
}

#projects-grid.sliding {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-desc {
  margin-top: 35px;
}

#welcome-section {
  background: no-repeat center/170vh url("https://i.pinimg.com/originals/e6/0c/4a/e60c4ae6305c1b5d57e9954166761db9.gif");
  background-size: cover;
}

#welcome-section-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  backdrop-filter: blur(2px);
}

#welcome-section-overlay > h1 {
  color: white;
  text-shadow: 1px 2px 3px rgb(4, 0, 246),
  2px -1px 1px red;
}

#welcome-section-overlay > p {
  color: white;
  text-shadow: 1px 2px 1px rgb(1, 0, 59);
}

#welcome-section * {
  box-sizing: inherit;
}

#greetings {
  margin-top: 20px;
}

.areas-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background: no-repeat url("https://i.makeagif.com/media/9-14-2019/VhItZG.gif");
  background-position: center;
  background-size: var(--default-areas-background-size);
}

.areas-grid > ul {
  list-style-type: none;
}

.areas-grid > ul > li {
  color: white;
  font-size: 30px;
  text-shadow: 1px 1px 1px black,
  2px -2px 5px rgb(12, 9, 137),
  2px -3px 2px rgb(144, 0, 0);
}

/* PROJECTS */

.project-overlay {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(3px);
  width: 100%;
  height: 100%;
}

.project-header {
  font-size: 50px;
  text-align: center;
}

.project-type {
  color: white;
  text-shadow: 2px 2px 5px black;
}

.project-desc {
  color: white;
  text-shadow: 2px 2px 1px black;
}

#project-ds {
  background: url("https://file.garden/Z9WlfxlbKAPc8Xj8/freecodecamp/personal%20portfolio/DemoScripter_logo.png") center/20%;
}

#project-ds > div > .project-header {
  color: white;
  text-shadow: 1px 1px 10px black;
}

#project-ikl {
  background: url("https://file.garden/Z9WlfxlbKAPc8Xj8/freecodecamp/personal%20portfolio/ikemen%20go%20launcher.png") center/100%;
}

#project-ikl > div > .project-header {
  color: white;
  text-shadow: 4px 4px 3px #00b3ff;
}

#project-fdr {
  background: url("https://file.garden/Z9WlfxlbKAPc8Xj8/freecodecamp/personal%20portfolio/fray%20documentation%20research.png") center;
}

#project-fdr > div > .project-header {
  color: white;
  text-shadow: 1px 3px 2px black,
  2px -3px 5px yellow,
  -2px 3px 2px blue;
  
}

#project-mp2a > div > .project-header {
  color: rgb(255, 183, 2);
  text-shadow: 1px 1px 10px rgb(255, 14, 14);
}

#project-tmcw {
  background: url("https://file.garden/Z9WlfxlbKAPc8Xj8/freecodecamp/personal%20portfolio/mythical%20consumer%20of%20worlds.png") center/100%;
}

#project-tmcw > div > .project-header {
  color: white;
  text-shadow: 1px 1px 2px rgb(255, 0, 0),
  1px 5px 2px rgb(255, 0, 0),
  1px -5px 2px rgb(255, 0, 0),
  5px 1px 2px rgb(255, 0, 0),
  -5px 1px 2px rgb(255, 0, 0);

}

#project-3bg {
  background: url("https://file.garden/Z9WlfxlbKAPc8Xj8/freecodecamp/personal%20portfolio/3d%20ball%20game.png") center/100%;
}

#project-3bg > div > .project-header {
  color: yellow;
  text-shadow: 1px 1px 3px rgb(255, 0, 0),
  1px -1px 3px rgb(255, 0, 0),
  -1px -1px 3px rgb(255, 0, 0),
  -1px 1px 3px rgb(255, 0, 0);
}

#project-tcfw {
  background: url("https://file.garden/Z9WlfxlbKAPc8Xj8/freecodecamp/personal%20portfolio/image.png") center/100%
}

#project-tcfw > div > .project-header {
  color: white;
  text-shadow: 2px 2px 2px blue,
  2px 5px 2px blue;
}

/* MEDIA QUERY */

@media (width <= 540px) {
  .areas-grid {
    background-size: 100vh;
  }
}

@media (width <= 600px) {
  .areas-grid {
    background-size: 110vh;
  }
}

@media (width <= 709px) {
  .areas-grid {
    background-size: 155vh;
  }
}

@media (width <= 709px) {
  .areas-grid {
    background-size: 155vh;
  }
}

@media (width >= 1017px) {
  .areas-grid {
    background-size: 230vh;
  }
}

@media (width >= 1117px) {
  .areas-grid {
    background-size: 280vh;
  }
}