:root {
    --gradient-rotation : -2deg;
    --card-opposite     : 10px;
    --column-background : linear-gradient(179deg, #ffffff00 300px, #fff 600px);
    --background        : whitesmoke;
    --color             : #000;
    --blend-mode        : multiple;
}

body {
    margin      : 0;
    display     : flex;
    font-size   : 18px;
    font-family : sans-serif;
    background  : var(--background);
    color       : var(--color);
}

.gradient {
    position       : absolute;
    top            : 0;
    left           : 0;
    width          : 100%;
    min-width      : 1000px;
    height         : 300px;
    background     : linear-gradient(90deg, #3a47d5, #00d2ff);
    clip-path      : polygon(0 0, 100% 0, 100% 80%, 0 100%);
    mix-blend-mode : var(--blend-mode);
}

.container {
    display         : flex;
    justify-content : center;
    width           : 100vw;
    z-index         : 2;
}

.column {
    width          : 80vw;
    max-width      : 1200px;
    min-width      : min(1000px, 100vw);
    min-height     : 100vh;
    background     : var(--column-background);
    mix-blend-mode : screen;
}

header {
    display : flex;
    height  : 300px;
    /* position: fixed; */
}

.logo {
    font-family         : monospace;
    font-weight         : bold;
    color               : #fff;
    font-size           : 2em;
    align-self          : center;
    justify-self        : center;
    margin-inline-start : 1em;
    margin-block-end    : .7em;
}

section {
    padding-inline : 3em;
}

h1 {
    font-family   : monospace;
    font-size     : 2em;
    border-top    : 0;
    border-left   : 0;
    border-right  : 0;
    border-bottom : 2px solid;
    transform     : rotate(var(--gradient-rotation));
    border-image  : linear-gradient(90deg, #3a47d5, #00d2ff) 1;
    margin-block  : 1.5em;
    /*background : linear-gradient(90deg, #3a47d5, #00d2ff);*/
    /*padding : 0.5em;*/
    /*color : #fff;*/
}

p {
    font-size   : 1.2em;
    transform   : rotate(var(--gradient-rotation));
    line-height : 1.5em;
}

ul {
    transform : rotate(var(--gradient-rotation));
}

li {
    line-height : 1.6em;
    font-size   : 1.1em;
}

a {
    color : #3744cc;
}

a:hover {
    color : #293399;
}

.cards {
    display               : grid;
    grid-template-columns : repeat(auto-fit, minmax(300px, 1fr));
    grid-gap              : 1em;
    font-size             : 1.2em;
    margin-block          : 3em;
}

.cards a {
    text-decoration : none;

    transition      : transform .2s;
}

.cards a:hover {
    color     : #fff;

    transform : rotate(calc(-1 * var(--gradient-rotation)));
}

.card {
    display        : flex;
    background     : linear-gradient(90deg, #3a47d5 -100px, #00d2ff 400px);
    color          : #fff;
    clip-path      : polygon(0 var(--card-opposite), 100% 0, 100% calc(100% - var(--card-opposite)), 0 100%);
    flex-direction : column;
}

.card div {
    background     : #FFF;
    height         : 50px;
    mix-blend-mode : soft-light;
    clip-path      : polygon(0 0, 100% 0, 100% calc(100% - var(--card-opposite)), 0 100%);
}

.card p {
    padding-inline : 1em;
    margin-block   : .5em;
}

.card p:first-of-type {
    flex : 1;
}

.card p:last-child {
    font-size     : .7em;
    text-align    : right;
    margin-bottom : 1em;
}


@media (prefers-color-scheme : dark) {
    :root {
        --column-background : #ffffff15;
        --background        : #000;
        --color             : #fff;
        --blend-mode        : normal;
    }

    .gradient {
        background : linear-gradient(90deg, #6565d6, #33daff);
    }

    .card {
        background : linear-gradient(90deg, #6565d6 -100px, #33daff 400px);
    }

    .card div {
        background : #000;
    }
}