@font-face
{
    font-family: "Metropolis";
    src: url("../fonts/Metropolis-Bold.woff2");
}

@font-face
{
    font-family: "Aleo";
    src: url("../fonts/Aleo-Regular.woff2");
}

/* Reset styles */

html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select{margin:0}html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}img,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

/* General styles */

html
{
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%), url("../images/background.jpg") top center no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

body
{
    all: unset;

    font-family: "Aleo", serif;
    font-weight: 400;
    font-size: 1rem;
    user-select: none;
}

section.transparent-section
{
    padding: 2rem 15vw 2rem 15vw;
}

section.transparent-section > p
{
    color: rgb(255, 255, 255);
}

section.opaque-section
{
    padding: 2rem 15vw 2rem 15vw;

    background-color: rgb(255, 255, 255);
}

h1
{
    font-size: 2.4rem;
    color: rgb(202, 154, 80);
}

p+h1
{
    margin-top: 3rem;
}

h2
{
    font-size: 2rem;
    color: rgb(0, 123, 206);
}

h1+h2,
p+h2
{
    margin-top: 2rem;
}

h3
{
    font-size: 1.6rem;
    color: rgb(0, 0, 0);
}

h1+h3,
h2+h3,
p+h3
{
    margin-top: 1rem;
}

h1+p,
h2+p,
h3+p,
p+p
{
    margin-top: 1rem;
}

h1+a,
h2+a,
h3+a,
p+a
{
    margin-top: 1rem;
}

a
{
    transition: 0.25s;
}

a:hover
{
    color: rgb(202, 154, 80) !important;
    transition: 0.25s;
}

a.rounded-button
{
    display: inline-block;
    padding: 0.5rem;
    margin: 0.5rem;

    background-color: rgb(255, 0, 0);
    border-radius: 1rem;

    font-size: 1.5rem;
    color: rgb(255, 255, 255);
    text-decoration: none;
}

i.fa
{
    padding-right: 0.5rem;
}

input,
textarea
{
    width: 100%;
    height: 50px;
    border: none;
    border-radius: 1rem 1rem 1rem 1rem;

    box-shadow: 0px 0px 25px rgb(0, 0, 0);

    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    text-indent: 50px;
    transition: 0.25s;
}

input:hover,
textarea:hover
{
    transition: 0.25s;
}

input::placeholder,
textarea::placeholder
{
    color: inherit;
}

/* Specific styles */

html body header > nav#header-navigation
{
    position: fixed;

    width: 100%;

    border-radius: 0rem 0rem 1rem 1rem;
}

html body header > nav#header-navigation,
html body footer > nav#footer-navigation
{
    display: flex;
    justify-content: center;
    overflow-x: auto;

    background-color: rgb(34, 34, 34);
    box-shadow: 0px 0px 25px rgb(0, 0, 0);

    text-align: center;
}

html body header nav#header-navigation > a,
html body footer nav#footer-navigation > a
{
    padding: 2rem;

    font-family: "Metropolis", sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: rgb(255, 255, 255);
    text-decoration: none;
}

html body header nav#header-navigation > a.show-on-mobile
{
    display: none;
}

html body header > section#header-title
{
    padding: 15vh 0 15vh 0;

    text-align: center;
}

html body header section#header-title > h2
{
    color: rgb(255, 255, 255);
}

html body footer > nav#footer-navigation
{
    border-radius: 1rem 1rem 0rem 0rem;
}

/* Service styles */

@media screen and (max-width: 600px)
{
    html
    {
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%), url("../images/mobile-background.jpg") top center no-repeat;
        background-attachment: fixed;
        background-size: cover;
    }

    section.transparent-section
    {
        padding: 2rem;
    }

    section.opaque-section
    {
        padding: 2rem;
    }
}

@media screen and (max-width: 990px)
{
    html body header nav#header-navigation > a:not(a.always-show, a.show-on-mobile)
    {
        display: none;
    }

    html body header nav#header-navigation > a.show-on-mobile
    {
        display: block;
    }
}