@font-face {
    font-family: 'SharpSansPro';
    src: url('../fonts/SharpSansNo1BoldRegular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
h1,h2,h3,h4, body {
    font-family: 'SharpSansPro', sans-serif;
}

.box {
    margin-top: 12em;
}
.relative .box {
    position: absolute;
    margin: 0;
    top: 25%;
    width: 200px;
    left: 47%;
    text-align: right;
}
.arrow {
    max-height: 75px;
    width: 75px;
}
.play {
    margin: 0 !important;
    width: 75px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.play:hover {
    transform: scale(1.1);
}

.play.pause-state {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 75px;
}

.pause-icon {
    font-size: 60px;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.info {
        width: 150px;
}
.bottom {
    position:absolute;
    bottom: 50px;
    left: 5%;
}
.logo {
    width:300px;
}