body {
    color:#fff;
    font-family: "Lexend", sans-serif;
    background-color:#232120;
    margin:0;
}

a {
    color:#fff;
}

.header {
    background-color:#3d3d3d;
    padding-top:25px;
    padding-bottom:25px;
    text-align:center;
}

.main {
    background-image: url(shoe_gif_dw.gif);
    background-size: cover;
    background-position: cener;
    height:90vh;
    padding:15px;
    text-align:center;
}

.img-shoes {
    width: 800px;
}

.img-surround {
    text-align:center;
}

.centered {
    text-align:center;
}

.image-surround {
    margin-bottom:10px;
}

.mug-shot {
    width:500px;
    height:500px;
}

.a5-size-landscape {
    width: 500px;
    height: 359px;
}

.phone-sized {
    width: 500px;


}

.a4-portrait {
    width: 500px;
    length: 707px;

}

.rectangular-instagram {
    width: 500px;
    length: 625px;
    
}

.social-media-icon {
    height:14px;
    margin-right:7px;
    position:relative;
    top:3px;
    width:14px;
}

.row{
    display: flex;
    flex-direction: row;
    flex-wrap:wrap ;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.content{
    display: flex;
    flex-direction: row;
    flex-wrap:wrap ;
    justify-content: center;
    align-items: top;
    gap: 40px;
    /* max-width:1200px;
    margin:auto; */
}

/* .gallery {
    width:80%;
    margin:auto;
}

.gallery .col-left, .gallery .col-right {
    display:inline-block;
    vertical-align: top;
    width:49%;
}

@media only screen and (max-width: 375px) {
    .gallery .col-left, .gallery .col-right {
        width:100%;
    }
} */

.text {
    text-align:left;
    margin-left:160px;
    margin-right:160px;
}

.centered-text {
    display:block;
    text-align:center;
}

@media only screen and (max-width: 515px) {
    .mug-shot {
        width: 100%;
        height:100%;
    }

    .content{
        display: flex;
        flex-direction: column;
    }
}

@media only screen and (max-width: 556px) {
    .img-shoes {
        width: 300px;
    }
}

@media only screen and (max-width: 375px) {
    .img-shoes {
        width: 250px;
    }
}

.zoom:hover {
    cursor:pointer;
}

.zoom-image {
    border:2px solid #3d3d3d;
    position:absolute;
    top:10px;
    /* left:calc((100% - 500px) /2); */
    height:calc(100vh - 20px) !important;

}

body {
    width: 100%;
  }

  .container {
  display: flex;
  justify-content: center;
   margin: 20px;
  }
  
  .zoom-out {
    border-radius: 10px;
    cursor: pointer;  
    width: 300px;
  }
  
  .zoom-out:hover {
    animation-name: on-hover;
    animation-duration: 1s;
    animation-fill-mode: forwards;
  }
  
  /* css keyframes to zoom in and out the image */
  
  @keyframes on-hover {
    0% {
      height: auto;
      opacity: 0.7;
    }
   100% {
      width: 600px;
      height: auto;
    }
  }