Home.module.css

.nav {
  position       : absolute;
  left           : 10vh;
  bottom         : 10vh;
  background     : rgba(255, 255, 255, 0.055);
  box-shadow     : 0px 0px 150px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
  padding        : 3em 4em;
  border-radius  : 20px;
}

@media (max-width: 700px) {
  .nav {
    top      : 50%;
    left     : 50px;
    right    : 50px;
    bottom   : auto;
    transform: translateY(-50%);
  }
}

@media (max-width: 440px) {
  .nav {
    left : 10px;
    right: 10px;
  }
}

@media (max-width: 358px) {
  .nav {
    padding: 2em 1em;
  }
}

.button {
  font-family    : 'Readex Pro', Verdana, sans-serif;
  letter-spacing : 0.05em;
  text-align     : left;
  font-style     : normal;
  font-size      : 20px;
  line-height    : 62px;
  cursor         : pointer;
  list-style-type: none;
  display        : block;
  margin         : 1.5em 1em 0.5em 0.1em;
  padding        : 0.1em 1em 0.1em 14em;
  text-decoration: none;
  color          : #F3F2ED;
  width          : 100%;
  height         : 3em;
  position       : relative;
  border-radius  : 12px;
}

@media (max-width: 536px) {
  .button {
    margin        : 0.4em 1em 0.4em 0.0em;
    padding       : 0.1em 0.4em 0.02em 0em;
    letter-spacing: 0em;
    font-size     : 15px;
  }
}

.button.normal {
  color           : #F3F2ED;
  background-color: rgba(0, 0, 0, 0);
  border          : 2px solid rgba(243, 242, 237, 0.95);
  box-sizing      : border-box;
}

.button.highlighted {
  color           : #F4E9CB;
  background-color: rgba(0, 0, 0, 0);
  border          : 2px solid #E7C878;
  box-sizing      : border-box;
}

.button.highlighted:hover .button_div {
  border: solid 1px #ffe1a9;
}

.button.play {
  color           : #ffe1a9;
  background-color: #232020b7;
  border          : 2px solid #d6ad45;
  box-sizing      : border-box;
}

.button.play:hover {
  border: solid 1px #FFCC4A;
}

.logo {
  width  : 65%;
  margin : auto;
  display: block;
}

.icon {
  width    : 25px;
  display  : inline-block;
  position : absolute;
  left     : 1.3em;
  top      : 50%;
  transform: translateY(-50%);
}

.playicon {
  position : absolute;
  height   : 55%;
  left     : calc(50% - 2.25em);
  transform: translateX(-50%);
  top      : 50%;
  transform: translateY(-50%);
}

.play_button_text {
  position : absolute;
  left     : calc(50% - 0.25em);
  transform: translateX(-50%);
  top      : 50%;
  transform: translateY(-50%);
}

@media (max-width: 536px) {
  .icon {
    width    : 25px;
    display  : inline-block;
    position : absolute;
    left     : 0.8em;
    top      : 50%;
    transform: translateY(-50%);
  }
}

.button_text {
  display    : inline-block;
  margin-left: 1.75em;
  position   : absolute;
  left       : 1.3em;
  top        : 50%;
  transform  : translateY(-50%);
}

.button:hover {
  border: solid 1px rgba(0, 0, 0, 0);
}

.button_div {
  position       : absolute;
  width          : 100%;
  height         : 100%;
  top            : 0;
  left           : 0;
  border-radius  : 12px;
  backdrop-filter: blur(10px);
  z-index        : -1;
}

.button:hover .button_div {
  border: solid 1px #dddddd;
}

.loading {
  display   : inline-block;
  transform : translateY(6px);
  margin-top: -7px;
}