@import "layout.css";

/* === body === */
 body {
     background: url("../images/gallery/gallerybackground.jpg");
     background-size: cover;
     background-repeat: no-repeat;
     background-position: 0 0;
}
/* === links color === */
 a {
     color: #000;
}
/* === main content === */
 #container {
     align-items: center;
     border: solid 2px #000;
     display: flex;
     flex-direction: column;
     justify-content: center;
     margin: 0 auto 30px auto;
     max-width: 960px;
     padding: 10px;
     z-index: 999;
}
/*box style*/
 .box {
     border: 3px solid #026e02;
     height: 405px;
     width: auto;
}
/*apply margin for first child*/
 .box:nth-child(1) {
     margin-bottom: 50px;
     margin-top: 25px;
}
/*box distancing*/
 .box + .box {
     margin-bottom: 50px;
}
 .image {
     cursor: pointer;
     height: 400px;
     object-fit: cover;
     width: 500px;
}
/*style click for info at hover*/
 .showText {
     color: #fff;
     margin-top: -220px;
     text-align: center;
}
/* === footer === */
 footer {
     position: relative;
}
/* === svg icons style === */
 .a,.b {
     fill:#000;
     stroke:#000;
     stroke-width: 5px;
}
 @media only screen and (max-width: 865px) {
     #container {
         max-width: 660px;
    }
     .image {
         height: 300px;
         width: 500px;
    }
     .box {
         height: 305px;
    }
     .showText {
         margin-top: -180px;
    }
}
 @media only screen and (max-width: 672px) {
     #container {
         max-width: 500px;
    }
     .image {
         height: 300px;
         width: 400px;
    }
     .box {
         height: 305px;
    }
}
 @media only screen and (max-width: 450px) {
     #container {
         max-width: 500px;
    }
     .image {
         cursor: default;
         height: 250px;
         width: 250px;
    }
     .box {
         height: 255px;
    }
}
 @media only screen and (max-width: 321px) {
     #container {
         width: 280px;
    }
     .image {
         height: 200px;
         width: 200px;
    }
     .box {
         height: 205px;
    }
}