* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
/*Général -----------------------------------------------------------------------*/
body {
    font-family: sans-serif;
    font-size: 1rem;
    /*margin-left:20px;*/
    /*margin-right:20px;*/
    /*background-color: red;*/
}
a {
    color:#ffffff;
    text-decoration: none;
}
.pagecontainer {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
.space_height_4rem {
    height: 1rem;
}
.space_height_2rem {
    height: 1rem;
}
/*Header -----------------------------------------------------------------------*/
.grid-container-header {
    background-color:#FFFFFF;
    padding:  10;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1.2fr 0.4fr;
    gap: 0 0rem;
    grid-template-areas:
      "logo"
      "contact_us";
    width:100%;
    align-items: stretch;
}

.header-button{
    background-color: #000080;
    color: #FFFFFF;
    border-radius: 10px;
    padding: 10px;
    font-size: 1rem;
}

.logo { grid-area: logo;}
.contact_us { 
grid-area: contact_us; 
align-self: center; 
justify-self: center;
}


.logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    
}

.logo img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width:100%;
}
/*Pages -----------------------------------------------------------------------*/
.alignleft {
    text-align: left;
    padding-left: 0;
}
.alignright {
    text-align: right;
    padding-right: 0;
}
.aligncenter {
    text-align: center;
}
.mainpagetitle {
    color:#000080;
    font-size:2rem;
    padding:4rem 0 2rem 0;
    font-weight: 800;
}
.primarypagetitle {
    color:#000080;
    font-size:2rem;
    padding-top:2rem;
    font-weight: 800;
}
.secondpagetitle {
    color:#000000;
    font-size:2rem;
    padding-top:2rem;
    font-weight: 800;
}
.description {
    color:#000000;
    text-align: justify;
    font-size:1.2rem;
    padding-top:2rem;
    font-weight: 400;
}
/*Footer -----------------------------------------------------------------------*/
.footer-container {
    text-align:center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width:100%;
}

.grid-container-footer {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1.2fr 0.6fr 1.2fr;
  gap: 0px 0px;
  grid-template-areas:
    "services" 
    "logo" 
    "informations";
  width:100%;
  background-color:#333333;
  color:#FFFFFF;
}

.services { 
    grid-area: services;
    align-self: center; 
    justify-self: center;
}
.logo { 
    grid-area: logo;
    align-self: center; 
    justify-self: center;
}
.informations { 
    grid-area: informations; 
    align-self: center; 
    justify-self: center;
}
.footerlogo { 
    padding:1rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40%;
}
.footertitle { 
    padding-top: 1rem;
    padding-bottom: 2rem;
    font-size: 1.75rem;
    font-weight: 600;
}
.footerservices { 
    font-size: 1.25rem;
    padding-bottom:1rem;
}
.footerinformation { 
    font-size: 1.25rem;
    padding-bottom:1rem;
}

footer{
    background-color:#333333;
    width:100%;
    text-align:center;
    font-size: 0.8rem;
    font-family: "Arial";
    padding: 1rem 0rem 1rem 0rem;
    color:#FFFFFF;
} 
/*
footer a{
    font-size: 1rem;
    font-family: "Arial";
    padding: 0;
    color:#FFFFFF;
    text-align: center;
    margin-left:10px;
}  */

/*.grid-container a{
    text-decoration: none;
}


.grid-container a:hover{
    text-decoration: underline;
}*/

.TopLanguage a {
    color:blue;
    display:block; 
    text-align: right;
    padding-top:20px;
    padding-right:20px;
}

