html {
    height: 100%;
    overflow: hidden;
}

body {
    height: 100%;
    overflow: auto;
    color: black;
    font-family: "Marfa-Regular";
    margin: 30px;
    line-height: 12px;
    text-align: center;
}


html {
    margin: 0px;
    padding: 0px;
}

svg{
    color: auto;
    margin: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 80vh;
    margin: none;
    padding: none;
    transition: 0.3s;
  }


svg:hover{
    fill: #D3AC9E !important;
}


#logo {
    margin-top: 5vh;
}


a {
    color:black;
     transition: 0.3s;
    vertical-align: text-top;
}


#logo:hover + a{
    color: #D3AC9E;
}

#logo:hover + #text{
    color: #D3AC9E;
}
#logo:hover + #text a{
    color: #D3AC9E;
}

#text {
    transition: 0.3s;
    color: black;
}

a:hover {
    color: #D3AC9E;
    text-decoration: none;
}

a:visited:hover {
    color: black;
}

#content {
    display: inline-block;
    justify-content: center;
  align-items: center;
     transition: 0.3s;
}



#text{
    margin-top: 20px;
}

#construction {
    max-width: 50%;
    text-align: right;
    padding: 0;
    font-size: 11px;
}

#contact {
    max-width: 50%;
    padding:0;
     text-align: left;
      font-size: 11px; 
}
#contact-name {
margin-right: 20px;
}


#mail {
    font-size: 13px;
}


@media screen and (min-width: 1400px) {
    #construction {
        font-size: 13px;
    }
    #contact {
        font-size: 13px;
    }
    #mail {
        font-size: 15px;
    }
}






#mail-child-1{
    margin-right: 8px;
}

#mail-child-2:hover{
    color: #D3AC9E;
    transition: 0.3s;
}


@font-face {
    font-family: "Marfa-Regular";
    src: url("../ABCMarfa-Regular.otf");
  }
@font-face {
    font-family: "Marfa-Italic";
    src: url("../ABCMarfa-Italic.otf");
  }
  
  
  p.customfont {
    font-family: "Marfa-regular", "Marfa-Italic";
  }



/* // Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    body{
        margin:0px;
        padding: 20px;
    }
    #content {
        display: flex;
    }
    #text{
        margin-top: 0;
    }
     #logo{
        margin-top: 0;
    }
    
#construction {
    max-width: 50%;
    text-align: right;
    padding: 0;
    font-size: 8px;
}

#contact {
     max-width: 50%;
    padding:0;
     text-align: left;
     font-size: 8px;
}
    #mail {
         font-size: 10px;
        width: 30%;
    }
   
#contact.col-lg-2 {
  padding-right: 0;
    padding-left: 0;
}
.col-sm {
    padding-left: 0;
    padding-right: 0;
}
    svg{
       position: fixed;
        bottom: 0;
        left: 0;
           color: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 80vh;
    margin: none;
    padding: 20px;
    transition: 0.3s;
    } 
 }