/* GOOGLE FONTS */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

/* CSS RESET */
/* html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;}table {border-collapse: collapse;border-spacing: 0;} */

:root {

    --primary-color:#a97ff7;
    --primary-color-stronger:#c55af6;
}


body { background-image:url(images/background.jpg); background-repeat:repeat; box-sizing:border-box; color:#fff; font-family:'Source Sans 3', sans-serif; font-size:18px; color:#e1e1e1; }



/* Elements */
h1 { font-size:2.75em; }
a { text-decoration:none; color:#fff; transition:color ease-in-out .3s; 
    &:hover { color:var(--primary-color-stronger); }
}

h1, h2 { color:#fff; }


.wrapper { height:100vh; scroll-snap-type:y mandatory; overflow-y:scroll; scroll-behavior:smooth; -ms-scrollbar-width:none; scrollbar-width:none; position:relative;
    header { z-index:10; }
}

header { height:80px; width:100%; background-color:#21212100; position:fixed; display:flex; justify-content:center; align-items:center; z-index:1; }

section { display:flex; min-height:100vh; height:auto; scroll-snap-align:start; scroll-snap-stop:always; justify-content:center; align-items:center; transition:all ease-in-out 0.5s; }
section:nth-of-type(1) { background-color:rgba(1,1,1,0.1); }
section:nth-of-type(2) { background-color:rgba(1,1,1,0.2); }
section:nth-of-type(3) { background-color:rgba(1,1,1,0.3); }
section:nth-of-type(4) { background-color:rgba(1,1,1,0.4); }
section:nth-of-type(5) { background-color:rgba(1,1,1,0.5); }
section:nth-of-type(6) { background-color:rgba(1,1,1,0.6); }
section:nth-of-type(7) { background-color:rgba(1,1,1,0.7); }
section:nth-of-type(8) { background-color:rgba(1,1,1,0.8); }
section:nth-of-type(9) { background-color:rgba(1,1,1,0.9); }


.skillset { display:grid; grid-template-columns:repeat(6, 1fr); gap:10px; grid-auto-rows:minmax(100px, auto); justify-content:center; 
    .skill { display:flex; justify-content:center; align-items:center; margin-bottom:2em; }
}

.animation { animation: test; animation-timeline: view(block); transition:  all ease-in-out .3s; overflow: hidden; }


/* Test */
.inViewport { color:var(--primary-color); transition:color ease-in-out .7s; }


@keyframes test { 0% { scale: 1.4; opacity:0; } 50% { scale: 1; opacity:1; } 100% { scale: 1.2; opacity:0; } }


@media all and (max-width: 768px) { 
    .wrapper { scroll-snap-type:none; }
    .skillset { grid-template-columns:repeat(3, 1fr); }
    section:nth-of-type(1),
    section:nth-of-type(2),
    section:nth-of-type(3),
    section:nth-of-type(4),
    section:nth-of-type(5) { background-color:rgba(1,1,1,0.1); }
}




/* https://codepen.io/aldrie/pen/PojGYLo */
.stack { display:grid; grid-template-columns:1fr; }
.stack span { font-weight:bold; grid-row-start:1; grid-column-start:1; font-size:inherit; --stack-height: calc(100% / var(--stacks) - 1px); --inverse-index: calc(calc(var(--stacks) - 1) - var(--index)); --clip-top: calc(var(--stack-height) * var(--index)); --clip-bottom: calc(var(--stack-height) * var(--inverse-index)); clip-path: inset(var(--clip-top) 0 var(--clip-bottom) 0); animation: stack 340ms cubic-bezier(.46,.29,0,1.24) 1 backwards calc(var(--index) * 120ms), glitch 2s ease infinite 2s alternate-reverse;
}
.stack span:nth-child(odd) { --glitch-translate: 8px; }
.stack span:nth-child(even) { --glitch-translate: -8px; }
@keyframes stack {
    0% {
        opacity: 0;
        transform: translateX(-50%);
        text-shadow: -2px 3px 0 red, 2px -3px 0 blue;
    };
    60% {
        opacity: 0.5;
        transform: translateX(50%);
    }
    80% {
        transform: none;
        opacity: 1;
        text-shadow: 2px -3px 0 red, -2px 3px 0 blue;
    }
    100% {
        text-shadow: none;
    }
}
@keyframes glitch {
    0% {
        text-shadow: -2px 3px 0 red, 2px -3px 0 blue;
        transform: translate(var(--glitch-translate));
    }
    2% {
        text-shadow: 2px -3px 0 red, -2px 3px 0 blue;
    }
    4%, 100% {  text-shadow: none; transform: none; }
}



#dotCanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("images/background.jpg") center center repeat; pointer-events: none; z-index: -1;
}