@import 'header.css';
@import 'footer2.css';

html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: "Monument Extended", Arial, Helvetica, sans-serif;
}

.cool-link::after{
      background: #fff;
}

.nav-btn i {
    background: #fff;
}

body{
    background: #ffffff;
}

.container{
    width: 90%;
    margin: 0 auto;
    padding: 2em;
    column-count: 4;
    padding-bottom: 80px;
}

.container div img{
    width: 100%;
    margin-bottom: 1em;
    transition: 0.5s;
    cursor:zoom-in;
}

.container div img:hover{
    transform: scale(1.03);
}

@media(max-width: 1000px){
    .container{
        column-count: 3;
    }
}

@media(max-width: 800px){
    .container{
        column-count: 2;
    }
}

@media(max-width: 400px){
    .container{
        column-count: 1;
    }
}

body {
    margin:0;
}

.popup {
    position: absolute;
    height:100%;
    width:100%;
    top:0;
    left:0;
    display:none;
    text-align:center;
}

.popup_bg {
    background: rgb(255, 255, 255);
    position:fixed;
    z-index:1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: auto;
  height: auto;
}


.popup_img {
    position: fixed;
    z-index:2;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    max-height: 80%;
    max-width: 68%;
}

.popup_img {
  pointer-events: none;
}