@charset "UTF-8";

/* ////////////////// CSS RESET ////////////////// */


/*
  1. Remove built-in form typography styles
*/
input, button, textarea, select {
  font: inherit;
}
/*
  2. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
/*
  3. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

/* ////////////////// CSS RESET ////////////////// */

:root {
    --auk-white: #ffffff;
    --auk-orange: #ff3600;
    --auk-lightorange: rgba(255,96,0,1);
    --auk-yellow: #ffc519;
    --auk-red: #ed7b7a;
    --auk-green: #ade29a;
    --auk-blue: #4cbaeb;
    --auk-grey: #2b2c31;
    --auk-black: #000000;

    --auk-font: Arial;

    --fs-xl: clamp(1.2rem, 4vw, 5rem);
    --fs-h1: 7vw;
    --fs-h2: 4vw;
    --fs-h3: 2vw;
    --fs-button: clamp(1rem, 2vw, 2rem);
    --fs-text: 2vw;
    
    --width-sidebar: 80vw;

    --width-card: 300px;
    --height-card: 450px;

    --animation-time: 400ms;
}

*{
    font-family: var(--auk-font);
    font-weight: 800;
    margin: 0;
    padding: 0;
}

h1 {
  font-size: var(--fs-h1);
  text-transform: uppercase;
  margin-top: 4vw;
  margin-bottom: 4vw;
}

h2 {
  font-size: var(--fs-h2);
  margin:2rem 0 2rem 0 ;
}

h3 {
  font-size: var(--fs-h3);
}

.content-text {
  font-size: var(--fs-text);
}

html, body {
  width: 100vw;
  height: 100vh;
  position: relative;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

.menu-button{
    position: fixed;
    top: 3em;
    left: 3em;
    background: transparent;
    border: 0;
    transition: transform ease-out var(--animation-time);
    cursor: pointer;
    z-index: 10;
}

.arrow {
    height: 3rem;
}

.nav-img {
    height: clamp(85px, 10vw, 149px);
}

.nav-social-icons img {
    height: clamp(1.3rem, 4vw, 3rem);
    margin-right: 0.5vw;
}

nav {
    position: fixed;
    top: 0px;
    background-color: var(--auk-grey);
    height: 100vh;
    text-transform: uppercase;
    width: var(--width-sidebar);
    padding-left: 3em;
    padding-top: 5em;
    transform: translateX(-100%);
    transition: transform ease-out var(--animation-time);
    z-index: 5;
}

nav div{
    margin-bottom: clamp(1rem, 2vw, 3rem);
}

nav ul li {
    list-style: none;
    color: var(--auk-orange);
    font-size: var(--fs-xl);
}

nav a {
    text-decoration: none;
    color: var(--auk-blue);
}

.nav-is-open {
    nav{
        transform: translateX(0);
    }
    
    .menu-button {
        transform: translateX(calc(var(--width-sidebar) - 5rem)) rotate(180deg);
    }
}

.logo {
  width: 30vh;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

video {
    object-fit: cover;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -100;
  }

main {
  position: relative;
  padding: 0rem;
  margin-top: 100vh;
  z-index: 3;
}
  
section {
    margin: auto;
    scroll-margin-top: 50px;
    padding: 2rem;
} 

#hello {
    color: var(--auk-white);
    background: linear-gradient(90deg, var(--auk-orange) 0%, var(--auk-lightorange) 51%, var(--auk-orange) 100%);
  }

  #about {
    color: var(--auk-grey);
    background-color: var(--auk-white);
  }

  #projects {
    color: var(--auk-white);
    background-color: var(--auk-grey);
  }

  #kunden {
    color: var(--auk-grey);
    background-color: var(--auk-white);
  }

/* ////////////////// CUSTOMER LOGO SECTION ////////////////// */

.slideshow {
  display: grid;
  place-items: center;
}

.customer-logos {
  height: 300px;
  width: 500px;
  max-width: 66vw;
  overflow: hidden;
  position: relative;

}

.customer-logo{
  position: absolute;
  height: 100%;
  opacity: 0;
  inset: 0;
  animation: slide-show 12s infinite;
}

.customer-logo-2 {
  animation-delay: 4s;
}

.customer-logo-3 {
  animation-delay: 8s;
}

.customer-logo img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
  object-position: center;
}

@keyframes slide-show {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  20%,
  30% {
    opacity: 1;
    scale: 0.95;
  }
  50% {
    opacity: 0;
  }
}

/* ////////////////// END OF CUSTOMER LOGO SECTION ////////////////// */

  .flex-row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
}

  /* //////////////////BUTTON SECTION ////////////////// */

  .button {
    --border-color: linear-gradient(90deg, var(--auk-orange) 0%, var(--auk-lightorange) 51%, var(--auk-orange) 100%);
    --border-width: .125em;
    --edge-size: .75em;

    font-size: var(--fs-button);
    color: var(--auk-orange);
    text-transform: uppercase;

    position: relative;
    isolation: isolate;
    display: inline-grid;
    margin: 1em 0 1em 0;
    padding: 0.5em 1.5em;
    border: 0;
    clip-path: 
      polygon(
        /* top-left 1 */
        0% var(--edge-size),
        /* top-left 2 */
        var(--edge-size) 0%,
        /*  top-right*/
        100% 0,
        /* bottom-right */
        100% calc(100% - var(--edge-size)),
        /* bottom-right 2 */
        calc(100% - var(--edge-size)) 100%,
        /* bottom-left */
        0 100%
        );
      transition: color 250ms;
  }

  .button::before,
  .button::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .button::before {
    background: var(--border-color);
    z-index: -2;
  }

  .button::after {
    background: var(--auk-grey);
    z-index: -1;
    clip-path: 
    polygon(
      /* top-left 1 */
      var(--border-width)
      calc(var(--edge-size) + var(--border-width) * .5),
      /* top-left 2 */
      calc(var(--edge-size) + var(--border-width) * .5)
      var(--border-width),
      /*  top-right*/
      calc(100% - var(--border-width))
      var(--border-width),
      /* bottom-right 1 */
      calc(100% - var(--border-width))
      calc(100% - calc(var(--edge-size) + var(--border-width) * .5)),
      /* bottom-right 2 */
      calc(100% - calc(var(--edge-size) + var(--border-width) * .5))
      calc(100% - var(--border-width)),
      /* bottom-left */
      var(--border-width)
      calc(100% - var(--border-width))
      );
      transition: clip-path 500ms;
  }

  .button:where(:hover, :focus){
    color: var(--auk-grey);
  }
  .button:where(:hover, :focus)::after{
    clip-path: 
    polygon(
      /* top-left 1 */
      calc(100% - var(--border-width))
      calc(100% - calc(var(--edge-size) + var(--border-width) * .5)),
      /* top-left 2 */
      calc(100% - var(--border-width))
      var(--border-width),
      /*  top-right*/
      calc(100% - var(--border-width))
      var(--border-width),
      /* bottom-right 1 */
      calc(100% - var(--border-width))
      calc(100% - calc(var(--edge-size) + var(--border-width) * .5)),
      /* bottom-right 2 */
      calc(100% - calc(var(--edge-size) + var(--border-width) * .5))
      calc(100% - var(--border-width)),
      /* bottom-left */
      calc(100% - calc(var(--edge-size) + var(--border-width) * .5))
      calc(100% - var(--border-width))
      );
      transition: clip-path 500ms;
  }
/* ////////////////// END OF BUTTON SECTION ////////////////// */

.turned {
  transform: rotate(180deg);
}