@import 'css2.css';

*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
    font-family: alegreya sans sc, sans-serif;
    font-size: 10px;
    backface-visibility: hidden
}

*::selection {
    color: #fff;
    background: #fff
}

a {
    color: inherit;
    text-decoration: none;
    font-size: inherit
}

.background__video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden
}

.background__video video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: auto;
    width: auto;
    min-height: 100vh;
    min-width: 100vw
}

.background__video--cover {
    position: absolute;
    top: 0;
    left: 0;
    background-color: hsla(254, 40%, 5%, .9);
    height: 100%;
    width: 100%
}

.wrapper {
    position: relative;
    margin-top: 20rem;
    left: 50%;
    transform: translateX(-50%);
    height: 60rem;
    width: 100%;
    max-width: 60rem
}

.wrapper--top {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 32rem;
    height: 30rem
}

.title {
    color: #fff;
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translate(-50%, -20%);
    font-size: 8.6rem;
    font-weight: 200
}

.musicPlayer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32rem
}

.pause {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4rem;
    display: none;
    pointer-events: none;
    animation: stateSwitch .5s ease-in-out
}

.play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    width: 4rem;
    pointer-events: none;
    animation: stateSwitch .5s ease-in-out
}

@keyframes stateSwitch {
    0% {
        opacity: 0
    }

    100% {
        opacity: 100%
    }
}

.hoverable:hover {
    cursor: url(../fonts/select.svg), pointer
}

.currentlyPlaying {
    color: #fff;
    position: absolute;
    top: 75%;
    left: 50%;
    text-align: center;
    white-space: nowrap;
    width: 100%;
    transform: translate(-50%, 0)
}

.currentlyPlaying--nowPlaying {
    font-size: 2rem;
    font-weight: 400;
    user-select: none
}

.currentlyPlaying--nowPlaying--selector {
    font-size: 1.8rem;
    font-weight: 200
}

.wrapper--bottom {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 30rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-content: flex-start;
    padding-top: 5rem;
    padding-bottom: 20rem
}

.linkButton {
    height: 4rem;
    width: 20rem;
    border-radius: 2rem;
    border: 1px solid rgba(255, 255, 255, .75);
    overflow: hidden;
    position: relative;
    transition: all .5s;
    box-shadow: 0 0 2px 2px transparent;
    margin: 0 1rem 2rem
}

.linkButton:hover {
    cursor: url(../fonts/select.svg), pointer;
    border: 1px solid #fff;
    transform: scale(1.05);
    transition: all .1s
}

.linkButton:active {
    transform: scale(1)
}

.linkButton--background {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 4rem;
    width: 20rem;
    background-color: #0a0812;
    border-radius: 2rem;
    transition: all .5s
}

.linkButton:hover .linkButton--background {
    transform: translate(25%, -50%)
}

.linkButton--text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, .75);
    font-size: 2rem;
    font-weight: 300;
    transition: all .5s
}

.linkButton:hover .linkButton--text {
    transform: translate(0, -50%);
    left: 13%;
    color: #fff
}

.linkButton--icon {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(200%, -50%);
    transition: all .5s;
    height: 2.6rem;
    width: 5rem
}

.linkButton--icon.linkImg {
    height: 1.2rem
}

.linkButton--icon img {
    height: 100%;
    width: auto
}

.linkButton:hover .linkButton--icon {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%)
}

.musicPlayerSection {
    display: none
}

body,
html {
    cursor: url(../fonts/cursor.svg), default;
    height: 100%
}