*{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

:root {
    /* Colors */
    --white-color: #fff;
    --white-color-transparent: rgb(255, 255, 255, .7);
    --black-color: rgb(20, 19, 19);
    --black-color-transparent: rgba(11, 11, 11, .5);
    --blue-color: rgb(2, 56, 164);
    --lightblue-color: rgb(16, 80, 209);
    --blue-color-transparent: rgba(2, 56, 164, .5);
    --silver-color: #e6e6e6;
    --lightsilver-color: #f3f3f3;
    --grey-color: #444444;
    --lightgrey-color: #666565;
    --red-color: #ca0707;
    --lightred-color: #c93232;
    --golden-color: rgb(239, 205, 0);
    --lightgolden-color: rgb(235, 207, 52);
    --green-color: #00bd09;
    --lightgreen-color: #3ecc45;
    --orange-color: rgb(224, 126, 1);
    --orange-color-transparent: rgba(224, 126, 1, .5);
    --lightorange-color: rgb(241, 154, 40);

    /* Medusa */

    /* Background colors */
    --background-white-color: #fff;
    --background-blue-color: #0238a4;
    --background-hover-blue-color: #1e49a0;
    --background-silver-color: #e6e6e6;
    --background-hover-silver-color: #acaaaa;
    --background-grey-color: #444444;
    --background-hover-grey-color: #666565;
    --background-transparent-color: rgba(0,0,0,.7);
    --background-red-color: #ca0707;
    --background-hover-red-color: #c93232;
    --background-golden-color: #f5af18;
    --background-golden-opacity-color: #f5af184b;
    --background-hover-golden-color: #f7c559;
    --background-green-color: #0d8a13;
    --background-hover-green-color: #308d35;
    --background-orange-color: #ff6804;
    --background-hover-orange-color: #e6803d;
    --background-lightorange-color: #e09738;
    /* Font colors */
    --font-white-color: #fff;
    --font-hover-white-color: rgba(250, 250, 250, .7);
    --font-blue-color: #0238a4;
    --font-hover-blue-color: rgba(27, 65, 190, 0.7);;
    --font-red-color: #ca0707;
    --font-hover-red-color: rgba(230, 65, 65, 0.7);
    --font-orange-color: #ff6804;
    --font-grey-color: #353535;
    --font-green-color: #0d8a13;
    --font-golden-color: #f5af18;
    /* Font size*/
    --font-size-icon-nav-menu: 3rem;
    --font-size-title-level-one: 2rem;
    --font-size-title-level-two: 1.5rem;
    --font-size-title-level-three: 1rem;
    --font-size-normal-text: 1rem;
    /* line height size*/
    --line-height-size: 1.7rem;
    --normal-line-height-size: normal;
    /* Shadow colors */
    --shadow-black-color: #000;
    --shadow-golden-color: #f5af18;
}

html {
  scroll-behavior: smooth;
}

/*
==========
Styles for text in page.
==========
*/

.title__one{
    font-weight: bold;
    font-size: 3em;
    margin: 0;
    padding: 0;
}

.title__two{
    font-weight: bold;
    font-size: 2em;
    margin: 0;
    padding: 0;
}

.title__three{
    font-weight: bold;
    font-size: 1.1em;
    margin: 0;
    padding: 0;
}

.title__four{
    font-weight: bold;
    font-size: 1em;
    margin: 0;
    padding: 0;
}

.normal{
    font-size: 1em;
    margin: 0;
    padding: 0;
    line-height:1.6;
}

.bolder{
    font-weight: bold;
    margin: 0;
    padding: 0;
}

.upper{
    text-transform: uppercase;
}

/*
==========
Styles for buttons.
==========
*/

.button__golden{
    background-color: var(--golden-color);
    color: var(--white-color);
    border: none;
    border-radius: 5px;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 13px;
    padding-right: 13px;
    transition: all ease-in-out .3s;
}

.button__golden:hover{
    background-color: var(--lightgolden-color);
    color: var(--white-color);
    border: none;
    border-radius: 5px;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 13px;
    padding-right: 13px;
    cursor: pointer;
    transition: all ease-in-out .3s;
}

.button__orange{
    background-color: var(--orange-color);
    color: var(--white-color);
    border: none;
    border-radius: 5px;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 13px;
    padding-right: 13px;
    transition: all ease-in-out .3s;
}

.button__orange:hover{
    background-color: var(--lightorange-color);
    color: var(--white-color);
    border: none;
    border-radius: 5px;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 13px;
    padding-right: 13px;
    cursor: pointer;
    transition: all ease-in-out .3s;
}

.button__green{
    background-color: var(--green-color);
    color: var(--white-color);
    border: none;
    border-radius: 5px;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 13px;
    padding-right: 13px;
    transition: all ease-in-out .3s;
}

.button__green:hover{
    background-color: var(--lightgreen-color);
    color: var(--white-color);
    border: none;
    border-radius: 5px;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 13px;
    padding-right: 13px;
    cursor: pointer;
    transition: all ease-in-out .3s;
}