/*** Fonts ***/

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

/*** Page Contents ***/

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

    background-image: linear-gradient(45deg, #0250c5 0%, #d43f8d 100%);
}

/* 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;

    border: 2px solid #ffffff;
    border-radius: 0.4rem;
}

header h1 {
    font-family: "Fira Code";
    font-weight: 700;
    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";
    font-weight: 600;
    font-size: 1.25rem;
    text-shadow: 0.1rem 0.1rem 0.4rem #000000;
    color: #FFFFFF;

    border-radius: 0.4rem;
    border-color: #313131;
    border: 2px solid transparent;
}

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

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

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

    text-decoration: none;
}

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(#77777700 0 0) padding-box,
        linear-gradient(to right, #12c2e9, #c471ed,#f64f59) border-box;
    border: 2px solid transparent;
}

a img {
    flex: 90%;
    aspect-ratio: 1 / 1;
    max-height: 3rem;
}

a p {
    flex: 10%;
    margin: 0;
    font-family: "Fira Code";
    font-weight: 500;
    color: #FFFFFF;
    text-align: center;
}

/* Specific Buton Colors */

#fastmail {background-color: #0067B9;}
#myatt {background-color: #109BD7;}
#nextdns {background-color: #0069FF;}
#resident {background-color: #E42127;}
#utilityhawk {background-color: #03794C;}
#nep {background-color: #68BE49;}
#anchor {background-color: #4573D1;}
#jira {background-color: #2684FF;}
#confluence {background-color: #0A5FD9;}
#aws {background-color: #FF9900;}
#bofa {background-color: #E31837;}
#amex {background-color: #016FD0;}
#discover {background-color: #F57E21;}
#lemonade {background-color: #FF0083;}
#ovhcloud {background-color: #000D94;}
#cloudflare {background-color: #F6821F;}
#dynadot {background-color: #041243;}
#github {background-color: #0D1117;}
#remarkable {background-color: #534A41;}
#youtube {background-color: #FF0000;}
#lichess {background-color: #000000;}
#amazon {background-color: #FE9801;}
#kroger {background-color: #144A98;}
#chewy {background-color: #1C49C2;}
#adagio {background-color: #D78824;}

/* Specific Colors for each Category */

.personal > h2 {
    background:
        linear-gradient(#000000b4 0 0) padding-box,
        linear-gradient(to right, #cb2d3e, #ef473a) border-box;
    border: 2px solid transparent;
}

.home > h2 {
    background:
        linear-gradient(#000000b4 0 0) padding-box,
        linear-gradient(to right, #0083B0, #00B4DB) border-box;
    border: 2px solid transparent;
}

.work > h2 {
    background:
        linear-gradient(#000000b4 0 0) padding-box,
        linear-gradient(to right, #4A00E0, #8E2DE2) border-box;
    border: 2px solid transparent;
}

.finance > h2 {
    background:
        linear-gradient(#000000b4 0 0) padding-box,
        linear-gradient(to right, #11998e, #38ef7d) border-box;
    border: 2px solid transparent;
}

.management > h2 {
    background:
        linear-gradient(#000000b4 0 0) padding-box,
        linear-gradient(to right, #EF629F, #EECDA3) border-box;
    border: 2px solid transparent;
}

.productivity > h2 {
    background:
        linear-gradient(#000000b4 0 0) padding-box,
        linear-gradient(to right, #021B79, #0575E6) border-box;
    border: 2px solid transparent;
}

.entertainment > h2 {
    background:
        linear-gradient(#000000b4 0 0) padding-box,
        linear-gradient(to right, #ec008c, #fc6767) border-box;
    border: 2px solid transparent;
}

.shopping > h2 {
    background:
        linear-gradient(#000000b4 0 0) padding-box,
        linear-gradient(to right, #f8b500, #fceabb) border-box;
    border: 2px solid transparent;
}