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;
    height: 100%;
    align-items: center;
    justify-content: center;
    background-color: #000000;
}

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

    background-color: #0F0F0F;
}

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

    background-image: linear-gradient(145deg, #3494E6, #EC6EAD);
    border-radius: 0.4rem;
}

header h1 {
    font-family: "Fira Code SemiBold";
    color: #FFFFFF;
    margin: 0;
}

/* 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;
    background-color: #313131;
    align-items: center;
    justify-content: center;

    font-family: "Fira Code SemiBold";
    font-size: 1.25rem;
    color: #FFFFFF;

    border-radius: 0.4rem;
    border-color: #FFFFFF;
    border-style: solid;
    border-width: 2px;
}

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

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

    background-color: #313131;
    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;
}