/* CSS RESET */

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


/* VARIABLES */

body {
  /* sets wrapper */
  --wrap: 1152px;
  --wrap-m: 100%;
  /* sets background color */
  background-color: #f1f1f1;
  /* sets navigation background color */
  --nav-bg-color: rgba(255, 255, 255, 0.72);
  /* set accent style */
  --accent-color: #5015d7;
  --accent-color-hover: #662cec;
  /* colors */
  --grey01: #585858;
  --grey02: #9b9b9b;
  /* padding on sides */
  --padding-area: 24px;
}


footer, header, .wrap {
  padding-left: var(--padding-area);
  padding-right: var(--padding-area);
}

.navBG {
  z-index: 999;
  width: 100%;
  padding-top: var(--padding-area);
  padding-bottom: var(--padding-area);
  position: fixed;
  background-color: var(--nav-bg-color);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(24px);
}

main {
  padding-top: 72px;
}

section {
  padding: 40px 0px;
}

/* GRID SYSTEM */

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  height: inherit;
}

[class*="grid-"] {
  display: grid;
  gap: 16px;
}

.grid-01 {grid-template-columns: repeat(1, 1fr);}
.grid-02 {grid-template-columns: repeat(2, 1fr);}
.grid-03 {grid-template-columns: repeat(3, 1fr);}
.grid-04 {grid-template-columns: repeat(4, 1fr);}

.grid-article {
  grid-template-columns: 610px 1fr;
}

.grid-c {
  align-items: center;
}

.gap-72 {gap: 72px;}
.gap-80 {gap: 80px;}

/* POSITIONING */

.centr {
  margin: 0 auto;
}

[class*="flex-"] {
  display: flex;
}

[class*="flex-t"] {
  align-items: flex-start;
  align-content: flex-start;
}

[class*="flex-c"] {
  align-items: center;
  align-content: center;
}
[class*="flex-b"] {
  align-items: flex-end;
  align-content: flex-end;}
.flex-t-l, .flex-c-l, .flex-b-l {justify-content: flex-start;}
.flex-t-c, .flex-c-c, .flex-b-c, .flex-baseline {justify-content: center;}
.flex-t-r, .flex-c-r, .flex-b-r {justify-content: flex-end;}
.flex-baseline {
  align-items: baseline;
  align-content: center;
}
.flex-column {flex-direction: column;}
.flex-wrap {flex-wrap: wrap;}
.flex-dist {justify-content: space-between;}
.flex-align-top {align-self: flex-start;}
.flex-align-bottom {align-self: flex-end;}


/* TYPO Scale */

* {
  font-family: "Poppins-Regular", sans-serif;
  font-style: light;
  font-weight: 300;
  color: #272727;
}

a {
  cursor: pointer;
  text-decoration: none;
}

a:hover {
  color: var(--accent-color);
}

h1 {
  font-size: 40px;
  line-height: 48px;
  padding-bottom: 16px;
}

h2 {
  font-size: 32px;
  line-height: 40px;
  margin-bottom: 16px;
}

h3 {
  font-size: 24px;
  line-height: 32px;
  margin-bottom: 8px;
}

p {
  font-weight: 100;
  font-size: 16px;
  line-height: 24px;
}

.welcome-txt {
  font-size: 38px;
  line-height: 46px;
}

.legal-txt {
  font-size: 14px;
  line-height: 16px;
}

ul {
  list-style-type: none; /* Remove default bullet points */
}

ul li::before {
  content: "\2014"; /* Unicode for dash symbol */
  margin-right: 5px; /* Adjust as needed for spacing */
}

/* TYPO Style */

.bold {
  font-family: "poppins-semibold";
  font-weight: 500;
}

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

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

p span:nth-child(2n) {
  color: var(--grey01);
}

.noDeco {
  text-decoration: none;
}

/* TYPO Align */

.txtcentr {text-align: center;}
.txtleft {text-align: left;}
.txtright {text-align: right;}
.txtjust {text-align: justify;}

/* TYPO Spacing */

.sp08 {margin-bottom: 8px;}
.sp16 {margin-bottom: 16px;}
.sp24 {margin-bottom: 24px;}
.sp32 {margin-bottom: 32px;}

