@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@600&display=swap');

:root {
    --col-red: #ff6188;
    --col-orange: #fc9867;
    --col-yellow: #ffd866;
    --col-green: #a9dc76;
    --col-blue: #78dce8;
    --col-purple: #ab9df2;
    --col-dark: #27252a;
    --col-light: #fefefe;
}

body {
    margin: 0pc;
    color: var(--col-dark);
    background-color: var(--col-light);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 10pc;
}

canvas {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:-1;
}

.main {
    font-family: 'Fira Code', monospace;
    background-color: var(--col-dark);
    border: 6px solid var(--col-dark);
    color: var(--col-light);
    border-radius: 50px;
    margin: auto;
    padding: 2pc;
    width: 40%;
}

#header {
    display: flex;
    align-items: center;
}

#profile {
    border-radius: 50%;
    margin: 2pc;
    width: 20%;
}

#sections {
    padding-top: 10px;
    line-height: 30px;
}

.lnk {
    color: var(--col-red);
}

.lnk:visited {
    color: var(--col-red);
}

.lnk:hover {
    color: var(--col-purple);
}

.article {
    color: var(--col-blue);
}

.article:visited {
    color: var(--col-blue);
}

.article:hover {
    color: var(--col-purple);
}