/*.logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 60%;
    
}

.logo img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width:100%;
}

.flexContainer {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
}

.subContainer{
    max-width: 960px;
    margin: 0 auto;
    padding-left: 2.5rem;
    padding-right: 2.5rem;    
}

.block_2 {
    padding: 2rem;
    width:100%;
    display: block;
    font-size: 2rem;
    line-height: 1;
    border-radius:none;
}

.block_4 {
    width:100%;
    text-align: center;
    display: block;
    font-size: 2rem;
    line-height: 1;
    text-align: center;
}

.container3 {
    display: block;
     width: 100%; 
    text-align: center;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

.rightButton{
    display:block;
    text-align: right;
}

.space_height_15{
    height:15px;
}

.space_height_30{
    height:30px;
}

.space_height_60{
    height:60px;
}

.prefooter{
    font-size: 1.8rem;
    font-family: 'Amatic SC';
    width:100%;
    background-color:#EDC01B;
    text-align: center;
    padding:10px;
} 

.title{
    font-family: 'Amatic SC';
      text-align:center;
      font-size: 3rem;
      padding-bottom: 2rem;
      padding-top:2.1rem;
      text-decoration: underline;
  }

.typewrite {
    display:inline;
 }
 
.gridText{
    font-size: 1rem;
    font-family: "Arial";
    padding: 0;
    color:#FFFFFF;
    text-align: center;
}  

.gridText a{
    font-size: 1rem;
    font-family: "Arial";
    padding: 0;
    color:#FFFFFF;
    text-align: center;
    margin-left:10px;
}  

.gridLeftLine{
    border-left:none;
}    

.gridTitle{
    font-family: "Arial";
    font-size: 1.3rem;
    text-align: center;
    padding: 1rem 0.5rem 1rem 0.5rem;
    color:#FFFFFF;
    font-weight: 600;
} 

.icon-square, .icon-rounded, .icon-plain, .icon-circled {
    margin: 10px 10px 10px 10px;
    display: inline-block !important;
    text-align: center !important;
    color: #fff;
    width: 30px;
    height: 30px;
    padding: 3px;
    font-size: 30px;
    line-height: 30px;
    text-shadow: none;
    cursor: pointer;
}

.social{
    text-align:center;
}

.grid-container {
    background-color:#333333;
    padding:  10;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr 1fr 0.5fr 0.5fr 0.5fr 1fr 0.5fr 0.5fr;
    gap: 0 0rem;
    grid-template-areas:
      "expertise" 
      "modeling"
      "printing"
      "scanning"
      "proto"
      "dev"
      "appointment"
      "email"
      "phone"
      "address"
      "follow"
      "facebook"
      "linkedin";
    width:100%;
    align-items: stretch;
}

.follow { grid-area: follow;}
.expertise { grid-area: expertise; }
.appointment { grid-area: appointment; }
.hashtag { grid-area: hashtag; }
.modeling { grid-area: modeling; }
.printing { grid-area: printing; }
.scanning { grid-area: scanning; }
.proto { grid-area: proto; }
.dev { grid-area: dev; }
.phone { grid-area: phone; }
.email { grid-area: email; }
.address { grid-area: address; }  
  
.facebook { 
    grid-area: facebook; 
    color:#FFFFFF;
    margin-left:40px;
    text-align: center;
}

.facebook a {
    color:#FFFFFF;
}

.linkedin { 
    grid-area: linkedin; 
    color:#FFFFFF;
    margin-left:40px;
    text-align: center;
}
    
.linkedin a {
    color:#FFFFFF;
}

.facebook::before{
    content:'\f082';
    font-family: "FontAwesome"; 
    font-size: 30px;
    margin-right: 20px;
}


.linkedin::before{
    content:'\f08c';
    font-family: "FontAwesome"; 
    font-size: 30px;
    margin-right: 20px; 
}        
    
.servicetext, .domaintext{
    margin-left:auto;
    margin-right:auto;
    text-align:justify;
    width:80%;
    line-height: 26px;
}

.servicetext ul, .domaintext ul, .textsection ul{
    text-align:left;
}
   
.servicetext li, .domaintext li{
    margin-left:60px;
    text-align:left;
}

.subjectimage {
    border:1px solid #000; 
    width:100%; 
    object-fit: cover
}
    
Button    
.servicesButton{   
    font-family: 'Amatic SC';
    background-color: #FFFFFF;
    text-align: center;
    margin: 20px;
    border-radius: 10px;
    border: 2px solid #000000;
    line-height: 2em;
    font-weight: 300;
    font-size: 1.2rem;
}  

.servicesButton a
{
    color:#000000;
    text-decoration:none;
}

.servicesButton a:hover{
    font-size: 1.6rem;
}     

li {
    line-height: 30px;
}
  
.flexContainer{
    max-width: 960px;
    margin: 0 auto;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}

.textsection { 
    text-align:justify;
    font-family: 'Arial';
    font-size: 1.2rem;
    padding-bottom: 1rem;
    padding-top:1rem;
}

The following must go after the class .textsection 
.bluebox{
     background-color: #000080;
     font-weight:600;
     color:#FFFFFF;
     text-align: center;
     padding:20px;
     border-radius:10px;
     margin-top:30px;
     margin-bottom:30px;
 }
 
 The following must go after the class .textsection 
.yellowbox{
   background-color: #EDC01B;
   font-weight:600;
   color:#000;
   text-align: center;
   padding:20px;
   border-radius:10px;
   margin-top:30px;
   margin-bottom:30px;
}*/

