@font-face {
    font-family: 'Framework7 Icons';
    font-style: normal;
    font-weight: 400;
    src: local('Framework7 Icons'), local('Framework7Icons-Regular'),
      url('assets/fonts/Framework7Icons-Regular.woff2') format('woff2'), url('assets/fonts/Framework7Icons-Regular.woff')
        format('woff'), url('assets/fonts/Framework7Icons-Regular.ttf') format('truetype');
  }

  .f7-icons,
  .framework7-icons {
    font-family: 'Framework7 Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 28px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-feature-settings: 'liga';
    -moz-font-feature-settings: 'liga=1';
    -moz-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
  }

body {
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

.logo {
  background: url('assets/img/Logo-RadioNoirmout-2020-pas-de-fond-logocouleur-1400x1400.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 160px;
  margin: -25px 0;
}

.playerRadio {
  text-align: center;
}

.cover {
    background: url(assets/img/Logo-RadioNoirmout-2020-fond-blanc-logocouleur-1000x1000.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: auto;
    height: 40vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cover img {
    display: block;
    box-shadow: 0 0 10px rgb(0 0 0 / 20%);
    height: 100%;
    object-fit: cover;
}

.page {
  background: rgb(255,255,255);
  background: linear-gradient(165deg, rgba(255,255,255,1) 0%, rgba(252,252,252,1) 45%, rgba(244,244,244,1) 45%, rgba(244,244,244,1) 100%);
}

p#artist {
    font-size: 22px;
    font-weight: bold;
    margin: 18px 0 0 0;
}

p#title {
    font-size: 18px;
    font-weight: 400;
    margin: 6px 0 0 0;
}

.playIcon, .pauseIcon {
    font-size: 100px;
    color: #154aa8;
}

.playIcon:active, .pauseIcon:active {
  opacity: 0.8;
}

.controlButton {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 40px 0;
}

.preloader {
  width: 60px;
  height: 60px;
}

.linkIcon {
  color: #154aa8;
  position: fixed;
  font-size: 35px;
}

.linkIcon:active {
  opacity: 0.5;
}

.linkWebsite {
  right: 25px;
  bottom: 25px;
}

.linkFacebook {
  left: 25px;
  bottom: 25px;
}

.linkInstagram {
  left: 65px;
  bottom: 25px;
}