html {scroll-behavior: smooth;}
body, html {margin: 0; padding: 0; height: 100%;}
body {font-family: 'Open Sans', Arial, sans-serif; font-size: 1.4em; line-height: 1.6;}
body.menu-is-open {overflow: hidden;}

h1,h2,h3,h4,h5,h6 {font-family: Montserrat, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin: 0;}
h1 {display: none;}
h2 {font-size: 4.5em; margin: 0 0 0.4em; color: #000; line-height: 1.25;}
h3 {font-size: 2em; margin: 1em 0; line-height: 1.4;}

img {max-width: 100%;}
ol {padding-left: 21px;}
ol a {margin-left: 3px;}

a:link, a:visited {color: #00aacc;}
a:focus, a:active {color: #000;}

::-moz-selection { background: #ffcacb; }
::selection { background: #ffcacb; }

body, main, .page {display: flex; flex-direction: column;}
.page {flex: 1 0 100vh; align-items: center; justify-content: center;}
.container {padding: 6em 48px; position: relative;}
.lyrics footer {color: #aaa; text-transform: uppercase; font-size: 85%; letter-spacing: 1px;}

.social {list-style: none; padding: 0;}
.social li {margin: 0; padding: 0; display: block;}
.social li {position: relative; display: inline-block;}
.social a {margin-left: 14px; font-size: 28px;}
.social li:first-child a {margin-left: 0;}

.page-home {background: url(../images/ED8A9643.jpg) no-repeat center/cover #2b372f; justify-content: end;}
.page-home img {width: 100%; height: auto; margin-bottom: 2em;}
.page-home .skip-to-content {display: block; text-align: center; color: #fff; font-size: 60px; margin-bottom: -40px; outline: none;}
.page-home .skip-to-content .fa {border: 3px solid #fff; border-radius: 54px; width: 66px; height: 66px; padding-top: 2px;}
.page-home .skip-to-content:hover .fa, .page-home .skip-to-content:focus .fa, .page-home .skip-to-content:active .fa {color: #ec612d; border-color: #ec612d;}

.page-album {background-color: #f9a7a8; background-image: linear-gradient(to bottom, #f9a7a8, #f9b1b2); color: #000;}
.page-album .album-cover img {width: 100%; margin-top: 13px;}
.page-album h2 {color: #fff; border-bottom: 6px solid #fff; padding-bottom: 2rem;}
.page-album a {color: #fff;}
.page-album ol {font-size: 120%; font-family: Montserrat, sans-serif; text-transform: uppercase;}
.page-album ol li {margin: 4px 0;}

#ep-totuuksia-popmusiikista {background: #000; color: #fa28d4;}
#albumi-vesala {background: #49bac5;}
#albumi-nakemiin-melankolia {background: #ec612d;}

.singles {margin-top: 1rem;}
.single {border-top: 1px solid rgba(255,255,255,0.3); margin-top: 3.5rem; padding-left: 100px;}
.single .single-cover {float: left; margin: 3rem 0 0 -100px; width: 70px;}
.single h3 {margin-bottom: 0;}
.single p {margin-top: 1rem;}
.single h3 em {background: #fff; color: #f9abac; padding: 0 5px; margin-right: 3px;}
.single-latest p {margin-bottom: 2px;}

.page-lyrics .container + .container {border-top: 6px solid #f4f4f4;}

.main-menu-toggle {position: fixed; top: 16px; right: 16px; width: 56px; height: 56px; z-index: 1001; border: 3px solid #fff; border-radius: 50%; padding: 8px 12px; background: rgba(0,0,0,0.15); backdrop-filter: blur(8px);}
.main-menu-toggle i {display: block; width: 100%; height: 3px; background: #fff;}
.main-menu-toggle .closed i + i {margin-top: 6px;}
.main-menu-toggle .open {display: none;}
.main-menu-toggle:hover, .main-menu-toggle:focus {border-color: #ec612d;}
.main-menu-toggle:hover i, .main-menu-toggle:focus i {background-color: #ec612d;}
.main-menu-toggle[aria-expanded="true"] {border-color: #fff;}
.main-menu-toggle[aria-expanded="true"] .open {display: block;}
.main-menu-toggle[aria-expanded="true"] .closed {display: none;}
.main-menu-toggle .open i {background-color: #fff; transform-origin: 50% 50%;}
.main-menu-toggle .open i:first-child {transform: rotate(45deg); margin-top: 0;}
.main-menu-toggle .open i:last-child {transform: rotate(-45deg); margin-top: -3px;}
.main-menu {position: fixed; top: 0; right: 0; bottom: 0; background-color: #ec612d; z-index: 1000; overflow-y: auto; display: none;
  font-family: Montserrat, sans-serif; font-weight: 700; text-transform: uppercase; font-size: 20px; min-width: 320px; max-width: 380px;
  box-shadow: 0 0 50px rgba(0,0,0,0.4);}
.main-menu[aria-hidden="false"] {display: block;}
.main-menu ul, .main-menu ol, .main-menu li {margin: 0; padding: 0; list-style: none;}
.main-menu ol {font-size: 14px; padding: 8px 0;}
.main-menu a {display: block; padding: 8px 16px; color: #fff;}
.main-menu .lyrics-block {display: flex; align-items: start; margin: 2px 0 0 16px; border: solid rgba(255,255,255,0.2); border-width: 1px 0; padding-bottom: 2rem;}
.main-menu .lyrics-block + .lyrics-block {margin-top: 0; border-top: 0;}
.main-menu .lyrics-block img {width: 60px; margin-top: 20px; filter: grayscale(); mix-blend-mode: screen;}
.main-menu-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding-top: 4.15rem;
}
.main-menu ul.sections {
  flex: 1 0 0;  
}
.main-menu ul.legal {font-size: 1rem; margin-left: 0.4rem; opacity: 0.4; margin: 1rem 0 0.75rem;}

@media (max-width: 767px){
  .page-album h2 {font-size: 2.65em;}
  .social {text-align: center;}
  .social a, .social li:first-child a {font-size: 40px; margin: 0 15px;}
}
@media (max-width: 550px){
  .page-home .skip-to-content {font-size: 40px; margin-bottom: -20px;}
  .page-home .skip-to-content .fa {border: 3px solid #fff; border-radius: 54px; width: 48px; height: 48px;}
}
@media (max-width: 500px){
  body {font-size: 1.3em;}
  .album-highlight img {width: 84px;}
  .container {padding: 4em 48px;}
  .page-album h2 {font-size: 2em;}
  .single h3 {font-size: 1.5em; margin-top: 1.35em;}
}

@media (max-width: 430px){
  .album-highlight img {width: 84px;}
  .container {padding: 4em 25px;}
}

@media (orientation: landscape) and (max-height: 600px) {
  .page-home {background-position: 50% 100%;}
}

@media (orientation: landscape) and (max-height: 500px) {
  .page-home {background-position: 50% 70%;}
  .page-home .container {padding-bottom: 4em;}
  .page-home img {margin-bottom: 1em;}
  .page-home .skip-to-content {font-size: 40px; margin-bottom: -20px;}
  .page-home .skip-to-content .fa {border: 3px solid #e60500; border-radius: 54px; width: 48px;}
}