/* ================================================
   FONTS
   ================================================ */
@font-face {
    font-family: 'BlockMonoNerdFont';
    src: url('../fonts/BlockMonoNerdFont-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'BlockMonoNerdFont';
    src: url('../fonts/BlockMonoNerdFont-SemiBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

/* ================================================
   BASE
   ================================================ */
html {
    background: linear-gradient(135deg, #273a38 0.000%, #333d4e 20.000%, #404963 40.000%, #4f5c76 60.000%, #5f7088 80.000%, #6f8097 100.000%);
    background-size: cover;
    background-repeat: no-repeat;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    min-height: 98vh;
    font-family: 'BlockMonoNerdFont';
    border: 2px dashed white;
}

/* ================================================
   TYPOGRAPHY
   ================================================ */
p {
    color: white;
}

a {
    color: white;
    text-decoration: none;
}

/* ================================================
   HEADER
   ================================================ */
header {
    position: fixed;
    top: 2vh;
    width: 90vh;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    font-family: 'BlockMonoNerdFont';
    background-color: rgba(114, 137, 218, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px dashed white;
    border-radius: 15px;
}