*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: "Lato", sans-serif;
}

:root {
  --primary:#F2F2F2;
  --secundary:#737373;
  --dark: #323232;
  --blue: blue;
  --red: #db0000;
  --yellow:#FFD714;
  --green: #3E9C0B;
  --black: #0D0D0D;
  --class: LightSkyblue;
  --wert: chocolate;
  --background: #262626;
  --grey: #404040;
}

.main {
  min-height: 100%;
  width: 100%;
  background-color: var(--dark);
  color: var(--primary);
}

.main-about {
  display: grid;
  place-items: center;
  align-content: center;
}

@media screen and (max-width: 768px) {
  .main-about {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
}
.main-about__text-container {
  max-width: 850px;
  font-size: 1.2rem;
  padding: 20px;
  display: flex;
  gap: 0.8rem;
  margin: 1rem;
  z-index: 0;
  line-height: 1.5em;
  background: linear-gradient(145deg, #262626, #404040);
  box-shadow: 2px 2px 6px #2b2b2b, -2px -2px 6px #3a3a3a;
}

@media screen and (max-width: 768px) {
  .main-about__text-container {
    flex-direction: column;
    align-items: center;
  }
}
.main-about__title {
  text-align: center;
  margin-bottom: 2rem;
  letter-spacing: 0.2rem;
  color: var(--secundary);
}

.main-about__text {
  max-width: 450px;
  text-align: center;
  letter-spacing: 0.1rem;
  font-size: 1rem;
}

.about-image__container {
  max-width: 250px;
  /*background-color: var(--primary);*/
}

.about-image__item {
  width: 100%;
  object-fit: cover;
  filter: grayscale(1);
}

footer {
  width: 100%;
  bottom: 0;
  color: var(--secundary);
  background-color: var(--dark);
  text-align: right;
  padding: 0.5rem;
}

.menu {
  width: 100%;
  background-color: var(--black);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  z-index: 300;
}

.menu__list {
  display: flex;
  justify-content: space-around;
  list-style-type: none;
}

.menu__item {
  text-decoration: none;
  margin: 1rem;
  text-transform: uppercase;
  color: var(--secundary);
}

.menu__item--name, .menu__item--mail {
  font-size: 1.2rem;
  letter-spacing: 0.1rem;
  color: var(--primary);
  text-transform: capitalize;
}

.menu__item--burger {
  color: var(--primary);
}

.menu__item--list:hover {
  color: var(--primary);
}

.page-pageProgramer .menu__item--list-programer {
  color: var(--blue);
}

.menu__item--list-programer:hover {
  color: var(--blue);
}

.page-pageFotograf .menu__item--list-fotograf {
  color: var(--green);
}

.menu__item--list-fotograf:hover {
  color: var(--green);
}

.page-pageJongleur .menu__item--list-jongleur {
  color: var(--red);
}

.menu__item--list-jongleur:hover {
  color: var(--red);
}

.menu__item--icon {
  font-size: 1.2rem;
}

.menu__item--icon:hover {
  color: var(--primary);
}

.menu__item--name:hover, .menu__item--mail:hover, .menu__item--burger:hover {
  color: var(--secundary);
}

dl, ol, ul {
  margin-bottom: 0;
}

@media screen and (max-width: 875px) {
  .menu__item--icon {
    display: none;
  }
}
@media screen and (max-width: 876px) {
  .menu__item--mail {
    display: contents;
  }
}
@media screen and (max-width: 767px) {
  .menu__item--list-programer, .menu__item--list-fotograf, .menu__item--list-jongleur {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .menu__item--burger {
    display: none;
  }
}
.dropdown {
  display: inline-block;
  z-index: 300;
}
.dropdown .dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: var(--dark);
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown .dropdown-content a {
  color: var(--secundary);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown .dropdown-content a:hover {
  background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.footer-container {
  width: 100%;
  background-color: var(--black);
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer__list {
  color: var(--primary);
  display: flex;
  list-style-type: none;
}

@media screen and (min-width: 876px) {
  .menu__item--icon-footer {
    display: none;
  }
  .footer-container {
    display: none;
  }
}
.copyright {
  color: var(--primary);
}

.main-jongleur {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.text-red {
  color: var(--red);
}

.main-jongleur__hero-container {
  max-width: 100%;
  display: block;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  border-bottom: var(--secundary) 1px solid;
  padding-top: 1rem;
  margin-inline: 10%;
}

@media screen and (max-width: 768px) {
  .main-jongleur__hero-container {
    flex-direction: column;
    align-items: center;
    margin-inline: 10%;
  }
}
.main-jongleur__text-container {
  max-width: 450px;
  font-size: 1.2rem;
  padding: 20px;
  line-height: 1.5rem;
}
.main-jongleur__text-container .main-jongleur__title {
  letter-spacing: 0.2rem;
  margin-bottom: 1rem;
  color: var(--secundary);
  text-align: center;
}
.main-jongleur__text-container .main-about__text--slogan {
  font-size: 1.5rem;
}
.main-jongleur__text-container .main-jongleur__text {
  max-width: 450px;
  text-align: left;
  letter-spacing: 0.1rem;
  font-size: 1rem;
  color: var(--secundary);
}
.main-jongleur__text-container .main-jongleur__text--center {
  text-align: center;
}

.jongleur-image__container {
  width: 250px;
  position: relative;
  margin: 1rem 0;
  aspect-ratio: 480/640;
  background: rgb(131, 58, 180);
  background: linear-gradient(36deg, rgb(252, 170, 69) 0%, rgb(253, 29, 29) 50%, rgb(131, 58, 180) 100%);
  border-radius: 30px 30px 30px 0;
  box-shadow: 2px 2px 6px #000000, -2px -2px 6px #010101;
}
.jongleur-image__container .jongleur-image__item {
  max-width: 80%;
  object-fit: cover;
  position: absolute;
  bottom: 0;
}

.jongleur-galery__container {
  width: 90%;
  display: flex;
  flex-direction: row;
  flex-grow: 2, 3;
  align-items: center;
  justify-content: center;
  margin-bottom: 3rem;
}

@media screen and (max-width: 768px) {
  .jongleur-galery__container {
    flex-direction: column;
    align-items: center;
  }
}
.jongleur-image__container--polaroid {
  width: min(100%, 250px);
  background: #fff;
  padding: 0.25rem;
  margin: 0.75rem;
  box-shadow: 2px 2px 6px #000000, 4px 4px 6px #010101;
}
.jongleur-image__container--polaroid .jongleur-image__item {
  max-width: 100%;
  object-fit: cover;
}
.jongleur-image__container--polaroid .jongleur-image__text {
  color: var(--black);
  text-align: center;
}

.main-programer__text-container {
  padding: 1rem;
  line-height: 1.5em;
  background: linear-gradient(145deg, #262626, #404040);
  box-shadow: 20px 20px 60px #2b2b2b, -20px -20px 60px #3a3a3a;
}

.main-programer__text-container--escaped {
  padding-left: 0.5rem;
  line-height: 1.5em;
  overflow: hidden;
  background: linear-gradient(145deg, #262626, #404040);
  box-shadow: 2px 2px 6px #2b2b2b, -2px -2px 6px #3a3a3a;
}

.main-programer__title {
  text-align: center;
  margin-bottom: 2rem;
  letter-spacing: 0.2rem;
  color: var(--secundary);
}

.main-programer__text {
  text-align: center;
  letter-spacing: 0.1rem;
  font-size: 1.2rem;
}

.main-programer__text--escaped {
  text-align: left;
  letter-spacing: 0.1rem;
  font-size: 1rem;
  color: var(--secundary);
}

.programer-icon__main-container {
  display: grid;
  place-items: center;
  align-content: center;
}

.programer-icon__container {
  display: grid;
  place-items: center;
  align-content: center;
  width: 150px;
  height: 150px;
  background: linear-gradient(145deg, #262626, #404040);
  box-shadow: 20px 20px 60px #2b2b2b, -20px -20px 60px #3a3a3a;
}
.programer-icon__container i {
  font-size: 6rem;
  margin: 1rem;
  color: var(--secundary);
}

@media screen and (max-width: 768px) {
  .main-programer {
    justify-content: flex-start;
  }
  .programer-icon__container {
    width: 4rem;
    height: 3.5rem;
  }
  .programer-icon__container i {
    font-size: 2.5rem;
    margin: 0.5rem;
    color: var(--secundary);
  }
  .main-programer__text-container {
    font-size: 0.8rem;
  }
  .main-programer__text--escaped {
    font-size: 0.8rem;
  }
}
.element {
  color: var(--blue);
}

.class {
  color: var(--class);
}

.wert {
  color: var(--wert);
}

.commentar {
  color: var(--green);
}

.hidden {
  opacity: 0;
  filter: blur(5px);
  transform: translateX(-100%);
  transition: all 1s;
}

@media (prefers-reduced-motion) {
  .hidden {
    transition: none;
  }
}
.show {
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
}

.logos {
  display: flex;
  gap: 0.3rem;
}

.logo:nth-child(2) {
  transition-delay: 300ms;
}

.logo:nth-child(3) {
  transition-delay: 600ms;
}

.logo:nth-child(4) {
  transition-delay: 900ms;
}

.logo:nth-child(5) {
  transition-delay: 1200ms;
}

.main-fotograf {
  width: 100%;
  min-height: 100%;
  padding: 2rem 2rem 4rem 2rem;
  align-items: center;
}
.main-fotograf .carousel-container {
  width: 100%;
  /*width: clamp(200px, 100%, 800px);*/
}
.main-fotograf .video-container {
  position: relative;
  overflow: hidden;
  height: 0;
  padding-bottom: 56.25%;
  height: auto;
  width: 100%;
  /*width: clamp(200px, 100%, 800px);*/
}
.main-fotograf .video-container iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

@media screen and (min-width: 992px) {
  .main-fotograf {
    padding: 2rem 16rem 4rem 16rem;
  }
}
.main-fotograf__text-container {
  line-height: 1.5em;
  overflow: hidden;
  background: linear-gradient(145deg, #262626, #404040);
  box-shadow: 2px 2px 6px #2b2b2b, -2px -2px 6px #3a3a3a;
}
.main-fotograf__text-container .main-fotograf__title {
  text-align: center;
  letter-spacing: 0.2rem;
  color: var(--secundary);
}

/*# sourceMappingURL=style.css.map */