/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}
/* 2. Remove default margin */
* {
  margin: 0;
}
/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}
body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}
/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}
/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}
/*
  10. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

:root {
    --forground-strong:#fff;
    --forground-regular:#8f8f8f;
    --forground-light:#3F3F3F;
    --background-contrast:#131313;
    --border:#3F3F3F;
    --background:#000;
    --highlight:#E44C00;
    --column-gap: 56px;
}

::selection {
    background: var(--background-contrast);
    color: var(--highlight);
}

@font-face {
  font-family: "Title";
  src: url("./assets/InriaSans-Bold.ttf") format("truetype");
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Text";
  src: url("./assets/Hack-Regular.ttf") format("truetype");
  font-style: normal;
  font-display: swap;
}

h1 {
    color: var(--forground-strong);
    font-family: "Title", sans-serif;
    font-size: 1.375rem;
}

h2 {
    color: var(--forground-strong);
    font-family: "Text", sans-serif;
    font-size: 2.5rem;
    font-weight: 400;
    grid-column: span 3;
    height: fit-content;
    line-height: 1.2;
    margin-bottom: 16px;

    & span {
        display: inline-block;
        color: var(--forground-regular);
        font-size: 0.75rem;
    }
}

h3 {
    color: var(--forground-strong);
    font-family: "Text", sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
}

h4 {
    color: var(--forground-regular);
    font-family: "Text", sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
}

p {
    color: var(--forground-strong);
    font-family: "Text", sans-serif;
}

a {
    display: inline-block;
    color: var(--forground-regular);
    font-family: "Text", sans-serif;
    font-size: 0.75rem;
    transition: all 200ms;

    &:hover {
        color: var(--highlight);
    }
}

body {
    background: #000;
    display: grid;
    grid-template-columns: minmax(8px, 256px) minmax(320px, 1280px) auto;
    grid-template-rows: auto 1fr 256px;
    grid-template-areas: 
        "side header"
        "side main"
        "side footer";
    width: auto;
    height: 100svh;
    @media (max-width: 1600px) {
        grid-template-columns: minmax(8px, 128px) minmax(320px, 1280px) auto;
    }
    @media (max-width: 650px) {
        grid-template-columns: minmax(8px, 32px) minmax(320px, 1280px) auto;
    }
}

.side {
    grid-area: side;
    border-right: 1px solid var(--border);: 
}

header {
    position: relative;
    height: fit-content;
    padding: 32px;
    grid-area: header;

    & img {
        position: absolute;
        bottom: -12px;
        left: -12px;
        background: var(--background);
    }
}

main {
    column-gap: var(--column-gap);
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    grid-auto-rows: max-content;
    row-gap: 80px;
    height: auto;
    padding: 64px 32px;
    grid-area: main;
    box-sizing: border-box;

    & .wrapper {
        grid-column: span 2;
        grid-row: 2;
        @media (max-width: 1280px) {
            grid-column: span 3;
        }

        & p {
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.65;
            margin-bottom: 24px;
        }
    }

    & .title {
        display: grid;
        grid-column: span 3;
        grid-row: 1;
        grid-template-columns: subgrid;
       
        & p {
            grid-column: span 3;
            font-size: 0.8125rem;
            font-weight: 400;
            line-height: 1.25;
            color: var(--forground-light);

            & .bfwrong {
                display: inline-block;
            }

            & .bfright {
                display: inline-block;
                color: var(--forground-regular);
            }
        }   
    }

    & .line {
        grid-column: span 1;
        grid-row: 3;
        background-image: url("./assets/line.svg");
        background-repeat: repeat-x;
        background-size: 5px 8px;
        background-position: -2px 0;
        height: 8px;

        @media (max-width: 650px) {
            grid-column: span 2;
        }
    }

    & .profiles {
        display: flex;
        flex-wrap: wrap;
        grid-row: 3; 
        grid-column: span 3;
        column-gap: var(--column-gap);
        row-gap: 48px;
    }

    & .card {
        display: flex;
        flex-grow: 1;
        width: 300px;
        gap: 16px;

        & img {
            width: 96px;
            height: 96px;
            border-radius: 50%;
        }

        & .content {
            padding-top: 8px;
        }

        & a {
            display: inline-block;
            margin-top: 8px;
        }
    }
}

footer {
    align-self: end;     
    height: fit-content;
    grid-area: footer;
    padding: 64px 32px;

    & p {
        font-family: "Title", sans-serif;
        font-size: 1.375rem;
        line-height: 1.0;
    }

    & span {
        color: var(--forground-regular);
        font-family: "Text", sans-serif;
        font-size: 0.75rem;
        font-weight: 400;
    }
}

/*Glitch Effect */

