*{
            font-family: "Roboto Mono", monospace;
            font-optical-sizing: auto;
            font-weight: 400;
            font-style: normal;
        }
        .mobile-gif{
            display: none;
        }
        a{
            color: black;
        }
        #navigation {
            display: flex;
            justify-content: space-between;
            width: 100%;
        }

        #navigation a {
            padding: 15px;
            text-decoration: none;
            color: black;
            font-size: 18px;
        }

        .three-parts {
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        #left, #right {
            width: 200px;
            height: 700px;
            position: absolute;
            top: 0;
            z-index: 1;
        }

        #left {
            left: 0;
            cursor: w-resize;
        }

        #right {
            right: 0;
            cursor: e-resize;
        }

        #main-img {
            display: flex;
            justify-content: center;
            width: 70%;
            z-index: -3;
        }

        #main-img img {
            height: 75vh;
        }

        #text {
            display: flex;
            justify-content: center;
            margin-top: 15px;
        }

        #text p {
            width: 920px;
            text-align: center;
        }

        #more img {
            width: 100%;
        }
        #more{
            margin-top: 20px;
        }
        #gallery {
            display: grid;
            grid-template-columns: 2fr 1fr;
            margin: auto;
            width: 90%;
        }

        #gallery img {
            height: 760px;
            width: auto;
            display: block;
        }
        #gallery1 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            margin: auto;
            width: 90%;
        }

        #gallery1 img {
            height: 760px;
            width: auto;
            display: block;
        }
        @media (max-width: 768px) {
            #navigation{
                display: none;
            }
            body > * {
              display: none;
              overflow: hidden;
            }
          
            .mobile-gif {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
                width: 100vw;
            }
            .mobile-gif img{
                max-width: 100%;
                max-height: 100%;
            }
          }
        #esra {
            position: fixed;
            inset: 0;
            display: flex;
            opacity: 0;
            pointer-events: none;
            z-index: 2;
            cursor: url("data:image/svg+xml;utf8,\
                <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'>\
                  <line x1='2' y1='2' x2='14' y2='14' stroke='black' stroke-width='1'/>\
                  <line x1='14' y1='2' x2='2' y2='14' stroke='black' stroke-width='1'/>\
                </svg>") 8 8, auto; 
        }
        
        #esra:target {
            opacity: 1;
            pointer-events: auto;
        }
        
        .overlay-content {
            width: 100%;
            height: 100%;
            background: white;
        
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        
        p{
            margin-bottom: 0;
            font-size: 18px;
        }
        .h880{
            height: 880px;
            width: auto;
            object-fit: contain;
        }
        #grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            grid-template-areas:
              "left top"
              "left bottom";
            width: 90%;
            margin: auto;
        }
        #grid img {
            width: auto;
            display: block;
        }
        .left {
            grid-area: left;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .top {
            grid-area: top;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .bottom {
            grid-area: bottom;
        }
        #text:hover{
            cursor: s-resize;
        }
        .firstsite{
            height: 100vh;
        }
        .no-scroll {
            overflow: hidden;
        }