/*
* 1. STILE DI BASE
* 2. FONT
*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');

:root {
    --color-bg: #181d23;
    --color-green: #d8fb9b;
    --color-green-soft: #d6e8b7;
    --color-red: #cd5b5b;
    --color-text: rgb(194,195,195);
    --color-white: rbg(245,245,245);
    --margin-small: 20px;
    --margin-big: 50px;
}

body{
    background-color: var(--color-white);
    color: var(--color-white);
    font-size: var(--fontsize-base);
}

header, main, footer {
    width: 100%;
}

/***************
TITLE AND FONT 
***********************/
h1, h3 {
    text-align: center;
    font-family: 'Roboto', sans-serif;
}

h2, h4, h5, h6, p {
    text-align: left;
}


h4 {
    font-family: 'Montserrat', sans-serif;
}

.r-24 {
    font-size: 24px;
    font-weight: 700;
}

.r-36{
    font-size: 36px;
    font-weight: 500;
}

.r-18 {
    font-size: 18px;
}

.r-12 {
    font-size: 12px;
}

/***************
IMG - ICONS - FOOTER
*******************/
img {
    max-width: 100%;
}

i {
    font-size: 1.5rem;
}

a, a:hover {
    text-decoration: none;
    color: #ffffff !important;
    text-align: center;
}

.logo {
    max-width: 40%;
}

#footer-2 {
    text-align: center;
    color: #707070;
 }

@media screen and (max-width: 768px) {
    .logo {
      max-width: 110%;
    }
    a {
        margin-top: 20px;
    }
  }