start/assets/css/styles.css

/*** Fonts ***/

@font-face {
    font-family: "Fira Code Regular";
    src: url(../fonts/FiraCode.ttf);
}

@font-face {
    font-family: "Fira Code Bold";
    src: url(../fonts/FiraCode-Bold.ttf);
}

/*** Page Contents ***/

/* Background Container */
html {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;

    background: radial-gradient(50% 123.47% at 50% 50%, #00FF94 0%, #720059 100%), linear-gradient(121.28deg, #669600 0%, #FF0000 100%), linear-gradient(360deg, #0029FF 0%, #8FFF00 100%), radial-gradient(100% 164.72% at 100% 100%, #6100FF 0%, #00FF57 100%), radial-gradient(100% 148.07% at 0% 0%, #FFF500 0%, #51D500 100%);
    background-blend-mode: screen, color-dodge, overlay, difference, normal;
}

/* Main Container */
body {
    background-color: #1B1B1B;
    border-radius: 10px;
    box-shadow: 10px 10px;
    padding: 2rem;
}

/* Link Grid */
nav {
    display: grid;

    /* We want a 4x2 grid. */
    grid-template-columns: repeat(4, [col-start] 1fr);
    grid-template-rows: repeat(2, [row-start] 1fr);

    gap: 2rem;
}

/* Main Heading */
h1 {
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    color: #FFFFFF;
    font-family: "Fira Code Regular";
}

/* Link Box */
.link_box > h2 {
    font-family: "Fira Code Bold";
    font-size: 1rem;
    color: #FFFFFF;
    margin: 0 0 0.5rem 0;
}

.link_box a {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    font-family: "Fira Code Regular";
    color: #FFFFFF;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    text-decoration: none;
}

/* Link (Hover) */
.link_box a:hover {
    font-family: "Fira Code Bold";
}

/* Link Icon */
.link_box a > img {
    width: 1.25rem;
    height: 1.25rem;
}

/* html {
    align-items: center;
    background: linear-gradient(315deg,#021B79,#0575E6);
    background: radial-gradient(50% 123.47% at 50% 50%, #00FF94 0%, #720059 100%), linear-gradient(121.28deg, #669600 0%, #FF0000 100%), linear-gradient(360deg, #0029FF 0%, #8FFF00 100%), radial-gradient(100% 164.72% at 100% 100%, #6100FF 0%, #00FF57 100%), radial-gradient(100% 148.07% at 0% 0%, #FFF500 0%, #51D500 100%);
    background-blend-mode: screen, color-dodge, overlay, difference, normal;
    display: flex;
    font: 22px/1 "firacode";
    height: 100%;
    justify-content: center;
} */

/* body {
    background-color: rgb(29, 31, 33, 1.0);
    border-radius: 4px;
    box-shadow: 10px 10px;
    color: #000000;
    display: flex;
    flex-direction: column;
    min-height: 20ch;
    min-width: 50vw;
    padding: 2em;
} */

/* a {
    color: inherit;
    text-decoration: none;
    color: #ffffff;
}

a:focus, a:hover {
    font: 22px/1 "firacode_bold";
}

li:first-child {
    font: 22px/1 "firacode_bold";
}

li:last-child {
    margin: 0 0 1em;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul:nth-child(5n + 1) li:first-child {
    background: -webkit-linear-gradient(right, #cb2d3e, #ef473a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

ul:nth-child(5n + 2) li:first-child {
    background: -webkit-linear-gradient(right, #f12711, #f5af19);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

ul:nth-child(5n + 3) li:first-child {
    background: -webkit-linear-gradient(right, #1d976c, #93f9b9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

ul:nth-child(5n + 4) li:first-child {
    background: -webkit-linear-gradient(right, #9cecfb, #65c7f7, #0052d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

ul:nth-child(5n + 5) li:first-child {
    background: -webkit-linear-gradient(right, #12c2e9, #c471ed, #f64f59);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

ul:nth-child(5n + 6) li:first-child {
    background: -webkit-linear-gradient(right, #dce35b, #45b649);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
} */

/* nav {
    column-gap: 2em;
    display: grid;
    grid-template-columns: auto auto auto auto;
    padding: 1em 0;
} */