* {
box-sizing:border-box;
}

@font-face {
font-family: "Futura PT Medium";
src: url('FuturaPTMedium.otf');
}

#musicPlayer {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center
        }

#playPauseButton {
    font-family: 'Futura PT Medium', sans-serif;
    font-variant: small-caps;
     
    font-size:14pt;
    background-color: transparent;
    color: #fff;
    border: none;
    cursor: pointer;
    margin-top: -20px;
}

#audioPlayer {
    display: none;
}

#audioPlayer::-webkit-media-controls {
    display: none !important;
}

body {
        margin:0;
        padding:0;
        background: url('trans.png');
        color:white;
        font-family: 'Futura PT Medium', sans-serif;
}

a, a:hover, a:active, a:visited {
color:white;
text-decoration:none;
font-weight:bold;
}

h1,h2,h3,h4,h5 {
        margin-top:1em;
        font-family: 'Futura PT Medium', sans-serif;
}

#title {
        margin:0;
        padding:40px 40px 45px 40px;
        width:100%;
        text-align:center;

        background-position:center;
        background-size:cover;
        color:white;
        line-height:1em;
}

#container {
        width:auto;
        margin:50px 18%;
}

.hover-container {
            display: flex;
            align-items: baseline;
        }

.extra-text {
    margin-left: 10px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
   /* background-color: #f0f0f0; */
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.hover-container:hover .extra-text {
    opacity: 1;
}

.linklist {
        width:inherit;
        padding:0;
        margin:0;
        overflow-x:hidden;
}


.link-left, .link-right {
        position:relative;
        font-family: 'Futura PT Medium', sans-serif;
        font-size:20pt;
        display:block;
        margin:0;
        padding:30px;
        width: inherit;
        background-position:center;
        background-size:cover;
}

.link-left .panel, .link-right .panel {
        position:absolute;
        display:flex;
        justify-content: space-evenly;
        top:0;
        left:100%;
        font-weight:normal;
        font-size:14pt;
        height:100%;
        width:75%;
        background-color:#fff;
        opacity:0;
        padding:0 15px 5px 15px;
        transition:0.8s all ease-in-out;
}

.link-left:hover .panel,.link-right:hover .panel {
        left:25%;
        opacity:1;
        transition:0.8s all ease-in-out;
        background-color:#031335;
}


.link-right {
        text-align:right;
}

.link-right .panel {
        left:-100%;
        text-align:left;
}

.link-right:hover .panel {
        left:0%;
}

.panel p {
        position:relative;
        margin:auto;
}