:root{
    --indigo-dye: #053c5eff;
    --prussian-blue: #1d3958ff;
    --space-cadet: #353652ff;
    --english-violet: #4c334dff;
    --eggplant: #643047ff;
    --wine: #7c2e41ff;
    --cordovan: #942b3bff;
    --auburn: #ab2836ff;
    --fire-engine-red: #c32530ff;
    --rojo: #db222aff;

    --background: #0f1a20;
}

html {
    background-color: black;
    color: whitesmoke;
}

nav{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    font-size: 1.4em;

    padding: 20px 0;
    font-family: monospace;
}

nav a {
    text-decoration: none;
    color: whitesmoke;

    transition: .2s;
}

nav a:hover{
    color: darkcyan;
    transition: .2s;
}

nav a:visited{
    color: whitesmoke;
    transition: .2s;
}

header{
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

header h1{
    font-size: 6em;
    color: darkcyan;
    /* color: var(--rojo); */
    text-shadow: var(--indigo-dye) 4px 4px 0;
}

footer{
    position: fixed;
    bottom: 0;
    width: 100vw;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

footer p,section {
    padding: 20px;
    font-family: monospace;
}

.backgroundImage{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -5;
    opacity: .2;
    filter: saturate(0.5);
}

.bi {
    font-size: x-large;
}

.social-icons{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1em;
    transition: .2s;
}

.social-icons a {
    color: whitesmoke;
}

.social-icons a:hover{
    color: darkcyan;
    transition: .2s;
}

.social-icons a:visited{
    color: whitesmoke;
    transition: .2s;
}