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

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slidein {
    from { background-position: 25% 50%; }
    to   { background-position: 50% 50%; }
}

/* Firefox < 16 */
@-moz-keyframes slidein {
    from { background-position: 25% 50%; }
    to   { background-position: 50% 50%; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes slidein {
    from { background-position: 25% 50%; }
    to   { background-position: 50% 50%; }
}

/* Internet Explorer */
@-ms-keyframes slidein {
    from { background-position: 25% 50%; }
    to   { background-position: 50% 50%; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { background-position: 25% 50%; }
    to   { background-position: 50% 50%; }
}

body {
    font-size: 14px;
    background-color: #000;
}

/* Animation */

.banner-container {
    -webkit-animation: slidein 5s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: slidein 5s; /* Firefox < 16 */
    -ms-animation: slidein 5s; /* Internet Explorer */
    -o-animation: slidein 5s; /* Opera < 12.1 */
    animation: slidein 5s;
}

.title-container .img-container,
.tagline,
.trailer,
.social-media-link-container,
.footer {
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;

    -webkit-animation: fadein 2s ease-in both; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 2s ease-in both; /* Firefox < 16 */
    -ms-animation: fadein 2s ease-in both; /* Internet Explorer */
    -o-animation: fadein 2s ease-in both; /* Opera < 12.1 */
    animation: fadein 2s ease-in both;
}

.banner-container {
    width: 100%;
    background: #23261b url("/image/cover-art.png") no-repeat 50% 50%;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.banner {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
}

.tagline {
    background-color: rgba(0, 0, 0, 0.4);

    -webkit-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

.tagline .img-container {
    width: 90%;
    margin: 0 auto;
    padding: 0.2857142857142857rem; /* 4/14 */
}

.tagline .tagline-img {
    max-width: 100%;
    height: auto;
}

.title-container {
    padding: 1px 0;
    width: 80%;
    margin: 0 auto;
}

.title-container .img-container {
    text-align: center;
    margin: 1rem auto;
}

.title-container .title {
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    animation-delay: 1s;
}

.title-container .date {
    width: 80%;
    margin-bottom: 1rem;

    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
    animation-delay: 1.5s;
}

.title-container .action {
    width: 80%;
    margin-bottom: 1rem;

    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    animation-delay: 2s;
}

.title-container .img-container img {
    vertical-align: middle
}

.title-container .img-link {
    display: inline-block;
    transition: opacity .2s ease-in-out;
    opacity: 1;
}

.title-container .img-link img {
    vertical-align: middle;
}

.title-container .action .img-link {
    transition: box-shadow .2s ease-in-out, background-color .2s ease-in-out;
    border: solid 3px #ffaf5d;
    padding: 0.2857142857142857rem 0.8571428571428571rem;
    border-radius: 10rem;
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 1rem transparent;
}

.title-container .action .img-link:hover {
    box-shadow: 0 0 1rem rgba(255, 234, 170, 0.5);
    background-color: rgba(0, 0, 0, 0.8);
}

.trailer {
    width: 90%;
    margin: 1rem auto;

    -webkit-animation-delay: 2.5s;
    -moz-animation-delay: 2.5s;
    animation-delay: 2.5s;
}

.social-media-link-container {
    margin: 1rem auto;
    text-align: center;

    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    animation-delay: 3s;
}

.social-media-link-container .item-list {
    margin: 1.142857142857143rem 0; /* 16/14 */
    padding: 0;
    list-style: none;
}

.social-media-link-container .item-list .item {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.2857142857142857rem; /* 4/14 */
}

.social-media-link-container .item .item-link {
    font-size: 18px;
    background-color: #3a5795;
    color: #fff;
    display: block;
    border-radius: 1.142857142857143rem; /* 16/14 */
    width: 2.285714285714286rem; /* 32/14 */
    height: 2.285714285714286rem; /* 32/14 */
    line-height: 2.285714285714286rem; /* 32/14 */
    box-shadow: 0 0 0.4285714285714286rem rgba(0, 0, 0, 0.15); /* 6/14 */
}

.social-media-link-container .item-link .fa {
    height: 0.4375rem; /* 32/14 */
    line-height: 0.4375rem; /* 32/14 */
    vertical-align: middle;
}

.social-media-link-container .item .soundcloud {
    background-color: #f50;
    background: linear-gradient(#f70, #f30);
}

.social-media-link-container .item .instagram {
    background: #f7cb61;
    background: -moz-linear-gradient(45deg,  #f7cb61 0%, #f17930 14%, #f17930 14%, #e11053 54%, #3f3ce0 100%);
    background: -webkit-linear-gradient(45deg,  #f7cb61 0%,#f17930 14%,#f17930 14%,#e11053 54%,#3f3ce0 100%);
    background: linear-gradient(45deg,  #f7cb61 0%,#f17930 14%,#f17930 14%,#e11053 54%,#3f3ce0 100%);
}

.social-media-link-container .item .twitter {
    background-color: #55acee;
}

.social-media-link-container .item .youtube {
    background-color: #E62117;
}

.social-media-link-container .item .pinterest {
    background-color: #d5181e;
}

.social-media-link-container .item .google-plus {
    background-color: #db4437;
}

.footer {
    text-align: center;
    margin: 2rem auto;
    -webkit-animation-delay: 4s;
    -moz-animation-delay: 4s;
    animation-delay: 4s;
}

.link-nav {
    font-family: 'VT323', monospace;
    margin: 1rem auto;
    text-align: center;
}

.link-nav .item-list {
    margin: 1.142857142857143rem 0; /* 16/14 */
    padding: 0;
    list-style: none;
}

.link-nav .item {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.2857142857142857rem; /* 4/14 */
    padding: 0 0.2857142857142857rem; /* 4/14 */
}

.link-nav .item-link {
    font-size: 30px;
    border-bottom: solid 2px transparent;
    background: -webkit-linear-gradient(#fefec3, #fe8325);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: border-bottom-color .2s ease-in-out;
    -webkit-transition: border-bottom-color .2s ease-in-out;
    -moz-transition: border-bottom-color .2s ease-in-out;
    -ms-transition: border-bottom-color .2s ease-in-out;
}

.link-nav .item-link:hover {
    border-bottom-color: #feb96b;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .title-container {
        width: 65%;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .social-media-link-container .item-list {
        margin-bottom: 0;
    }

    .social-media-link-container .item .item-link {
        font-size: 28px;
        border-radius: 1.714285714285714rem; /* 24/14 */
        width: 3.428571428571429rem; /* 48/14 */
        height: 3.428571428571429rem; /* 48/14 */
        line-height: 3.428571428571429rem; /* 48/14 */
    }

    .social-media-link-container .item-link .fa {
        height: 3.428571428571429rem; /* 48/14 */
        line-height: 3.428571428571429rem; /* 48/14 */
    }
}