/* BUTTONS */

[class*="button-"] {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 16px;
  transition: 160ms ease-in-out;
  cursor: pointer;
  margin-bottom: 8px;
}

.button-primary {
  background-color: var(--accent-color);
}

.button-primary:hover {
  background-color: var(--accent-color-hover);
}

.button-primary p {
  color: white;
}

.button-secondary {
  background-color: rgba(0, 0, 0, 0.05);
}

.button-secondary:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

/* About Me Section */

.smallIco {
  margin-right: 4px;
}

.smallIco:hover {
  transform: scale(1.1);
  transition: all 160ms ease-in-out;
}

/* work cards */

.cardTitle {
  font-size: 34px;
  line-height: 42px;
  color: white;
}

.work-card {
  padding: 32px;
  border-radius: 24px;
  transition: opacity 400ms linear;
  min-height: 320px;
}

.work-card p {
  color: white;
}

.work-card div {
  width: 100%;
}

/* Images */

[class*="img-"], [class*="ico-"], [class*="gallery-"], [class*="cover-"] {
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

[class*="img-0"], [class*="gallery-"] {
  background-size: cover;
}

.video {
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 32px;
  animation: videoFlicker 45s infinite;
}

/*
@keyframes videoFlicker {
  0% {box-shadow: 0px 10px 160px -24px rgba(85, 24, 227, 0.6);}
  10% {box-shadow: 0px 10px 240px -34px rgba(70, 14, 252, 0.6);}
  30% {box-shadow: 0px 10px 80px -8px rgba(85, 24, 227, 0.6);}
  50% {box-shadow: 0px 20px 420px -8px rgba(85, 24, 227, 0.6);}
  52% {box-shadow: 0px 20px 280px -20px rgba(85, 24, 227, 0.6);}
  54% {box-shadow: 0px 8px 30px -8px rgba(85, 24, 227, 0.6);}
  60% {box-shadow: 0px 20px 134px -12px rgba(153, 24, 227, 0.6);}
  68% {box-shadow: 0px 20px 140px -22px rgba(4, 142, 59, 0.6);}
  72% {box-shadow: 0px 8px 38px -8px rgba(85, 24, 227, 0.6);}
  74% {box-shadow: 0px 8px 47px -8px rgba(85, 24, 227, 0.6);}
  78% {box-shadow: 0px 8px 24px -18px rgba(248, 140, 32, 0.6);}
  84% {box-shadow: 0px 20px 123px -12px rgba(85, 24, 227, 0.6);}
  100% {box-shadow: 0px 10px 160px -24px rgba(85, 24, 227, 0.6);}
}*/

.img-video {
  cursor: pointer;
  background-image: url(../media/video-cover-desktop.webp);
  background-size: cover;
}

.img-cover {
  background-image: url(../media/main-img.webp);
  background-size: contain;
  min-height: 560px;
  animation: float 15s ease-in-out infinite;
}


/*
@keyframes float {
  0% {transform: translatey(0px);}
  20% {transform: translatey(6px);}
  60% {transform: translatey(-12px);}
  68% {transform: translatey(-18px);}
  80% {transform: translatey(-16px);}
  100% {transform: translatey(0px);}
}*/

.img-01 {background-image: url(../media/work-Istyle.webp);}
.img-02 {background-image: url(../media/work-docler.webp);}
.img-03 {background-image: url(../media/work-diligent.webp);}
.img-04 {background-image: url(../media/work-otp.webp);}
.img-05 {background-image: url(../media/work-trenkwalder.webp);}
.img-06 {background-image: url(../media/work-epam.webp);}



/* ARTICLE IMAGES */

.gallery-cover {
  border-radius: 0px;
  height: 680px;
}

.cover-01 {
  background-image: url(../media/trnk/cover.webp);
  background-size: cover;
}

.cover-01-otp {
  background-image: url(../media/otp/cover.webp);
  background-size: cover;
}

[class*="gallery-0"] {
  height: 612px;
  box-shadow: 0px 6px 12px -5px rgba(0, 0, 0, 0.08), 0px 16px 64px -8px rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  margin-left: -24px;
  margin-right: -24px;
}


/*trenkwalder*/

.gallery-01 {background-image: url(../media/trnk/trk01.webp);}
.gallery-02 {background-image: url(../media/trnk/trk02.webp);}
.gallery-03 {background-image: url(../media/trnk/trk03.webp);}
.gallery-04 {background-image: url(../media/trnk/trk04.webp);}
.gallery-05 {background-image: url(../media/trnk/trk05.webp);}
.gallery-06 {background-image: url(../media/trnk/trk06.webp);}
.gallery-07 {background-image: url(../media/trnk/trk07.webp);}
.gallery-08 {background-image: url(../media/trnk/trk08.webp);}

/*otp*/
.gallery-01-otp {background-image: url(../media/otp/otp-01.webp);}

/* MOBILE */

@media only screen and (max-width: 768px) {
  body {
    --wrap: var(--wrap-m);
  }
  
  [class*="grid-"] {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 16px;
  }

  .work-card {
    padding: 24px;
    margin: -2px -8px;
    height: 365px;
  }

  .img-cover {
    min-height: 360px;
    margin: 0px -16px;
  }

  .img-video {
    background-image: url(../media/video-cover-mobile.webp);
  }

  .video {
    margin: -8px -8px;
    width: calc(100% + 16px);
    border-radius: 16px;
  }

  @keyframes videoFlicker {
    0% {box-shadow: 0px 10px 30px -8px rgba(85, 24, 227, 0.6);}
    10% {box-shadow: 0px 10px 88px -12px rgba(70, 14, 252, 0.6);}
    30% {box-shadow: 0px 10px 30px -8px rgba(85, 24, 227, 0.6);}
    50% {box-shadow: 0px 20px 30px -8px rgba(85, 24, 227, 0.6);}
    52% {box-shadow: 0px 20px 120px -20px rgba(85, 24, 227, 0.6);}
    54% {box-shadow: 0px 8px 10px -8px rgba(85, 24, 227, 0.6);}
    60% {box-shadow: 0px 20px 56px -12px rgba(153, 24, 227, 0.6);}
    68% {box-shadow: 0px 20px 72px -22px rgba(4, 142, 59, 0.6);}
    72% {box-shadow: 0px 8px 10px -8px rgba(85, 24, 227, 0.6);}
    74% {box-shadow: 0px 8px 30px -8px rgba(85, 24, 227, 0.6);}
    78% {box-shadow: 0px 8px 10px -10px rgba(248, 140, 32, 0.6);}
    84% {box-shadow: 0px 20px 72px -12px rgba(85, 24, 227, 0.6);}
    100% {box-shadow: 0px 10px 30px -8px rgba(85, 24, 227, 0.6);}
  }

  [class*="img-0"] {
    min-height: 280px;
  }

  [class*="gallery-0"] {
    height: 220px;
    margin-left: -16px;
    margin-right: -16px;
  }

  .gallery-cover {
    width: 100%;
    margin-bottom: -8px;
    height: 440px;
  }

  .cover-01 {background-image: url(../media/trnk/cover-mobile.webp);}
  .cover-01-otp {background-image: url(../media/otp/cover-mobile.webp);}

  .switchorder div:nth-of-type(2) {
    order: 1;
  }

  .switchorder div:nth-of-type(1) {
    order: 2;
  }
}

/* Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (orientation: landscape) {
  body {
    /* padding on sides */
    --padding-area: 48px;
  }

  .navBG {
    padding: 16px 0px;
  }

  [class*="img-cover"] {
    min-height: 370px;
  }

  [class*="img-0"] {
    min-height: 260px;
  }

  h1 {
    font-size: 32px;
    line-height: 40px;
  }

  .work-card {
    padding: 24px;
  }
}

/* DARK MODE */
@media (prefers-color-scheme: dark) {
  * {
    color: #ffffff;
  }

  body {
    /* sets background color in dark mode */
    background-color: #111111;
    /* sets navigation background color */
    --nav-bg-color: #32323278;
    /* set accent style */
    --accent-color: #9263fe;
    --accent-color-hover: #662cec;
    /* colors */
    --grey01: #a0a0a0;
  }

  /* BUTTONS */
  .button-secondary {
    background-color: rgba(255, 255, 255, 0.05);
  }

  .button-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }
}