@import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond');

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
body {
    font-family: 'Cormorant Garamond', serif;
    color: #fff;
    font-size: 16px;
    background: #1d1e1f;
    text-align: center;
}
h1 {
    margin: 0 0 15px 0;
    padding: 0;
    font-size: 25px;
}
h2 {
    margin: 0;
    padding: 0;
    font-size: 15px;
}
a {
    color: rgb(143, 143, 143);
    text-decoration: none;
}
    a:hover {
        text-decoration: underline;
    }

a.back {
    color: #fff;
    text-decoration: none;
    font-size: 40px;
    margin-top: 20px;
    padding: 0 5px;
    transition: transform 0.3s ease;
}
    a.back:hover {
        transform: translate(-5px, 0);
    }

div {
    display: block;
    margin: 0;
    padding: 0;
}
*, :after, :before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* GENERAL WRAPPER */
.wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    padding: 40px;
}

    /* ALBUM COVER */
    .cover {
        min-width: 600px;
        min-height: 600px;
        background-color: #111015;
        position: relative;
        overflow: hidden;
        margin-bottom: 50px;
        -webkit-box-shadow: 10px 10px 16px -1px rgba(0,0,0,0.31);
        -moz-box-shadow: 10px 10px 16px -1px rgba(0,0,0,0.31);
        box-shadow: 10px 10px 16px -1px rgba(0,0,0,0.31);
        transition: all 0.3s ease;
    }

        .fractal {
            position: absolute;
            z-index: 1;
            top: 22%;
            left: 50%;
            margin-left: -100px;
            width: 0;
            height: 0;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 170px solid #dcdcdc;
        }
            .fractal:before {
                content: "";
                position: absolute;
                z-index: 2;
                width: 0;
                height: 0;
                border-left: 95px solid transparent;
                border-right: 95px solid transparent;
                border-bottom: 161px solid #7b7b7b;
                top: 6px;
                left: -95px;
            }
            .fractal:after {
                content: "";
                position: absolute;
                z-index: 3;
                width: 0;
                height: 0;
                border-left: 89px solid transparent;
                border-right: 89px solid transparent;
                border-bottom: 151px solid #111015;
                top: 13px;
                left: -89px;
            }

        .ray {
            width: 273px;
            height: 4px;
            background: #dcdcdc;
            position: absolute;
            z-index: 4;
            top: 39%;
            left: -10px;
            transform: rotate(-12deg);
        }
        .gradient-cont {
            width: 90px;
            height: 49px;
            position: absolute;
            top: 172px;
            left: 260px;
            z-index: 4;
            overflow: hidden;
            transform: rotate(12deg);
        }
            .gradient {
                position: absolute;
                width: 100px;
                height: 50px;
                transform: rotate(-26deg);
                top: 22px;
                background: rgb(238,238,238); /* Old browsers */
                background: -moz-linear-gradient(left, rgba(238,238,238,1) 6%, rgba(0,0,0,0) 55%);
                background: -webkit-linear-gradient(left, rgba(238,238,238,1) 6%,rgba(0,0,0,0) 55%);
                background: linear-gradient(to right, rgba(238,238,238,1) 6%,rgba(0,0,0,0) 55%);
            }
        
        .rainbow-cont {
            position: absolute;
            top: 198px;
            right: -120px;
            z-index: 0;
            width: 100%;
            height: 100%;
            perspective: 500px;
        }
            .rainbow {
                transform: rotate3d(100, -150, 176, 68deg);
                width: 100%;
                height: 57px;
                background: rgb(238,238,238); /* Old browsers */
                background: -moz-linear-gradient(
                    bottom, 
                    #bc142d 16.6%, #df7a0e 16.6%,
                    #df7a0e 33.2%, #fafc01 33.2%,
                    #fafc01 49.8%, #68b602 49.8%,
                    #68b602 66.4%, #54b3df 66.4%,
                    #54b3df 83%, #564080 83%
                );
                background: -webkit-linear-gradient(
                    bottom, 
                    #bc142d 16.6%, #df7a0e 16.6%,
                    #df7a0e 33.2%, #fafc01 33.2%,
                    #fafc01 49.8%, #68b602 49.8%,
                    #68b602 66.4%, #54b3df 66.4%,
                    #54b3df 83%, #564080 83%
                );
                background: linear-gradient(
                    to bottom, 
                    #bc142d 16.6%, #df7a0e 16.6%,
                    #df7a0e 33.2%, #fafc01 33.2%,
                    #fafc01 49.8%, #68b602 49.8%,
                    #68b602 66.4%, #54b3df 66.4%,
                    #54b3df 83%, #564080 83%
                );
            }
        
        .title {
            width: 160px;
            height: 160px;
            border-radius: 50%;
            border: 1px solid #dcdcdc;
            position: absolute;
            z-index: 2;
            bottom: 40px;
            left: 40px;
            transform: rotate(4deg);
        }
            .title:before {
                content: "";
                width: 169.5px;
                height: 169.5px;
                border-radius: 50%;
                border: 1px solid #dcdcdc;
                position: absolute;
                z-index: 1;
                bottom: -6px;
                left: -6px;
            }
            .title:after {
                content: "PINK\A FLOYD\A THE\A DARK SIDE\A OF THE\A MOON";
                white-space: pre;
                width: 150px;
                height: 150px;
                border-radius: 50%;
                position: absolute;
                z-index: 2;
                bottom: 0px;
                left: 6px;
                color: #dcdcdc;
                font-family: 'Cormorant Garamond', serif;
                text-align: center;
                line-height: 1;
                font-weight: 100;
                font-size: 23px;
            }


@media (max-width: 720px) {
    .cover {
        transform: scale(0.7);
        margin: -50px;
    }
}

@media (max-width: 530px) {
    .cover {
        transform: scale(0.4);
        margin: -150px;
    }
}