@font-face {
  font-family: 'Zodiak';
  src: url('font/Zodiak/Zodiak-Variable.ttf');
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Zodiak';
  src: url('font/Zodiak/Zodiak-VariableItalic.ttf');
  font-display: swap;
  font-style: italic;
}

@font-face {
  font-family: 'Cubic';
  src: url('/davidpages/font/cubic/cubic.ttf');
  font-display: swap;
  font-style: italic;
}

@layer normal, special;

@layer normal {
    :root {
        --link-color: darkcyan;
        --link-hover-color: rgb(126, 107, 255);
    }

    * {
        /* LOL */
        /* animation: rainbow-shift 1.714s linear infinite; */
    }

    ::selection {
        color:cyan;
        background-color: slateblue;
    }

    body {
        background-color:powderblue;
        font-family: 'Zodiak', serif;
        font-size: 1.2em;
    }

    .navbar {
        font-size: smaller;
        font-weight: bold;

        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;

        padding: 2px;

        /* background-color: skyblue; */
        /* background-color:blueviolet; */
        background: 
        linear-gradient(rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%);
        animation: a 3s linear infinite;
        border: 2px solid var(--link-color);
        border-radius: 30px;
        a {
            color: black;
            /* font-family: sans-serif; */
        }
        a:hover {
            color:white;
            text-decoration: 3px dashed underline black;
            /* todo each its own color */
            /* background-color: coral; */
        }
    }

    /* rainbow animation */
    @keyframes a {
    to {background-position:0 -200%}
    /* to {background-position:-100% 200%} */
    }

    .navbar a {
        margin-left: 10px;
        margin-right: 10px;
        text-decoration: none;
    }

    a {
        color: var(--link-color);
        text-decoration: none;
    }

    a:hover {
        color: var(--link-hover-color);
        /* text-decoration: wavy underline orchid; */
        text-decoration: underline;
    }

    .note  {
        color: rgb(58, 104, 146);
        font-style: italic;
        font-weight: 400;
    }

    img {
        /* color: steelblue; */
        display:block;
        margin: auto;
        width: 100%;
        max-width: 700px;
        box-shadow: 0px 0px 31px rgba(0, 0, 0, 0.5);
    }

    /* Force form elements to inherit styles from their parents */
    button, input, select, textarea {
        font-family: inherit;
        font-size: inherit;
        color: inherit;
    }

    .card-container {
        margin-top: 30px;
        margin-bottom: 30px;
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .card {
        padding: 1rem;

        /* background-color: skyblue; */
        background-color: #3bd1ff;
        background-image: url("/davidpages/bg/cross-pattern.png");

        /* border-top-left-radius: 10px; */
        /* border-bottom-right-radius: 10px; */

        border-top-right-radius: 35px;
        border-bottom-left-radius: 35px;

        /* box-shadow: 10px 10px 0px deepskyblue; */
        /* box-shadow: 10px 10px 0px rgb(0, 95, 143); */
        box-shadow: 10px 10px 0px royalblue;

        color:#0051ff;
    }
    .card a {
        color: green;
    }
    .card a:hover {
        /* color: orchid; */
        /* text-shadow: 0.1em 0.1em 0 white; */
        /* background-color: orchid; */

        color: coral;
    }

    .secondary-card {
        padding: 1rem;
        background-color:darkgray;
        border: 6px ridge lightgray;
    }

    .secondary-card a {
        /* color: sienna; */
        all: revert;
    }

    .secondary-card a:hover {
        all: revert;
        color:sienna;
    }

    .photo {
        width:100%;
        max-width:1200px;
    }

    .blue-text {
        color: #0051ff;
    }

    .red-suit {
        color: red;
        font-weight: bold;
        text-decoration: none;
    }

    .black-suit {
        color: black;
        font-weight: bold;
        text-decoration: none;
    }

    /*centered, capped width for comfortable reading*/
    .reading-width {
        justify-self: center;
        width: 100%;
        max-width: 1000px;
    /*    display: flex;*/
    /*    margin: auto*/
    }

    /* only on the emoji test page */
    .emoji-container {
        display: flex;
        flex-flow: row wrap;
    }

    /* evil styling >:) */
    .warning {
        line-height: 150%;
        background-color: rgba(185, 0, 0, 1);
        background-image: url("/davidpages/bg/black-thread.png");
        color: maroon;
        text-shadow: 0.05em 0.05em 0 red,
        -0.05em -0.05em 0 blue;
        font-family: "Cubic", sans-serif;
        padding: 10px;
        border: 4px inset maroon;
        box-shadow: 0 0 35px blue;
    }
    .warning::selection {
        color:red;
        background-color: orange;
    }

    /* good styling :> */
    .update {
        background-color: rgba(0, 217, 255, 0.5);
        border: 10px double skyblue;
        color: white;
        /* text-shadow: 1px 1px 0 red, */
         /* -1px -1px 0 blue; */
    }
}

/* layer for types of images i want not to be styled with global defaults */
@layer special {
    .emoji {
        all: revert;

        height: 1.3em;
        width: auto;

        /* vertical-align: -0.35em; */
        vertical-align: -0.35em;
        /* vertical-align: middle; */
        /* vertical-align: middle; */

        margin: 0px;
        /* hmm i kinda like them blurry actually */
        /* image-rendering: pixelated; */
        }

    /* no-spin: currently just for notebook page turn buttons */
    .emoji:hover:not(.no-spin) {
        /* Animation: name | duration | timing | iteration */
        animation: 
            spin 1.714s linear infinite, 
            rainbow-shift 11.928s linear infinite;
        /* animation: hover 1.714s ease-in-out infinite; */
    }

    @keyframes spin {
        000% {filter: brightness(120%); rotate: calc(72deg * 0);}
        100% {filter: brightness(120%); rotate: calc(72deg * 5);}
        020% {filter: brightness(120%); rotate: calc(72deg * 1);}
        040% {filter: brightness(120%); rotate: calc(72deg * 2);}
        060% {filter: brightness(120%); rotate: calc(72deg * 3);}
        080% {filter: brightness(120%); rotate: calc(72deg * 4);}
    }

    @keyframes hover {
        0% {transform: translateY(20px);}
        50% {transform: translateY(-20px);}
        100% {transform: translateY(20px);}
    }

    @keyframes rainbow-shift {
        /* another rainbow test */
        /* from { filter: hue-rotate(0deg); }
        to { filter: hue-rotate(360deg); } */

        000% {filter: hue-rotate(calc(72deg * 0));}
        100% {filter: hue-rotate(calc(72deg * 5));}
        020% {filter: hue-rotate(calc(72deg * 1));}
        040% {filter: hue-rotate(calc(72deg * 2));}
        060% {filter: hue-rotate(calc(72deg * 3));}
        080% {filter: hue-rotate(calc(72deg * 4));}
    }
}