/* Meta */
*{
    box-sizing:border-box;
    text-decoration: none;
}
html, body, main, article{
    text-align:center;
    color: rgba(89,89,89,1);
    scroll-behavior:smooth;
    padding: 0;
    margin: 0;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Main */
#landing{
    color:white;
    height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)), url('../img/brand-business-cellphone-204611.jpg');    
    background-size: auto 100% ;
    background-position: center center;
    background-repeat: no-repeat;
}
#landing #landing-text{
    padding: 35vh 0;
    height: 80%;
}
#landing #call-to-action{
    padding: 5px; 
    height: 20%;
    background-color: rgba(13, 112, 183,1);
}

#landing #call-to-action a{
    color: white;
    width:30vw;
    padding: 15px 50px;
    border-radius: 5px;
    background-color: #fac02e; 
}
article + article{
    margin-top: 20px;
    padding-top: 4rem;
}
.support-service{
    margin-top: 20px;
    padding: 10px;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.2);
}
.colored-icon{
    display:inline-block;
    color: white;
    padding: 15px;
    font-size: 300%;
    background-color: rgba(13, 112, 183,1);
    border-radius: 100px;
    width: 100px;
    height:100px;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.2);
}

#tarifs{
    color:white;
    background:linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,6)),url("../img/card-coffee-cup-1449082.jpg");
    background-size: auto 100% ;
    background-position: center center;
    background-repeat: no-repeat;
    padding-bottom: 4rem;
}

.tarif-field h1{
    font-size: 35pt;
    padding:0;
    margin:0;
}

article#contact{
    padding: 4rem 10vw;
    background-color:rgba(13, 112, 183,1);
    min-height:50vh;
    
}

article#contact #contact-text{
    /* font-size: 150%; */
    color:white;
    width: 80vw;
}

article#contact #contact-text a{
    color:#fac02e;
    font-size: 110%;
}

#contact-form-section #required-info{
    color:white;
    text-align: right;
}

#contact-form > *{
    border-radius:1rem;
    padding:0.5rem;
    display:inline-block;
    border:none;
    margin-top:10px;
    width: 80vw;
}

#contact-form > *:invalid{
    border:2px dotted red;
}
#contact-form > *:valid{
    border:2px dotted yellowgreen;
}
#contact-form input{
    height:2rem;
}
#contact-form #input-submit{
    color:white;
    background:#fac02e;
    width: fit-content;
    padding:1rem;
    height:3rem;
    border-radius:10px;
    font-weight: bold;
    font-size:100%;
}

article#about{
    padding: 4rem 1rem;
}

/* Header */
header{
    background-color: rgba(255,255,255,0.9);
    width:100%;
    top:0;
    position: fixed;
    height:4rem;
    padding:0.8rem;
}
header img{
    height:100%;
    max-width: auto;
    float: left;
}
header nav{
    float: right;
    height: 100%
}
#hamburger-button{
    color:rgba(89,89,89,1);
    float: right;
    display:block;
    font-size: 200%;
}
#hyperlink-list{
    position:fixed;
    top: 3rem;
    left:0;
    padding:0;
    /* margin-right: 10vw; */
    list-style: none;
    background-color: rgba(89,89,89,1);
    width: 100vw;
    visibility: hidden;
    opacity: 0;
}
#hyperlink-list.opened{
    transition: visibility 100ms, opacity 100ms linear;
    visibility: visible;
    opacity: 1;
}
#hyperlink-list li{
    font-size:200%;
    height:3rem;
    border-bottom: 1px solid rgba(13, 112, 183,1);
    transition: visibility 100ms linear;
}
#hyperlink-list li a{
    color:white;
}


/* Footer */
footer{
    font-size:50%;   
    border-top: 1px solid rgba(13, 112, 183,1); 
}
footer #design-by{
    background-color: black;
    color: white;
    padding: 0.5rem;
}

/* DESKTOP */
@media(min-width: 768px){
    /* Main */
    #landing{
        font-size:200%;
        background-size: 100% auto;
        /* padding: 0; */
    }
    article + article{
        padding-top: 6rem;
    }
    #landing #landing-text{
        padding:20vh;
    }
    #landing #call-to-action{
        padding:3.5rem 20rem;
    }
    #call-to-action h1{
        float:left;
        margin:0;
    }
    #landing #call-to-action a{
        float:right;
        margin:0;
        font-size:50%;
        width:fit-content;
    }

    #support-services .support-service{
        display:inline-block;
        min-width: 25vw;
        max-width: 50vw;
        margin-left: 1vw;
        margin-right: 1vw;
    }

    article#tarifs{
        background-size: 100% auto;
        min-height:30vh;
        padding: 6rem 0;
    }
    #tarifs .tarif-field{
        display:inline-block;
        width:30vw;
    }
    article#contact{
        padding-top:6rem;
    }
    #contact-form-section{
        text-align: center;
        max-width: 30vw;
        margin:0 auto;
    }
    #contact-form > *{
        max-width: 30vw;
        margin: 5px auto;
        display:block;
    }
    #about h1{
        font-size: 250%;
    }
    #about #facts{

        float: left;
        text-align: right;
        width:45vw;
        font-size:150%;
    }
    #about #story{

        float: right;
        text-align: left;
        width:45vw;
    }
    /* Header */
    header{
        height: 6rem;
    }
    #navigation-menu #hamburger-button{
        display:none;
    }
    #navigation-menu{
        /* border: 1px solid red; */
        width: 80vw;
        text-align: right;
        padding:0;
    }
    #navigation-menu #hyperlink-list{
        display: inline;
        padding:1rem;
        margin:0;
        visibility: visible;
        opacity: 1;
        position: inherit;
        font-size: 100%;
        background-color:rgba(0,0,0,0);
    }
    #navigation-menu #hyperlink-list li{
        display: inline-block;
        /* width: 20%; */
        margin: 0 2rem;
        margin-top:0.8rem;
        background-color:rgba(0,0,0,0);
        border:none;
        
    }
    #navigation-menu #hyperlink-list li a{
        color: rgba(13, 112, 183,1);
        
    }



    /* Footer */
    footer{
        display:inline-block;
        width:100%;
        font-size:90%;
        background-color: rgba(89,89,89,1);
    }   
    footer a{
        color:#fac02e;
        
    }
    footer #contact-details{
        color:white;
        float:left;
        width: 70vw;
        height: 100%;
        /* padding:1rem; */
    }
    footer #contact-details section{
        margin: 1rem;
        display:inline-block;
        width:30%;
        height: 100%;
        box-shadow: 0 0 5px 5px rgba(0,0,0,0.4);
        padding: 0.5rem;
    } 
    footer #contact-details section i{
        font-size: 2.5rem;
    }
    footer #legal-details{
        color:white;
        float:right;
        text-align: left;
        padding:0;
        margin:0;
        margin-right: 2rem;
        width:auto;
    }
    footer #design-by{
        display: inline-block;
        width: 100%;

    }
}