.glitch {
    background: var(--background); /* fallback to black */
    margin: 0 auto;
    position: relative;
    &::before,
    &::after {
        animation-direction: alternate-reverse;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        clip: rect(0, 900px, 0, 0);
        content: attr(data-text);
        overflow: hidden;
        position: absolute;
        top: 0;
    }
    &::after {
        animation-duration: 4s;
        animation-name: glitch-animation;
        left: 4px;

    }
    &::before {
        animation-name: glitch-animation-2;
        animation-duration: 6s;
        left: -4px;
        background: var(--background);
    }
}

@keyframes glitch-animation {
  0%   { clip: rect(38px, 9999px, 43px, 0); }
  5%   { clip: rect(15px, 9999px, 62px, 0); }
  10%  { clip: rect(50px, 9999px, 32px, 0); }
  15%  { clip: rect(39px, 9999px, 78px, 0); }
  20%  { clip: rect(61px, 9999px, 35px, 0); }
  25%  { clip: rect(28px, 9999px, 57px, 0); }
  30%  { clip: rect(84px, 9999px, 79px, 0); }
  35%  { clip: rect(17px, 9999px, 23px, 0); }
  40%  { clip: rect(32px, 9999px, 65px, 0); }
  45%  { clip: rect(22px, 9999px, 70px, 0); }
  50%  { clip: rect(60px, 9999px, 96px, 0); }
  55%  { clip: rect(8px, 9999px, 52px, 0); }
  60%  { clip: rect(77px, 9999px, 34px, 0); }
  65%  { clip: rect(51px, 9999px, 30px, 0); }
  70%  { clip: rect(31px, 9999px, 101px, 0); }
  75%  { clip: rect(48px, 9999px, 72px, 0); }
  80%  { clip: rect(20px, 9999px, 89px, 0); }
  85%  { clip: rect(58px, 9999px, 82px, 0); }
  90%  { clip: rect(42px, 9999px, 53px, 0); }
  95%  { clip: rect(35px, 9999px, 24px, 0); }
  100% { clip: rect(7px, 9999px, 95px, 0); }
}

@keyframes glitch-animation-2 {
  0%   { clip: rect(68px, 9999px, 103px, 0); }
  5%   { clip: rect(55px, 9999px, 78px, 0); }
  10%  { clip: rect(82px, 9999px, 88px, 0); }
  15%  { clip: rect(78px, 9999px, 12px, 0); }
  20%  { clip: rect(70px, 9999px, 65px, 0); }
  25%  { clip: rect(10px, 9999px, 83px, 0); }
  30%  { clip: rect(4px, 9999px, 69px, 0); }
  35%  { clip: rect(90px, 9999px, 33px, 0); }
  40%  { clip: rect(27px, 9999px, 94px, 0); }
  45%  { clip: rect(82px, 9999px, 75px, 0); }
  50%  { clip: rect(75px, 9999px, 78px, 0); }
  55%  { clip: rect(6px, 9999px, 50px, 0); }
  60%  { clip: rect(33px, 9999px, 22px, 0); }
  65%  { clip: rect(63px, 9999px, 48px, 0); }
  70%  { clip: rect(44px, 9999px, 65px, 0); }
  75%  { clip: rect(9px, 9999px, 86px, 0); }
  80%  { clip: rect(51px, 9999px, 76px, 0); }
  85%  { clip: rect(5px, 9999px, 35px, 0); }
  90%  { clip: rect(28px, 9999px, 58px, 0); }
  95%  { clip: rect(45px, 9999px, 94px, 0); }
  100% { clip: rect(40px, 9999px, 52px, 0); }
}