:root {
    --main-bg-color: #711515;
    --main-text-color: #111;
    --main-text-headline-color: #fae686;
    --main-card-bg: #fae686;
    --border-radius-l: 2rem 2rem 2rem 0;
    --border-radius-r: 2rem 2rem 0 2rem;
    --hover-x: .5;
    --hover-y: .5;
}

@font-face {
    font-family: 'Nabla';
    src: local('Nabla'), url('../fonts/Nabla.woff') format('woff') tech(color-COLRv1), url('../fonts/Nabla.ttf') format('truetype')
}

@font-face {
    font-family: 'Ultra';
    src: local('Ultra'), url('../fonts/Ultra.woff') format('woff'), url('../fonts/Ultra.ttf') format('truetype')
}

@font-face {
    font-family: 'SpecialElite';
    src: local('SpecialElite'), url('../fonts/SpecialElite.woff') format('woff'), url('../fonts/SpecialElite.ttf') format('truetype')
}

@font-face {
    font-family: 'ProtestGuerrilla';
    src: local('ProtestGuerrilla'), url('../fonts/ProtestGuerrilla.woff') format('woff'), url('../fonts/ProtestGuerrilla.ttf') format('truetype')
}

@font-face {
    font-family: 'RubikGlitchPop';
    src: local('RubikGlitchPop'), url('../fonts/RubikGlitchPop.woff') format('woff'), url('../fonts/RubikGlitchPop.ttf') format('truetype')
}

@font-face {
    font-family: 'Fredoka';
    src: local('Fredoka'), url('../fonts/Fredoka.woff') format('woff'), url('../fonts/Fredoka.ttf') format('truetype')
}

@font-face {
    font-family: 'Kreon';
    src: local('Kreon'), url('../fonts/Kreon.woff') format('woff'), url('../fonts/Kreon.ttf') format('truetype')
}

body {
    font-family: "SpecialElite";
    background: var(--main-bg-color);
    color: var(--main-text-color);
}

h1,
h2,
h3 {
    font-family: "ProtestGuerrilla";
    color: var(--main-text-headline-color);
}

h1 {
    transform: rotate(-5deg);
    font-size: 5rem;
}

h2 {
    margin-top: 6rem;
    margin-bottom: 1rem;
    font-size: 3rem;
}

section {
    container-type: inline-size;
    max-width: 2024px;
    margin-left: 10dvw;
    margin-right: 10dvw;
}

.content-grid {
    display: grid;
    grid-auto-flow: row dense;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.54rem;

    h2 {
        grid-column: 1 / -1;
        color: --main-text-headline-color;
    }

    perspective: 100cm;
}

@container (min-width: 1000px) {
    .content-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@container (min-width: 1500px) {
    .content-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@container (min-width: 2000px) {
    .content-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

card {
    grid-column-end: span 1;
    display: flex;
    border: 3px solid #fae686;
    border-radius: var(--border-radius-l);
    flex-direction: column;
    overflow: hidden;
    background: var(--main-card-bg, #333);
    transform: rotate3d(0);
    transition: transform 1s ease-in-out;
    transform-style: preserve-3d;

    img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

    .text {
        padding: 1.5rem;
    }
}

card:has(dialog)::after {
    content: url('../open-modal.svg');
    position: absolute;
    top:.25rem;
    right:.25rem;
    width: 4rem;
    height: 4rem;
  }
  card.imgbot:has(dialog)::after {
    bottom:.25rem;
    top: unset;
  }
card.c2 {
    grid-column-end: span 2;
}

card:hover {
    transform-style: preserve-3d;
    transition: transform .3s ease-out;
    transform: rotateX(var(--hover-y)) rotateY(var(--hover-x)) translateZ(-20px);
}




/* modals */
dialog::backdrop {
    background: #0007;
    backdrop-filter: blur(10px);
  }
  
  @keyframes animate-in {
    from {
          top:-30px; 
          opacity:0;
          transform: scale(0.8)
      } 
      to {
          top:0; 
          opacity:1;
          transform: scale(1)
      }
  }
  
  dialog {
    overflow: hidden;
    animation-name: animate-in;
    animation-duration: 0.4s;
    background-color: var(--main-card-bg, yellow);
    border: 3px solid #fae686;
    padding: 0;
    border-radius: var(--border-radius-l);

  }
  
  .modal-content {
    position: relative;
    background-color: var(--main-card-bg, yellow);
    margin: auto;
    padding: 0;
    border: 1px solid #888;

    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    
  }
  
  .modal-header {
    padding: 2px 16px;
    background-color: #000;
    color: #FFF;
  }
  
  .close {
    color: #FFF;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
  }
    
  .container {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 3rem;
  }
  
  button {
      border: 0;
      display: inline-block;
      font-size: 14px;
      border-radius: 4px;
      cursor: pointer;
      background-color: #1064EA;
      color: var(--main-card-bg, yellow);
      img {
        width: 50px;
        height: 50px;
      }
  }
  
  
/* end modal*/  


.bg-animation {
    z-index: -20;
    position: fixed;
    top: 0;
    left: 0;
    width: 100dvw;
    height: 100dvh;
    overflow: hidden;
    background: linear-gradient(-45deg, #52d7ee, #251196, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 45s ease infinite;

    img {
        width: 300%;
        height: 300%;
        object-fit: cover;
        mix-blend-mode: screen;
    }

    :nth-child(1) {
        position: absolute;
        opacity: 0;
        animation: 70s ease infinite oil2;
    }

    :nth-child(2) {
        position: absolute;
        opacity: 0;
        animation: 90s ease infinite oil1;
    }
}

@keyframes oil1 {
    0% {
        transform: translate(-50%, -50%) scale(.85) rotate(5deg);
        opacity: .05;
    }

    5% {
        opacity: .1;

    }

    45% {
        transform: translate(-45%, -55%) scale(1.2) rotate(4deg);
    }

    50% {
        opacity: .15;
    }

    55% {
        transform: translate(-55%, -50%) scale(.8) rotate(-2deg);
    }

    100% {
        transform: translate(-50%, -50%) scale(.85) rotate(5deg);
        opacity: .05;

    }
}

@keyframes oil2 {
    0% {
        transform: translate(-50%, -50%) scale(.95) rotate(5deg);
        opacity: .05;
    }

    30% {
        transform: translate(-60%, -45%) scale(1.1) rotate(-1deg);
        opacity: .1;
    }

    50% {
        opacity: .5;
    }

    60% {
        transform: translate(-45%, -55%) scale(1.3) rotate(7deg);
        opacity: .01;
    }

    100% {
        transform: translate(-50%, -50%) scale(.95) rotate(5deg);
        opacity: .05;
    }
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}