start/assets/css/styles.css

/*** Fonts ***/

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

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

/*** Page Contents ***/

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

    background:
        linear-gradient(120deg, #FF00C7 0%, #51003F 100%),
        linear-gradient(120deg, #0030AD 0%, #00071A 100%),
        linear-gradient(180deg, #000346 0%, #FF0000 100%),
        linear-gradient(60deg, #0029FF 0%, #AA0014 100%),
        radial-gradient(100% 165% at 100% 100%, #FF00A8 0%, #00FF47 100%),
        radial-gradient(100% 150% at 0% 0%, #FFF500 0%, #51D500 100%);
    background-blend-mode:
        overlay, color-dodge,
        overlay, overlay,
        difference, normal;
}

/* Main Grid */
body {
    display: grid;
    grid-template-columns: repeat(12, [col-start] 1fr);
    grid-template-rows: 0.2fr 1fr 1fr;
    gap: 2rem;
    padding: 2rem;
    margin: 1rem;

    background-color: rgb(0 0 0 / 75%);
    border-radius: 0.8rem;
}

/* Small Screen Layout */
@media (max-width: 700px) {
    .link_box {
        grid-column: span 12;
    }
}

@media (min-width: 700px) {
    .link_box {
        grid-column: span 6;
    }
}

@media (min-width: 900px) {
    .link_box {
        grid-column: span 4;
    }
}

/* Large Screen Layout */
@media (min-width: 1200px) {
    .link_box {
        grid-column: span 3;
    }
}

/* Page Header */
header {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-column: span 12;
    padding: 1.2rem;

    background-image: linear-gradient(145deg, #525252, #3d72b4);
    border-radius: 0.4rem;
}

header h1 {
    font-family: "Fira Code SemiBold";
    color: #FFFFFF;
    margin: 0;
    text-shadow: 0.1rem 0.1rem 0.4rem #000000;
}

/* Link Box */
.link_box {
    /* grid-column: span 3; */

    display: grid;
    grid-template-columns: repeat(4, [col-start] 1fr);
    grid-template-rows: 0.5fr 1fr 1fr;
    gap: 1rem;
    max-height: fit-content;
}

.link_box h2 {
    grid-column: span 4;

    display: flex;
    margin: 0;
    padding: 1rem;

    align-items: center;
    justify-content: center;

    font-family: "Fira Code SemiBold";
    font-size: 1.25rem;
    text-shadow: 0.1rem 0.1rem 0.4rem #000000;
    color: #FFFFFF;

    border-radius: 0.4rem;
}

/* Link */
a {
    grid-column: span 2;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;

    background-color: #525252;
    border-radius: 0.4rem;
    border-color: #313131;
    border: 2px solid transparent;
    box-shadow: 0.25rem 0.25rem #000000;

    text-decoration: none;
    font-family: "Fira Code Regular";
    color: #FFFFFF;
    text-align: center;
}

a:hover {
    font-family: "Fira Code SemiBold";
    background:
        linear-gradient(#505050 0 0) padding-box,
        linear-gradient(to right, #12c2e9, #c471ed,#f64f59) border-box;
    border: 2px solid transparent;
}

a:active {
    font-family: "Fira Code SemiBold";
    background:
        linear-gradient(#777777 0 0) padding-box,
        linear-gradient(to right, #12c2e9, #c471ed,#f64f59) border-box;
    border: 2px solid transparent;
}

a img {
    width: 2.5rem;
    height: 2.5rem;
}

/* Specific Colors for each Category */

.personal > h2 {
    background-image: linear-gradient(to right, #cb2d3e, #ef473a);
}

.home > h2 {
    background-image: linear-gradient(to right, #0083B0, #00B4DB);
}

.work > h2 {
    background-image: linear-gradient(to right, #4A00E0, #8E2DE2);
}

.finance > h2 {
    background-image: linear-gradient(to right, #11998e, #38ef7d);
}

.management > h2 {
    background-image: linear-gradient(to right, #EF629F, #EECDA3);
}

.productivity > h2 {
    background-image: linear-gradient(to right, #021B79, #0575E6);
}

.entertainment > h2 {
    background-image: linear-gradient(to right, #ec008c, #fc6767);
}

.shopping > h2 {
    background-image: linear-gradient(to right, #f8b500, #fceabb);
}