body {
        margin:100px;
        margin-top:70px;
        margin-bottom:40px;
        display: flex;
        font-family: 'Basiic', sans-serif;
        font:15px;
        font-family: 'MSGothic';
        letter-spacing:1px;
        color: #ffa6c1;
        cursor: url("cursor.ani"), auto;
        background-image: url("images/bg.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        background-attachment: fixed;
    }

    ::selection {
        background-color: #c2f4ff;
    }

    .container,
    main {
        width: 100%;
    }

    .text {
        width: 98%;
        max-width: 1100px;
        margin: 0 auto;
    }

    .text h1,
    .text p {
        margin-left: 0;
        padding-left: 0;
    }

    .column {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .gallery-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
        width: 98%;
        max-width: 1100px;
        margin: 0 auto;
        align-items: start;
    }

    .photo {
        margin-bottom: 0;
        transition: transform 0.2s;
    }
/*
    .photo:hover {
        transform: translateY(-5px) rotate(1deg);
        box-shadow: 0px 5px 10px rgba(43, 94, 142, 0.25);
    } 
    */

    .photo.hidden {
        display: none;
    }

    .photo-img {
        width: 100%;
        height: auto;
        align-items: center;
        justify-content: center;
        border: 2px solid #fdfeff;
        /* border-bottom: 3px solid #7097ab; */
    }
   
    .photo-img img,
    .photo-img video {
        width: 100%;
        height: auto;
        display: block;
    }

    .home, .photos, .posts {
        width: 80%;
        margin-left:10%;
    }

    .photo-grid {
        max-width: 100%;
        display: flex;
        gap: 12px;
        margin: auto;
    }

    .photo-caption {
        background-color: rgb(243, 246, 248);
        padding:5px;
        font-size:14px;
        border: 1px solid #7097ab;
    }

/************** LIGHTBOXES **************/

   .lightbox {
       display: none;
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: rgba(24, 33, 41, 0.85);
       justify-content: center;
       align-items: center;
   }
   
   .lightbox.active {
       display: flex;
   }
   
   .lightbox-content {
       max-width: 90%;
       max-height: 90%;
       position: relative;
   }
   
   .lightbox-content img,
   .lightbox-content video {
       max-width: 100%;
       max-height: 90vh;
       object-fit: contain;
   }
   
   .lightbox-caption {
       color: white;
       text-align: center;
       margin-top: 15px;
       font-size: 14px;
       font-family: 'kodemono';
   }
   
   .lightbox-close {
       position: absolute;
       top: 20px;
       right: 30px;
       font-size: 40px;
       color: white;
       cursor: pointer;
       z-index: 1001;
   }

/************** RESPONSIVE IMAGES **************/
  
@media (max-width: 800px) {
    body {
        display: block;
        margin: 10%;
    }
 
    .column {
        max-width: 100%;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
        width: 100%;
    }

     .photo-grid {
        display: inline-block;
    }
    
}

/************** TEXT **************/

    @font-face {
  font-family: 'MSGothic';
  src: url(fonts/MSGothic.ttf);
    }