@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

/* font-family: "Outfit", sans-serif; */

@font-face {
      font-family: "JetBrainsMono"; /* Choose a descriptive name for your font */
      src: url("/assets/JetBrainsMono/JetBrainsMono-Regular.woff2") format("woff2"); /* Path to your WOFF2 file */
      font-weight: normal; /* Define the font weight */
      font-style: normal; /* Define the font style */
      font-display: swap; /* Optional: Controls how the font is displayed while loading */
    }

:root {
    --text:          #212529;
    --background:    #faf3ed;
    --primary:       #212529;
    --secondary:     #004780;
    --accent:        #db4437; 
    --additional:    #0000;

}

* {
    font-family: "JetBrainsMono";
    margin: 0;
    word-break: normal;
    color: var(--text);
    transition: color 2s,background-color 2.5s;
}

main {
    background-color: var(--background);
    display: grid;
    grid-template-columns: 30px 1fr 1.5fr 2.75fr 30px;
    grid-template-rows: 20px 1.5fr 1fr 1fr 1.5fr 1.5fr 20px;
    height: 100vh;
}

a {
    color: inherit;
    font-size: inherit;
}

.exx1 {
    grid-column-end: span 2;
}
.exx5 {
    grid-column-end: span 6;
}
.exy1 {
    grid-row-end: span 2
}


#x2y2 {
    grid-column-start: 2;
    grid-row-start: 2; 
}

#x4y2 {
    grid-column-start: 4;
    grid-row-start: 2;
    gap: 10px;
    display: flex;
    flex-direction: row;
}
#x4y3 {
    grid-column-start: 4;
    grid-row-start: 3;
    line-height: 1.75;
}
#x2y5 {
    grid-column-start: 2;
    grid-row-start: 5;
}
#x4y5 {
    grid-column-start: 4;
    grid-row-start: 5;
}
#x1y6 {
    grid-column-start: 1;
    grid-row-start: 6;
    /* background-image: url("/assets/Untitled4.png"); */
    /* background-position: 50% 0%; */
    background-image: linear-gradient(135deg, #004780, #D3D6D9);
    
}

#x2y6 {
    grid-column-start: 2;
    grid-row-start: 6;
    align-self: end;
}

#x4y6 {
    color: #777777;
    grid-column-start: 4;
    grid-row-start: 6;
    align-self: end;
    justify-self: end;
    /* text-shadow: 1px 1px 5px #000; */
}

#x3y3 {
    grid-column-start: 3;
    grid-row-start: 3;
}
#x3y4 {
    grid-column-start: 3;
    grid-row-start: 4;
}

.unmarkLink {
    color: var(--text);
    text-decoration: none;
}

.markLink {
    color: var(--secondary);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.markLink::after {
    content: " >";
}

.markLink:hover {
    text-decoration: line-through underline;
    text-decoration-color: var(--secondary);
    text-decoration-thickness: 2px;
}

.markedLink {
    color: var(--text);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.markedLink::after {
    content: " >";
}

.markedLink:hover {
    text-decoration: line-through underline;
    text-decoration-color: var(--secondary);
    text-decoration-thickness: 2px;
}

.markyLink {
    color: var(--text);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.markyLink:hover {
    text-decoration: line-through underline;
    text-decoration-color: var(--secondary);
    text-decoration-thickness: 2px;
}

.bg {
    width: 100%;
    height: 100%;
    background: var(--additional);
    background-image: 
        linear-gradient(#8888 1px, transparent 1px),
        linear-gradient(90deg, #8888 1px, transparent 1px);
    background-position: 10px 10px;
    background-size: 20px 20px;
}