@import url('https://fonts.googleapis.com/css?family=Roboto:100,300&display=swap');

@font-face {
    font-family: 'Roboto';
}
*,
html,
body {
}
.page{
    display: flex;
    flex-direction: column;
    min-height: 98vh;
}
/* basic css formatting */
body {
    background-color: rgb(188, 192, 179);
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 1.1rem;
}
.titel{
    vertical-align: top;
    text-transform: uppercase;
    padding-top: 2vw;
    padding-left: 2vw;
    padding-right: 2vw;
    display: flex;
    justify-content: space-between;
}
.images{
    padding-left: 2vw;
    padding-right: 2vw;
    display: flex;
    justify-content: space-between;
}
.footer{
    color: black;
    padding-left: 2vw;
    padding-right: 2vw;
    display: flex;
    justify-content: space-between;
    margin-top: auto;

}
/* code chaos begins here */

/* remove space above artwork-titel */
.titel p{
    margin-top: 0%;
}

/* set image width */
.img{
    width: 30vw;
    align-self: center;

}

/* format spacer before and after center images */
.spacer{
    flex-grow: 1;

}

/* fix for break email/phone */
.footer p{
    text-align: center;
    line-height: 1.6rem;

}

/* format mailto link */
a{
    color:black;
    text-decoration: none;
}




/* responsive layout for footer */
.tiny-mobile {
    display: none;
}
.mobile {
    display: none;
}
.desktop{ 
    display: block;
}
@media only screen and (max-width: 768px){
    .tiny-mobile {
        display: none;
    }
    .mobile {
        display: block;
    }
    .desktop{ 
        display: none;
    }
    .beschrieb{
        font-size: 1.8rem;
    }
    .page{
        min-height: 88vh;
    }
}

@media only screen and (max-width: 540px){
    .tiny-mobile {
        display: block;
    }
    .mobile {
        display: none;
    }
    .desktop{ 
        display: none;
    }
    .beschrieb{
        font-size: 1.5rem;
    }
    .footer{
        font-size: 0.9rem;
    }
    .page{
        min-height: 85vh;
    }
    .close{
        display: none;
    }
}


/* overlay with artwork info*/
.images_color_overlay{
    filter: blur(20px);
    /* object-fit: cover;
    background-color: rgba(188, 192, 179, 1);
    overflow: hidden; */
    opacity: 0.5;
    z-index: 2;
    display: flex;
    }

.beschrieb{
    position: absolute;
    text-align: center;
    display: flex;
    align-items: center;
    align-self: center;
    height: 88vh;
    font-family: 'Roboto';
    font-weight: 300;
    z-index: 3;
}
.close{
    position: absolute;
    display: flex;
    align-self: flex-end;
    font-family: 'Roboto';
    font-weight: 100;
    padding-right: 5vw;
    /* padding-top: 1vw; */
    font-size: 8rem;
    color: rgb(125, 125, 125);
    margin: 0;
    padding-top: 2vw;
    z-index: 3;
}


/* hide artwork description command */
.beschrieb{
    display: none;
}
.close{
    display: none;
}
.images_color_overlay{
    filter: none;
    opacity: 1;
}
.showmore{
    visibility: visible;
}
.nextartwork{
    visibility: visible;
}
/* fix horizontal disalignment */
#showmore{
    justify-self: flex-start;
    grid-row: 1;
}
#nextartwork{
    justify-self: flex-end;
    grid-row: 1;
}
.mailto{
    grid-row: 1;

}

.footer{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}