:root{
    --backcol: #354670;
    --linecol: #91aeb7;
}
@font-face {
    font-family: bluprint;
    src: url("assets/fonts/bluprint.otf") format("opentype");
}
body{
    margin: 0;
    overflow: hidden;
    background-color: var(--backcol);
    color: white;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
header{
    background-color: var(--backcol);
    border-bottom: dashed var(--linecol);
    width: 100%;
    display: flex;
}
h1 {
    font-family: bluprint;
    font-size: 5vw;
    margin: auto;
}
@keyframes moving-grid{
    0% {top: -50px; left:-50px}
    100% {top: 0px; left:0px}
}
.grid-container{
    display: grid;
    grid-template-columns: repeat(10, 50px);
    position: absolute;
    top: 0px;
    width:100%;
    height: 100%;
    animation: moving-grid 5s infinite linear;
    z-index: -1;
}

#link-grid{
    z-index: 1;
    width: 90vw;
    display: grid;
    grid-template-columns: repeat(3, 30vw);
    padding: 10vw;
}

.link-container{
    width: 20vw;
    padding: 1vw;
    border-radius: 1rem;
    border: dashed var(--linecol);
    background-color: var(--backcol);
    transition: 300ms box-shadow;
}

.link-container:hover{
    box-shadow: var(--linecol) 1px 1px 10px;
}

.no-link{
    color: white;
    text-decoration: none;
}

svg rect{
    stroke-dashoffset: 10;
    stroke-linecap: round;
    stroke: var(--linecol);
    stroke-dasharray: 20 30;
    stroke-width: 3;
    fill: none;
}