.imagegallery {
    margin-left: 20px;
    margin-right: 20px;
    text-align: center;
}

.row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 6px;
}

/* Create four equal columns that sits next to each other */
.column {
    flex: 10%;
    max-width: 24.5%;
    padding: 0 6px;
}

.subtitle3 {
  color: var(--main-text2);
  font-size: 1.5em;
  font-family: "Mainl";
  text-decoration: none;
  text-align: center;
  margin-bottom: 2em;
}


.icon {
    width: 100%;
    overflow-clip-margin: content-box;
    overflow: clip;
    opacity: 100%;
    filter: blur(0em);

    -o-transition: 0.4s;
    -ms-transition: 0.4s;
    -moz-transition: 0.4s;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    pointer-events:none
}

#icontitle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    opacity: 0%;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
    -moz-transition: 0.4s;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    pointer-events:none
}

.icontrigger {
    vertical-align: middle;
    width: 100%;
    margin: 0.3em;
    background-color: --main-outline;
    box-shadow: 0px 0px 0px var(--main-text);
    position: relative;
    text-align: center;

    -o-transition: 0.4s;
    -ms-transition: 0.4s;
    -moz-transition: 0.4s;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

.icontrigger:hover > .icon {
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
    -moz-transition: 0.4s;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    opacity: 30%;
    filter: blur(0.2em);

}

.icontrigger:hover {
    -o-transition: 0.7s;
    -ms-transition: 0.7s;
    -moz-transition: 0.7s;
    -webkit-transition: 0.7s;
    transition: 0.7s;
    box-shadow: 0px 0px 1rem var(--main-text) inset;
}

.icontrigger:hover > #icontitle{
    opacity: 100%;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
    -moz-transition: 0.4s;
    -webkit-transition: 0.4s;
    transition: 0.4s;

}

.arthorz {
    width: 98%;
    margin: 0 auto;
    text-align: center;
    display: block;

}

.artsqaure {
    width: 80%;
    margin: 0 auto;
    text-align: center;
    display: block;

}

.artvert {
    width: 50%;
    margin: 0 auto;
    text-align: center;
    display: block;

}

.twitter-tweet {
    text-align: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.youtube-vid {
    text-align: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    display: block;
}



/* makes a 2 column-layout instead of 4 columns */
@media screen and (max-width: 800px) {
    .column {
        flex: 45%;
        max-width: 100%;
    }
}

/* 2 columns stack on top of each other*/
@media screen and (max-width: 600px) {
    .column {
        flex: 100%;
        max-width: 100%;
    }
}