:root {
    --card-width: 0px;
    --card-height: 0px;
}

body {
    margin: 0;
    color: #FFF;
    background-color: #FD940A;
    font-family: sans-serif;
}

#container {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-image: radial-gradient(circle, #F9A72B 0%, #FA9026 70%, #FB6C1F 100%);
}

#image-list{
    width: calc(100% - 10px);
    max-width: 800px;
    margin: 20px auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, var(--card-width));
    justify-content: space-evenly;
    row-gap: 10px;
}

/** ********** header and title icons *************/
#header {
    background: rgba(255, 255, 255, 0.3);
    grid-column: 1 / -1;
    border-radius: 5px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    display: grid;
    grid-template-columns: 150px 1fr 150px;
    grid-template-rows: minmax(120px, auto) minmax(30px, auto);
}

h1 {
    text-shadow: 0px 1px 3px rgba(0, 0, 0, .2);
    font-size: 26px;
    line-height: 30px;
    color:#333;
    margin: 0;
    justify-self: center;
    align-self: center;
    text-align: center;
}
h1 a {
    color:#333;
    text-decoration: none;
}
h2 {
    margin: 0;
    text-shadow: 0px 0px 2px rgba(0, 0, 0, .1);
    font-size: 22px;
    line-height: 30px;
    color:#333;
    justify-self: center;
    align-self: center;
    text-align: center;
}

#title-left-icon, #title-right-icon {
    grid-row: 1 / span 2;
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 150px;
}

#title-left-icon {
    background-image: url('images/icon-left.png');
}
#title-right-icon {
    grid-column: 3;
    background-image: url('images/icon-right.png');
}


/* On screens that are 600px or less, set the background color to olive */
@media screen and (max-width: 600px) {
    #header {
        grid-template-columns: 110px 1fr 80px;
    }
    h1 {
        font-size: 20px;
    }
    h2 {
        font-size: 16px;
    }
}

.loader {
    grid-column: 1 / -1;
    margin-top: 60px;
    border: 8px solid rgba(255, 255, 255, .6);
    border-radius: 50%;
    border-top: 8px solid #AB660C;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    justify-self: center;
    box-shadow: 0 0 3px 0 rgba(0,0,0,0.2);
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.card {
    width: var(--card-width);
    height: var(--card-height);
    display: inline-block;
    border-radius: 5px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);

    background: #000;
    background-position: center;
    background-repeat: no-repeat;

    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.card:after {
    content: "";
    position: absolute;
    top: -50%;
    left: -60%;
    width: 20%;
    height: 200%;
    opacity: 0;
    transform: rotate(30deg);

    background: rgba(255, 255, 255, 0.13);
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.1) 55%,
        rgba(255, 255, 255, 0.2) 80%,
        rgba(255, 255, 255, 0.0) 100%
    );
}
/* Hover state - trigger effect */
.card:hover:after {
    opacity: 1;
    left: 130%;
    transition-property: left, top, opacity;
    transition-duration: 0.7s, 0.7s, 0.15s;
    transition-timing-function: ease;
}
.card:active:after {
    opacity: 0;
}

.folder {
    background-color: rgb(63, 81, 181);
    background: linear-gradient(135deg, rgba(63,81,181,1) 0%, rgba(70,85,170,1) 100%);
}

.card label {
    color: #fff;
    position: absolute;
    bottom: 0;
    padding: 2px;
    font-size: 14px;
    width: 100%;
    text-align: center;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, .8);
    cursor: pointer;
}

.folder label {
    top: calc(50% + 30px);
    bottom: auto;
    transform: translateY(-50%);
    font-size: 18px;
    text-shadow: none;
}

.folder:before {
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    left: calc(50% - 20px);
    top: calc(50% - 35px);
    
    background-position: center;
    background-repeat: no-repeat;
    background-size: 40px;
    background-image: url('data:image/svg+xml;utf8,<svg enable-background="new 0 0 1000 1000" version="1.1" viewBox="0 0 1000 1000" fill="white" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="m989.7 280.2c1.3-9.1-1-18.3-6.4-25.7s-13.4-12.2-22.3-13.5l-90.2-13.3-16.4-91.3c-3.4-18.8-21.1-31.3-39.4-27.8l-330.2 62.2-256.8-37.9c-18.5-2.7-35.7 10.4-38.4 29.3l-9.3 65.8-142.6 26.9c-8.9 1.7-16.7 6.8-21.8 14.4-5.1 7.5-7 16.9-5.4 25.9l102.3 568.4c1.6 9 6.7 17 14.1 22.2 5.7 4 12.4 6.1 19.2 6.1 2.1 0 4.1-0.2 6.1-0.6l454.2-85.5 269.1 39.7c1.6 0.2 3.3 0.4 4.9 0.4 16.6 0 31.1-12.5 33.5-29.7l9.9-70.1 5.7-1.1c18.4-3.5 30.5-21.5 27.2-40.3l-15.1-84 48.1-340.5zm-195.8-97.3 6.2 34.3-105.6-15.6 99.4-18.7zm-663.2 397-47.4-263.2 86.8-16.4-39.4 279.6zm42.7 237.1-13.9-77 237.3 35-223.4 42zm729.8-409.3-30.2 214.4-9.1 64.9-10.2 72.3-1.8 12.7-36.9-5.4-209.7-30.9-419.4-61.9 54.6-386.7 10.2-72.4 1.2-8.5 24.6 3.6 209.7 30.9 327 48.3 104.7 15.4-14.7 103.3z"/><path d="m392 449c35.6 5.2 68.6-20 73.7-56.3 5.1-36.4-19.5-70.1-55.1-75.3-35.6-5.3-68.6 20-73.7 56.3-5.2 36.3 19.5 70.1 55.1 75.3z"/><path d="m773 495.4-61.7 65.4-77.9-156.8-147.9 173.7s-194.4-80-247.9 58.8l501.9 74 74.2 10.9-4.3-24.1-36.4-201.9z"/></svg>');
}

.pswp__button--download {
    background-position: -44px -44px;
}