/* latin *//* @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 300; font-display: swap; src: url( "fonts/roboto-thin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin *//* @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: url( "fonts/roboto-regular.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin *//* @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 900; font-display: swap; src: url( "fonts/poppins-black-italic-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }*/ body { color: #fff; font-family: 'Poppins', sans-serif; font-size: 16px; line-height: 1.6; background-color: #191919; } .album-cover { height: calc(100vh * 0.618); } h1 { line-height:.9 } h3 { font-size: calc(1rem * 1.618); color: rgba(255, 255, 255, .5); line-height: 1.6; } h1 .logo-first { font-size:calc(400px/2); } h1 .logo-second { font-size:calc(231px/2); } p { font-size: 1rem; color:rgba(255,255,255,.8) } a, a:visited, a:link, a:hover{ color:#6B9FBF!important; text-decoration: none; } .album-title { font-size: calc(180px/2); } .roboto-light { font-family: "Roboto", sans-serif; font-weight: 300; font-style: normal; } .roboto-regular { font-family: "Roboto", sans-serif; font-weight: 400; font-style: normal; } .poppins-black-italic { font-family: "Poppins", sans-serif; font-weight: 900; font-style: italic; } .cover-container { background-color: #000; background-size: 74%; -webkit-background-clip: text; background-clip: text; color: rgba(255,255,255,.2); display: inline-block; background-position: center 20px; background-repeat: no-repeat; } .modal-body { overflow-x: hidden; } .modal-content { background-color: #000; text-align: left; line-height: 2; text-transform: initial; padding: 1em; hyphens: auto } .address { max-width: 170px; padding-top: 1em; padding-bottom: 1em; } @media (max-width:767px) { #header { background-size: cover; padding: 4em 1em; text-align: center } h1 .logo-first { font-size:calc(400px/6); } h1 .logo-second { font-size:calc(231px/6); } h1.mb-5 { margin-bottom: 1rem!important } .album-title { font-size: calc(180px/5); } h2.mb-5 { margin-bottom:1rem!important } h3.mt-5 { font-size: 1rem; margin-top: 1rem !important; margin-bottom: 1rem !important } } @media (min-width:768px) { .modal-body { max-width: calc(100vw - 38.2vw); } .modal-content { padding:6em; } #kontaktModal .modal-body { overflow-y: auto; max-width: 500px; } } /* iPad */ @media only screen and (min-width: 768px) and (max-width: 1399px) and (orientation: portrait) { #header { background-size: cover; /*background-image: url('media/images/bg-header.webp');*/ } } @media only screen and (min-width: 768px) and (max-width: 1399px) and (orientation: landscape) { .cover-container { background-size: cover; padding: 4em 1em; } } /* Ab Desktop 1280 x 720 */ @media only screen and (min-width: 1025px) and (max-width: 1919px) { h1 .logo-first { font-size: calc(400px/3); } h1 .logo-second { font-size: calc(231px/3); } .album-title { font-size: calc(180px/3); } } @media only screen and (min-width: 1920px) and (max-width: 2879px) { h1 .logo-first { font-size: calc(400px/2); } h1 .logo-second { font-size: calc(231px/2); } .album-title { font-size: calc(180px/2); } } @media only screen and (min-width: 2880px) and (max-width:3839px){ h1 .logo-first { font-size: calc(400px); } h1 .logo-second { font-size: calc(231px); } .album-title { font-size: calc(180px); } h3 { font-size: calc(1rem * 1.618 *2); } p { font-size: calc(1rem * 2) } } @media only screen and (min-width: 3840px) { h1 .logo-first { font-size: calc(400px * 2); } h1 .logo-second { font-size: calc(231px * 2); } .album-title { font-size: calc(180px * 2); } p { font-size: calc(1rem * 2) } h3 { font-size: calc(1rem * 1.618 *2); } } /* #countdown { display: flex; justify-content: center; align-items: center; font-family: Arial, sans-serif; color: #333; } #countdown > div { margin: 0 10px; text-align: center; } #countdown span { font-size: 2em; font-weight: bold; } */