/* logo colors:
green: #2fac66;
gray: #706f6f;
lighter gray: #d4d4d4
*/
* {
    margin: 0;
    padding: 0;
    font-size:  16px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 150%;
    letter-spacing: normal;
    box-sizing: border-box;
}
html, 
body {
    display: flex;
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden;
    flex-direction: column; 
} 
::selection {
    background-color: #2fac659c;
    border-radius: 50px;
}
@media (min-width:1300px) {
    * {
        font-size: 18px;
    }
}
/* welcome */
.welcome {
    background: linear-gradient(#dbdbdb 5%, white);
}
/* end of welcome */

/* navbar and header */
.navbar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    min-width: 100%;
    /* border-top: 1px solid #d4d4d4; */
    /* border-bottom: 1px solid #d4d4d4; */
}
.logo img {
    height: 80px;
    margin-top: -13px;
    margin-bottom: -15px;
    margin-left: 1rem;
}
.nav-links ul {
    display: flex;
    list-style-type: none;
    padding-right: 5px;
}
li a {
    text-decoration: none;
    font-variant: small-caps;
    /* color: #2fac66; */
    color: #4f4f4f;
    margin-bottom: 3px;
    padding-right: 15px;
}
li a:hover {
    color: #706f6f;
}
@media (min-width:1300px) {
    li a {
        font-size:  20px;
    }
    .logo img {
        height: 90px;
    }
}
/* end navbar and header */
 
/* start main */
.main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 30px;
    height: 90vh;
}
.main-center {
    width: 35vw;
    text-align: center;
    color: #4f4f4f;
}
.main-center .center-logo {
    width: 200px;
    height: auto;
}
.main-center h1 {
    font-size: 30px;
    line-height: 30px;
    font-variant: small-caps;
    color: rgb(62, 62, 62);
}
.main-center p {
    padding-top: 8px;
    font-weight: 400;
    font-size: 23px;
    line-height: 130%;
}

@media (max-width:800px) {
    .main-center {
        width: auto;
    }
}
@media (min-width:1300px) {
    .main-center h1 {
        font-size: 36px;
    }
    .main-center p {
        font-size: 30px;
    }
    .main-center .center-logo {
    width: 240px;
    height: auto;
    }
}
/* end main */

/* start servizi */
.servizi {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: stretch;
    min-height: 50vh;
    gap: 15px;
    padding-top: 10px;
    padding-bottom: 15px;
}
#above-box{
    text-align: center;
}
#above-box h1 {
    font-size: 18px;
}
#below-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding-left: 5%;
    padding-right: 5%;
}
#below-box #cubes {
    border-radius: 5%;
    padding: 15px;
    min-height: 200px;
    width: 250px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 10px;
}
#cubes {
    padding: 5px;
}
#cubes h1 {
    text-align: center;
    font-variant: small-caps;
}
.vendita {
    background-color: #49df94b8;
}
.riparazioni {
    background-color: #b9e2e4;
}
.assistenza {
    background-color: #99a2f2b8;
}

@media (max-width:800px) {
    .servizi #below-box {
        flex-direction: column;
    }
}
@media (max-width:1400px) {
    .servizi {
        min-height: 25vh;
        gap: 20px;
    }
}
@media (min-width:1300px) {
    .servizi {
        min-height: 20vh;
    }
    #below-box {
        justify-content: space-around;
    }
    #below-box #cubes {
        padding: 20px;
        min-height: 250px;
        width: 300px;
    }
    #above-box h1 {
        font-size: 20px;
    }
}
/* end servizi */

/* start footer */
footer {
    display: flex;
    flex-direction: column;
    padding: 10px;
    background-color: #d4d4d4;
}
footer h2 {
    align-self: center;
    font-size: smaller;
}
.rows {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 10px 30px;
}
.map {
  height: auto;
  width: 400px;
}
.made-by {
    align-self: flex-end;
    /* color: #2fac66; */
}
.made-by p {
    font-style: italic;
    font-size: 14px;
}

@media (max-width:800px) {
    footer .rows{
        flex-direction: column;
        align-items: center;
        gap: 10px;
        text-align: center;
    }    
}
@media (min-width:1300) {
    footer h2 {
        font-size: 20px;
    }
}