:root
{
    --main-background-color: #a3a3a3;
    --secondary-background-color: #262626;
    --main-font-color: #262626;
    --secondary-font-color: #fff;
    --accent-color: #d9ce4a;
}

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body
{
    font-size: 10px;
    font-family: 'Poppins', sans-serif;
    color: var(--main-font-color);
    background-color: var(--main-background-color);
}

/*
*   NAVIGATION
*/

#navigation
{
    padding: 2rem 1rem;
    z-index: 100;
    width: 100%;
    font-size: 2.4rem;
    background-color: var(--main-background-color);
    letter-spacing: 0.216rem;
}

#navigation li
{
    padding: 0 1rem;
}

#navigation li a
{
    color: var(--main-font-color);
}

#navigation li a:hover,
#navigation li a.active
{
    color: var(--accent-color);
}

.navbar-toggler-icon
{
    background: url(../img/menu.png);
    background-size: 100%;
    font-size: 2rem;
}

.fixedNavigation #navigation
{
    position: fixed;
    top: 0;
}

/*
*   SECTION STYLINGS
*/

.section
{
    padding: 3% 10%;
}

.section .section-header h3
{
    color: var(--accent-color);
    text-align: left;
    font-size: 4rem;
}

.section-content
{
    margin: 5rem 0;
}

.section-content h4
{
    margin-bottom: 5rem;
} 

.section-content-img
{
    margin: 5rem 0;
    text-align: center;
}

.section-content-img img
{
    height: 10rem;
}

/*
*   HEADER
*/
#header .header-list h2
{
    font-size: 6.6rem;
}

#header .header-list a
{
    text-decoration: none;
    color: var(--main-font-color);
}

#header .header-list a:hover
{
    color: var(--accent-color);
}

#header .header-list h2:hover
{
    color: var(--accent-color);
}

/*
*   SERVICES
*/

#services
{
    background-color: var(--secondary-background-color);
    color: var(--secondary-font-color);
}

#services .section-content h4
{
    color: var(--secondary-font-color);
    text-align: left;
    font-size: 4rem;
}

#services .section-content p
{
    color: var(--secondary-font-color);
    text-align: left;
    font-size: 1.8rem;
}

/*
*   AUDIENCE
*/
#audience .section-content h4
{
    text-align: left;
    font-size: 3rem;
}

#audience .section-content p
{
    text-align: left;
    font-size: 1.8rem;
}

/*
*   REFERENCES
*/

#references
{
    background-color: var(--secondary-background-color);
}

#references .section-content .project
{   
    background-color: var(--main-background-color);
}

#references .section-content p
{
    color: var(--secondary-font-color);
    text-align: left;
    font-size: 3rem;
}

/*
*   ABOUT
*/
#about h1
{
    text-align: left;
    font-size: 5rem;
}

#about .section-content p
{
    text-align: left;
    font-size: 1.8rem;
}

#about .btn-contact
{
    border-radius: 50%;
    color: var(--main-font-color);
    background-color: var(--accent-color);
    text-align: center;
    font-size: 5rem;
    padding: 2rem;
}

#about .btn-contact:hover
{
    color: var(--accent-color);
    background-color: var(--main-font-color);
}

#about .imgContainer
{
    position:relative;
    display:inline-block;
    text-align:center;
}

/*
*   VALUE
*/
#value
{
    background-color: var(--secondary-background-color);
    color: var(--secondary-font-color);
}

#value .section-content h4
{
    color: var(--secondary-font-color);
    text-align: left;
    font-size: 5rem;
}

#value .section-content p
{
    color: var(--secondary-font-color);
    text-align: left;
    font-size: 1.8rem;
}

/*
*   FOOTER
*/
#footer
{
   padding: 0 1rem 0 0;
}

#footer p
{
    font-size: 1.5rem;
    letter-spacing: 0.18rem;
}

#footer a
{
    font-size: 1.5rem;
    letter-spacing: 0.18rem;
    padding: 0 1rem;
}

#footer a:link
{
    text-decoration: none;
    color: var(--main-font-color);
}

#footer a:hover
{
    color: var(--accent-color);
}

/*
*   CONSTRUCTION
*/
#construction .section-header h1
{
    font-size: 6.6rem;
    color: var(--main-font-color);
    text-align: center;
}

#construction .progress
{
    margin: 5rem;
    background-color: var(--secondary-background-color);
}

#construction .progress .progress-bar
{
    background-color: var(--accent-color);
}

#construction .section-content
{
    font-size: 1.8rem;
    text-align: center;
}

#construction .section-content .contactButton
{
    color: var(--accent-color);
    text-decoration: none;
    padding: 15px 20px;
    display: inline-block;
    margin-top: 20px;
    background-color: var(--secondary-background-color);
    border: 1px solid --secondary-background-color;
    border-radius: 1rem;
}

#construction .section-content .contactButton:hover
{
    color: var(--main-font-color);
    background-color: var(--accent-color);
}

/*
*   IMPRINT
*/
#imprint .section-content h1
{
    font-size: 6.6rem;
}

#imprint .section-content h2
{
    font-size: 4rem;
}

#imprint .section-content h4
{
    text-align: left;
    font-size: 3rem;
}

#imprint .section-content p
{
    text-align: left;
    font-size: 1.8rem;
}

#imprint .section-content a
{
    text-decoration: none;
    color: var(--main-font-color);
}

#imprint .section-content a:hover
{
    color: var(--accent-color);
}

#imprint .section-content li
{
    font-size: 1.8rem;
}