/* Variables*/
:root {
    /* 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-hover-orange-color: #f39657;
    --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;
}

/* Titles */

.icon__nav__menu{
    font-size: 3rem;
}

.title__level__one{
    font-size: 2rem;
}

.title__level__two{
    font-size: 1.5rem;
}

.title__level__three{
    font-size: 1rem;
}

.normal__text{
    font-size: 1rem;
    color: var(--font-grey-color);
}

.form__input{
    background-color: var(--background-white-color);
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    height: 50px;
    max-height: 500px;
    min-height: 50px;
    display: block;
    padding: 10px;
    border-radius: 6px;
    outline: none;
    color: var(--font-grey-color);
    border: none;
    margin-top: .5rem;
}

.input__description{
    height: 100px;
}

.input__search{
    background-color: var(--background-white-color);
    width: 100%;
    height: 50px;
    display: inline-block;
    padding: 10px;
    border-radius: 6px;
    outline: none;
    color: var(--font-grey-color);
    border: none;
    margin-top: .5rem;
}

/* Butons */

.button__golden{
    display: inline-block;
    background-color: var(--background-golden-color);
    justify-self: center;
    color: var(--font-white-color);
    text-decoration: none;
    padding: 13px 30px;
    border-radius: 32px;
    border: none;
    cursor: pointer;
}

.button__golden:hover{
    background-color: var(--background-hover-golden-color);
}

.button__orange{
    display: inline-block;
    background-color: var(--background-orange-color);
    justify-self: center;
    color: var(--font-white-color);
    text-decoration: none;
    padding: 13px 30px;
    border-radius: 32px;
    border: none;
    cursor: pointer;
}

.button__orange:hover{
    background-color: var(--background-hover-orange-color);
}

.button__red{
    display: inline-block;
    background-color: var(--background-red-color);
    justify-self: center;
    color: var(--font-white-color);
    text-decoration: none;
    padding: 13px 30px;
    border-radius: 32px;
    border: none;
    cursor: pointer;
}

.button__red__form{
    margin-left: auto;
    display: inline-block;
    width: 100%;
    height: 50px;
    padding: 0 20px;
    background-color: var(--background-red-color);
    border: none;
    font-size: 1rem;
    color: var(--font-white-color);
    border-radius: 6px;
    cursor: pointer;
    border: none;
    cursor: pointer;
}

.button__red__form:hover{
    background-color: var(--background-hover-red-color);
}

.button__red:hover{
    background-color: var(--background-hover-red-color);
}

.button__green__form{
    margin-left: auto;
    display: inline-block;
    width: 100%;
    height: 50px;
    padding: 0 20px;
    background-color: var(--background-green-color);
    border: none;
    font-size: 1rem;
    color: var(--font-white-color);
    border-radius: 6px;
    cursor: pointer;
    border: none;
    cursor: pointer;
}

.button__green__form:hover{
    background-color: var(--background-hover-green-color);
}

.button__green{
    display: inline-block;
    background-color: var(--background-green-color);
    justify-self: center;
    color: var(--font-white-color);
    text-decoration: none;
    padding: 13px 30px;
    border-radius: 32px;
    border: none;
    cursor: pointer;
}

.button__green:hover{
    background-color: var(--background-hover-green-color);
}

.button__silver{
    display: inline-block;
    background-color: var(--background-silver-color);
    justify-self: center;
    color: var(--font-grey-color);
    text-decoration: none;
    padding: 13px 30px;
    border-radius: 32px;
    border: none;
    cursor: pointer;
}

.button__silver:hover{
    background-color: var(--background-hover-silver-color);
}

.button__grey{
    display: inline-block;
    background-color: var(--background-grey-color);
    justify-self: center;
    color: var(--font-white-color);
    text-decoration: none;
    padding: 13px 30px;
    border-radius: 32px;
    border: none;
    cursor: pointer;
}

.button__grey:hover{
    background-color: var(--background-hover-grey-color);
}

.button__blue{
    display: inline-block;
    background-color: var(--background-blue-color);
    justify-self: center;
    color: var(--font-white-color);
    text-decoration: none;
    padding: 13px 30px;
    border-radius: 32px;
    border: none;
    cursor: pointer;
}

.button__blue:hover{
    background-color: var(--background-hover-blue-color);
}

.button__search{
    height: 50px;
    width: 50px;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    background-color: var(--background-orange-color);
    justify-self: center;
    color: var(--font-white-color);
    text-decoration: none;
    border-radius: 10px;
    border: none;
}

.button__search:hover{
    background-color: var(--background-hover-orange-color);
}

/* Mediaquery viewport 250px*/

@media (max-width:250px){
    .icon__nav__menu{
        font-size: 2rem;
    }
    
    .title__level__one{
        font-size: 1.3rem;
    }
    
    .title__level__two{
        font-size: 1rem;
    }
    
    .title__level__three{
        font-size: .8rem;
    }
    
    .normal__text{
        font-size: .8rem;
    }

    .about__icon{
        font-size: 50px;
        color: var(--font-golden-color);
    }

    .normal__text::placeholder{
        font-size: .8rem;
    }
}