:root
{
    --color-text: #5a5a5a5a;
    --color-primary: green;
    --color-secondary: blue;
    --color-accent: purple;
    --color-active: white;

    --ff-title: sans-serif;
    --ff-serif: "Crimson Text", serif;
    --ff-logo: "BetterFly", sans-serif;
    --navbar-color: #222;
    --banner-title: whitesmoke;
    --header-size: 64px;
    --header-size-sm: 18px;
    --header-size-desktop: 68px;
}

header
{
    width: 100%;
    background-color: pink;
    position: relative;
    text-align: center;
}

header .image
{
    height: 30vh;
}

.image
{
    width: 100%;
}

.banner-title
{
    color: var(--banner-title);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

iframe
{
    width: 100%;
}


ul
{
    /*Removes the bullets.*/
    list-style-type: none;
    /*Removes browser default settings.*/
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-align: center;
}

#socialLinks li
{
    display: inline-block;
    cursor: pointer;
    font-size: 16px;
}

#socialLinks li a
{
    display: block;
    color: var(--light-bg-text-color);
    text-align: center;
    padding: 14px 12px;
    text-decoration: none;
}

/*All links on the webpage.*/
li a
{
    display: block;
    color: #3c66a7;
    text-align: center;
    text-decoration: none;
}

li a:hover
{
    color: #a5c7e0;
}

footer 
{
    background-color: #ffffff;
}

#developer
{
    padding: 20px;
    font-size: 12px;
    text-align: center;
}

.has-white-text
{
    color: var(--banner-title);
}