*{
    margin:0;
    padding:0;
}

body{
    overflow:hidden;
    background: url('art1.jpg');
    background-size: cover;
    display:flex;
    align-items:center;
    flex-direction: column;
    padding-top:200px;

    
}

.webgl{
    top:0;
    left:0;
    
}
.card{
    
    width:450px;
    height:250px;
    padding:10px 15px 15px 10px;
    margin-top:50px;
    border-radius:20px;
    background:url('art.jpg');
    background-size: 120px;;
    box-shadow: 
    0px -10px 10px rgba(0,0,0,0.2),
    0px 10px 20px rgba(0,0,0,0.4),
    -10px 0px 20px rgba(0,0,0,0.4),
    10px 0px 20px rgba(0,0,0,0.4),
    inset 1px 1px 20px rgba(0,0,0,0.4);
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition:1.9s;
    transform:rotateZ(-7deg);
}

.logo{
    width:120px;
    height:120px;
    background: url("gold.jpg");
    background-size:cover;
    mask: url("hmlogo-black.png");
    mask-size: 120px;
    mask-repeat: no-repeat;
    -webkit-mask : url("hmlogo-black.png");
    -webkit-mask-size:120px;
    -webkit-mask-repeat: no-repeat;
}
.title {
    
    font-size:36px;
    font-weight:bold;
    letter-spacing:2px;
    word-spacing:6px;
    padding-bottom:20px;
    color:transparent;
    background:url('gold.jpg');
    background-size:cover;
    background-clip:text;
    -webkit-background-clip:text;
    text-shadow:-1px -1px 1px rgba(0,0,0,0.1);
}
.card:hover{
    transform : scale(3.10);
     
}

.contact{
    
    font-size:20px;
    color:white;
    text-shadow:-1px -1px 1px rgba(253, 252, 252, 0.4);
    letter-spacing:3px;

}