:root {
    --color: black;
    --gh-color: black;
    --fb-color: #3b5998;
    --in-color: #0077b5;
    --tw-color: #673AB7;

    --background: white;
    --default-gh: black;
    --default-fb: #3b5998;
    --default-in: #0077b5;
    --default-tw: #673AB7;
}

.body {
    background-color: var(--background);
}

.container {
    height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.name {
    font-size: 50px;
    margin-bottom: 5px;
    font-family: 'PT Sans Caption', sans-serif;
}

.first {
    color: #faa541;
}

.last {
    color: #15ad9e;
}

.icon-container {
    display: flex;
    flex-direction: row;
}

.icon {
    width: 30px;
    height: 30px;
}

.gh {
    background-color: var(--gh-color);
    mask: url(./github.svg) no-repeat center;
    -webkit-mask: url(./github.svg) no-repeat center;
}

.fb {
    background-color: var(--fb-color);
    mask: url(./facebook.svg) no-repeat center;
    -webkit-mask: url(./facebook.svg) no-repeat center;
}

.in {
    background-color: var(--in-color);
    mask: url(./linkedin.svg) no-repeat center;
    -webkit-mask: url(./linkedin.svg) no-repeat center;
}

.tw {
    background-color: var(--tw-color);
    mask: url(./twitch.svg) no-repeat center;
    -webkit-mask: url(./twitch.svg) no-repeat center;
}

.lightbulb {
    top: 0px;
    right: 0px;
    cursor: pointer;
    position: absolute;
    background-color: var(--color);
    mask: url(./lightbulb.svg) no-repeat center;
    -webkit-mask: url(./lightbulb.svg) no-repeat center;
}