html {
    --text: #00fff7;
    --background: #000000;
    --primary: #002dd1;
    --secondary: #00aaff;
    --accent: #1ce154;
}

body {
    background-color: var(--background);
    color: var(--text);
}

h1 {
    color: var(--secondary);
    font-family: "Kenia";
    text-shadow: 1px .5px 3px var(--accent);
    font-size: 50px;
    margin: 10px;
    min-width: 200px;

}

a {
    color: var(--accent);
    font-family: "Kenia";
    text-shadow: 1px 1p 3px rgb(4, 253, 241);
    border: 5px solid indianred;
    font-size: 30px;
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 3px;
    padding-bottom: 3px;


}


.flex {
    display: flex;
    align-items: center;
 
    flex-wrap: wrap;
    border: 5px solid #24f1b4;
    padding-bottom: 10px;


}

/* Define the animation */
@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Apply the animation and link it to the scroll timeline */
img,
li {
    animation: fade-in linear forwards 1s;
    animation-timeline: view();
    /* Links animation to the element's visibility in the viewport */
    animation-range: entry 0% cover 50%;
    /* Starts at the entry point, ends when 50% covered */
}

nav {
    position: sticky;
    top: 12px;
    z-index: 2;
    background-color: black;
}