/*-------------------------------- Tablet menu --------------------------------- */
@media all and (max-width: 1919px) and (min-width: 701px) {
   .pagecontainer {
    width: 1004px;
}
/*Pages -----------------------------------------------------------------------*/
.alignleft {
    text-align: left;
    padding-left: 10%;
    padding-right: 10%;
}
.alignright {
    text-align: right;
    padding-left: 10%;
    padding-right: 10%;
}
.mainpagetitle {
    color:#000080;
    font-size:2.5rem;
    padding:4rem 0 2rem 0;
    font-weight: 800;
}
.space_height_4rem {
    height: 4rem;
}
.space_height_2rem {
    height: 2rem;
}
.mainpagetitle {
    color:#000080;
    font-size:2rem;
    padding:4rem 0 2rem 0;
    font-weight: 800;
}
.primarypagetitle {
    color:#000080;
    font-size:1.5rem;
    padding-top:2rem;
    font-weight: 800;
}
.secondpagetitle {
    color:#000000;
    font-size:1.5rem;
    padding-top:2rem;
    font-weight: 800;
}
/*Header -----------------------------------------------------------------------*/
.grid-container-header {
    background-color:#FFFFFF;
    padding:  10;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 0.1fr;
    gap: 0 0rem;
    grid-template-areas:
      ". logo contact_us";
    width:100%;
    align-items: stretch;
}

.contact_us { 
    justify-self: start;

}
.header-button{
    font-size: 1rem;
}    

/*Footer -----------------------------------------------------------------------*/

.grid-container-footer {
  display: grid;
  grid-template-columns: 1.1fr 0.6fr 1.1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "services logo informations";
  width:100%;
  background-color:#333333;
  color:#FFFFFF;
}

.services { 
    justify-self: end;
}
.informations { 
    justify-self: start;
}
.footerlogo { 
    padding: 0.5rem;
    width: 50%;
}
.footertitle { 
    padding-top: 1rem;
    padding-bottom: 2rem;
    font-size: 1.25rem;
    font-weight: 600;
}
.footerservices { 
    font-size: 1rem;
    padding-bottom:1rem;
}
.footerinformation { 
    font-size: 1rem;
    padding-bottom:1rem;
}

footer{
    background-color:#333333;
    width:100%;
    text-align:center;
    font-size: 0.8rem;
    font-family: "Arial";
    padding: 1rem 0rem 1rem 0rem;
    color:#FFFFFF;
}
 }
 
 
 /*-------------------------------- Desktop menu-------------------------------- */
@media all and (min-width: 1920px) {
/*General -----------------------------------------------------------------------*/
.pagecontainer {
    width: 1900px;
}
/*Pages -----------------------------------------------------------------------*/
.alignleft {
    text-align: left;
    padding-left: 25%;
    padding-right: 25%;
}
.alignright {
    text-align: right;
    padding-left: 25%;
    padding-right: 25%;
}
.mainpagetitle {
    color:#000080;
    font-size:2.5rem;
    padding:4rem 0 2rem 0;
    font-weight: 800;
}
.space_height_4rem {
    height: 4rem;
}
.space_height_2rem {
    height: 2rem;
}

/*Header -----------------------------------------------------------------------*/
.grid-container-header {
    background-color:#FFFFFF;
    padding:  10;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 0.1fr;
    gap: 0 0rem;
    grid-template-areas:
      ". logo contact_us";
    width:100%;
    align-items: stretch;
}

.contact_us { 
    justify-self: start;

}
.header-button{
    font-size: 1.25rem;
}    

/*Footer -----------------------------------------------------------------------*/

.grid-container-footer {
  display: grid;
  grid-template-columns: 1.2fr 0.6fr 1.2fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "services logo informations";
  width:100%;
  background-color:#333333;
  color:#FFFFFF;
}

.services { 
    justify-self: end;
}
.informations { 
    justify-self: start;
}
.footerlogo { 
    padding: 4rem;
    width: 70%;
}

}