.projimg {
    width:inherit; 
    height:inherit; 
    position:absolute;
    object-fit: cover;
    filter: none;
    border-radius: 0;
    z-index: 0;
    border: 1px solid rgba(175, 230, 255, 0);
    transition: border-color 0.5s, z-index 0.5s;
}

body.night .projimg {
    border-color: rgba(175, 230, 255, 0);
}

.proj.active > .projimg {
    border-radius: 5px;
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.7));
    z-index: 10;
    border-color: rgba(20,30,60,0.1);
}

body.night .proj.active > .projimg {
    border-color: rgba(75, 175, 220, 0.1);
}

.projsubtitle{
    font-size:12pt;
    margin:2mm;
    width:auto;
    height:inherit;
    position:relative;
    color: rgb(234, 232, 248);
    text-shadow: -2.5px -2.5px 0 #000, 2.5px -2.5px 0 #000, -2.5px 2.5px 0 #000, 2.5px 2.5px 0 #000, 0px -2.5px 0 #000, 0px 2.5px 0 #000, -2.5px 0px 0 #000, 2.5px 0px 0 #000;
    opacity: 0;
    z-index: 0;
    transition: opacity 0.5s, z-index 0.5s;
}

.proj.active .projsubtitle {
    opacity: 1;
    z-index: 10;
}

.projoverlay {
    width:inherit;
    height:inherit;
    position:absolute;
    z-index: 0;
    opacity: 0.4;
    transition: opacity 0.5s, z-index 0.5s;
    background: #8090ee;
}
.night .projoverlay {
    background: #405066;
}

.proj.active > .projoverlay {
    opacity: 0;
    z-index: 10;
}

.projtitle {
    font-size:24pt; 
    height:inherit; 
    position:absolute;
    width:auto;
    color: white;
    opacity:0;
    text-shadow: 2px 2px black, 4px 4px black;
    margin: 5px;
    margin-left: -20px;
    text-align:left;
    z-index: 0;
    transition: opacity 0.5s ease-out, margin-left 0.5s, z-index 0.5s;
}

.proj.active > .projtitle {
    opacity: 1;
    margin-left:5px; 
    z-index: 10;
}

.projtitle.projsection {
    opacity: 1;
    width: inherit;
    margin: 5px;
    text-align: center;
    bottom: 0;
    font-size: 36pt;
    transition: font-size 0.5s;
    height:auto;
}
.proj.active .projtitle.projsection {
    font-size: 38pt;
}

.projsub {
    position:absolute;
    width:100%;
    height:auto;
    margin-left:-10%;
    opacity:0;
    z-index: 11;
    background-color: black;
    border-radius: 5px;
    border: 0px;
    transition: opacity 0.5s ease-out, margin-top 0.5s, width 0.5s;
}

.proj.active > .projsub {
    opacity: 0.8;
    margin-top: 100%;
}

.proj {
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 0;
    transition: width 0.5s, height 0.5s, margin 0.5s, z-index 0.5s;
}

.proj.active {
    width: 120%;
    height: 120%;
    z-index: 10;
}