@font-face{
    font-family: "bariol";
    src: url("./fonts/bariol_regular-webfont.woff") format("woff"),
        url("./fonts/bariol_regular-webfont.woff2") format("woff2")
}

body{
    background-color: black;
    font-family: "bariol";
    color: whitesmoke;
}

.mt-c1{
    margin-top: 8%;
}
.mb-c1{
    margin-bottom: 5%;
}

.mb-c2{
    margin-bottom: 3%;
}

.header{
    font-family: 'Audiowide', cursive;
    font-size: 6.3vw;
    letter-spacing: 5px;
    line-height: 0.2rem;
   
    color: white;
    /* width: 63%;   */
}

.bottom{
    font-family: "bariol";
    font-size: 2.4vw;
    letter-spacing: normal;   
}

.bottom-border{
    padding-bottom: 1%;
    border-bottom: 1px solid rgb(235, 235, 235);   
}

#pics a{
    font-weight: 700;
    color: #5376b8;
}

#pics a:hover{
    text-decoration: underline;
}

#mail:hover {
    color: white;
    text-decoration: none;
}

a{
    color: white;
}

.imageBoxes{
    text-align: center;
}

.imgText{
    position: absolute;
    top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  font-size: 3.5vw;
}

.imgText.smallText{
  font-size: 1.5vw;
}

@media (max-width: 768px) {
    .imgText{
      font-size: 8vw;
    }

    .imgText.smallText{
        font-size: 4vw;
      }

    .header{
        font-size: 10vw;  
    }

    .bottom{
        font-size: 2.4vw    
    }

    .mb-c2{
        margin-bottom: 2%;
    }
}



.imageBoxes:hover img{
    opacity: 0.2;
    filter: grayscale(80%);
}


.imageBoxes:hover .imgText{
    opacity: 1;
}

.imageBoxes img{
    transition-property: opacity, filter;
    transition-duration: 1s, 1s;
    max-height: 500px;
}

.imageBoxes .imgText{
    transition-property: opacity;
    transition-duration: 3s;
}