/* Zoom concept inspired by Mat Smith */


/* Code created by me */


/*These are my ideas. I'm happy to share them with you. If you are inspired by what you see here, I always appreciate a shout-out */


/* ==== Basic styles and set up ==== */

html,
body {
    min-height: 100%;
}

body {
    font: medium Helvetica, Arial;
    padding: 0;
    margin: 0;
    color: #f2f2f2;
}

nav,
dl,
#discography,
article {
    box-sizing: border-box;
}

nav {
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    right: 0;
    background: hsla(0, 0%, 20%, 1);
    color: #f2f2f2;
    opacity: .8;
    transition: all .5s;
    transform: translateY(-85%);
}

nav:hover {
    opacity: 1;
    transform: translateY(0);
}

.nav-toggle {
    text-align: center;
    padding: 1rem;
    margin: 0;
}

.gallery--link {
    display: block;
    margin: 1rem 1rem .2rem 1rem;
    text-transform: uppercase;
}

.return {
    margin: 0 1rem;
    font-size: .8rem;
}

.note {
    font-size: .8rem;
    background: transparent;
}

a:link,
a:visited,
a:hover,
a:active,
a:focus {
    display: block;
    color: #f2f2f2;
    text-decoration: none;
}

a:hover,
a:focus {
    background: rgba(204, 136, 52, .7);
}

li {
    margin: .628rem;
    padding: 0;
}

dl,
.welcome {
    width: 95%;
    padding: 1em;
    background: -moz-linear-gradient(left, hsla(0, 0%, 20%, 1) 0%, hsla(0, 0%, 20%, 0.3) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, hsla(0, 0%, 20%, 1) 0%, hsla(0, 0%, 20%, 0.3) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, hsla(0, 0%, 20%, 1) 0%, hsla(0, 0%, 20%, 0.3) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6333333', endColorstr='#4d333333', GradientType=1);
    /* IE6-9 */
}

dt {
    font-weight: bold;
    font-size: 2em;
    display: inline-block;
}

dd {
    margin: 0;
}

.year {
    display: inline-block;
    font-weight: bold;
}

.year:before {
    content: " (";
}

.year:after {
    content: ") ";
}

.tracks ol,
.tracks ol ol ol {
    list-style: decimal;
}

.tracks ol ol {
    list-style: upper-roman;
    margin: .314em 0;
}

.flex {
    display: flex;
    justify-content: flex-start;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex__item {
    flex-basis: 33%;
}

.columns {
    list-style: none;
    column-count: 4;
}


/* ==== Our container ==== */

#discography {
    overflow: hidden;
    padding: 1em;
    position: absolute;
    top: 0;
    min-height: 100%;
    left: 0;
    right: 0;
    background: #fff;
}


/* === The articles we want to zoom through === */

article {
    /* stack them on top of each other, set opacity to 0 */
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fefefe no-repeat left top;
    background-size: cover;
    color: #f2f2f2;
    padding: 50px 1em 1em;
}

article#gallery {
    background-image: url('covers/rush-gallery.jpg');
}

article#rush {
    background-image: url('covers/rush.jpg');
}

article#fly {
    background-image: url('covers/fly-by-night.jpg');
}

article#caress {
    background-image: url('covers/caress-of-steel.jpg');
}

article#starman {
    background-image: url('covers/2112.jpg');
}

article#stage {
    background-image: url('covers/all-the-worlds-a-stage.jpg');
}

article#kings {
    background-image: url('covers/farewell-to-kings.jpg');
}

article#hemi {
    background-image: url('covers/hemispheres.jpg');
}

article#perm {
    background-image: url('covers/permanent-waves.jpg');
}

article#moving {
    background-image: url('covers/moving-pictures.jpg');
}

article#exit {
    background-image: url('covers/exit-stage-left.jpg');
}

article#signals {
    background-image: url('covers/signals.jpg');
}

article#grace {
    background-image: url('covers/grace-under-pressure.jpg');
}

article#power {
    background-image: url('covers/power-windows.jpg');
}

article#hold {
    background-image: url('covers/hold-your-fire.jpg');
}

article#show {
    background-image: url('covers/show-of-hands.jpg');
}

article#presto {
    background-image: url('covers/presto.jpg');
}

article#roll {
    background-image: url('covers/roll-the-bones.jpg');
}

article#counter {
    background-image: url('covers/counterparts.jpg');
}

article#test {
    background-image: url('covers/test-for-echo.jpg');
}

article#different {
    background-image: url('covers/different-stages.jpg');
}

article#vapor {
    background-image: url('covers/vapor-trails.jpg');
}

article#feedback {
    background-image: url('covers/feedback.jpg');
}

article#rio {
    background-image: url('covers/rush-in-rio.jpg');
}

article#snakes {
    background-image: url('covers/snakes-and-arrows.jpg');
}

article#snakeslive {
    background-image: url('covers/snakes-and-arrows-live.jpg');
}

article#clockwork-singles {
    background-image: url('covers/clockwork.jpg');
}

article#time-machine {
    background-image: url('covers/time-machine-live-cover.jpg');
}

article#clockwork-angels {
    background-image: url('covers/clockwork-angels-cover.jpg');
}

article#abc {
    background-image: url('covers/abc-1974-cover.jpg');
}

article#clockwork-live {
    background-image: url('covers/clockwork-angels-tour-cover.jpg');
}


/* === Magic Time === */

article#gallery,
article:target {
    /* If the article is the target of a link ... */
    opacity: 1;
    transition: opacity 2s;
    transform: scale(1) skew(0deg);
    z-index: 1;
}

article:not(:target) {
    /* If the article <b>is not</b> the target (i.e. all other articles) */
    opacity: 0;
    z-index: 0;
    transition: all 2s;
    transform: scale(5) skew(-30deg);
}