@import url("https://fonts.googleapis.com/css2?family=Playpen+Sans:wght@100;200;300;400;500;600;700;800&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

}

:root {
  --index: calc(1vw + 1vh);
}



html {
  font-size: 18px;
}

header {
  text-align: center;
}

.photo {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-radius: 50%;
  /* box-shadow: 3px 3px 9px 3px rgba(168, 168, 168, 0.527); */
  filter: drop-shadow(1px 2px 5px #313131);
  animation-name: zoom;
  animation-duration: 3s;
}

.photo2 {
  margin: 0 auto;
  background-size: cover;
  background-image: url("img/img_25.jpeg");
  width: 600px;
  height: 398px;
  filter: drop-shadow(5px 5px 10px #313131);
  animation-name: zoom;
  animation-duration: 3s;
}

.photo2:hover {
  background-image: url("img/img_30.jpeg");
}

.icon {
  width: 30px;
}

body {
  padding: 25px;
  background-color: #fff;
  /* font-family: 'Special Elite', cursive; */
  /* font-family: 'Josefin Slab', serif; */
  /* font-family: 'Nunito', sans-serif; */
  /* font-family: 'Marmelad', sans-serif;	*/
  /* font-family: 'Quicksand', sans-serif; */
  font-family: "Playpen Sans", cursive;
  font-weight: 300;
  /* font-family: "Quattrocento", serif;
  font-weight: 400;
  font-style: normal; */
  /* font-size: calc(var(--index) * .8); */
}

a:link {
  text-decoration: none;
}

a:visited {
  color: #0066cc;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1 {
  font-weight: 700;
  text-align: center;
  font-size: clamp(1.5rem, 5vw, 2.2rem);
}

h2 {
  font-weight: 700;
  text-align: center;
  font-size: clamp(1.2rem, 5vw, 1.5rem);
}

h3 {
  font-weight: 700;
  font-size: clamp(0.5rem, 4vw, 1.1rem);
}

strong {
  font-weight: 600;
}

.shell {
  margin: 0 auto;
  padding: 25px;
  position: relative;
  border-radius: 5px;
  min-width: 300px;
  max-width: 900px;
  background-color: rgb(255, 249, 241);
  box-shadow: 7px 9px 15px 5px rgba(168, 168, 168, 0.527);
  animation-name: anime;
  animation-duration: 3s;
}

details {
  font-size: 14px;
}

details>h3 {
  font-size: 14px;
}

@keyframes anime {
  0% {
    left: -1000px;
    top: 0px;
    opacity: 0;
  }

  100% {
    left: 0px;
    top: 0px;
    opacity: 1;
  }
}

@keyframes zoom {
  0% {
    width: 25px;
    height: 25px;
    opacity: 0;
  }

  100% {
    /* width: 500px;
    height: 500px; */
    opacity: 1;
  }
}

.animate-on-scroll {
  opacity: 0;
  transform: translateX(300px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateX(0);
}

ul li::marker {
  /* content: "o"; */
  color: rgb(49, 49, 49);
  /* font-size: 17px; */
}

ul {
  list-style-type: circle;
}

main {
  margin: 50px 25px;
}

.company {
  font-weight: 400;
}

footer {
  text-align: center;
}

video {
  max-width: 50%;
  border-radius: 7%;
}

.prompt {
  font-size: 10px;
  font-style: italic;
  color: rgb(69, 119, 121);
}

.summary {
  text-align: justify;
  text-justify: inter-word;
}

.key-resp {
  text-align: justify;
  text-justify: inter-word;
}

@media screen and (max-width: 600px) {

  body {
    font-size: 14px;
  }

  main {
    margin: 0 5px;
  }

  footer {
    font-size: 14px;
  }

  .photo {
    width: 150px;
    height: 150px;

  }

  .photo2 {
    width: 250px;
    height: 150px;

  }

  body {
    background-color: rgb(255, 249, 241);
  }

  .shell {
    animation-name: none;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
  }

}