@charset "UTF-8"; html { font-family: "Jost", sans-serif; } body { margin: 0; background-color: #011820; } .container { max-width: 75rem; margin: 0px auto; padding: 0 2rem; } .container::after { display: block; clear: both; content: ""; } @media (max-width: 576px) { .container { padding: 0 1rem; } } .login { background-color: #26464d; padding-top: 3rem; padding-bottom: 3rem; margin-top: 2rem; } @media (max-width: 62em) { .login { margin-top: 1 rem; } } .login .login__text { color: white; } .login .login__text .login__heading { text-transform: uppercase; font-weight: 500; letter-spacing: 0.1em; font-size: 2rem; color: #F3C13CFF; } .login .login__text::before { content: ""; display: inline-block; height: 0.25rem; width: 4rem; margin-left: 1rem; background-color: #F3C13CFF; } @media (min-width: 62em) { .login .login__text::after { content: ""; display: inline-block; height: 0.25rem; width: 4rem; margin-top: 3rem; margin-left: -1rem; background-color: #F3C13CFF; } } .login .login__label { text-transform: uppercase; font-weight: 300; letter-spacing: 0.1em; font-size: 1.5rem; color: white; } .login .login__label__Error { text-transform: uppercase; font-weight: 300; letter-spacing: 0.1em; font-size: 1.5rem; color: red; } .login .login__input { background-color: #F3C13CFF; font-size: 1.5rem; } .login .login_slide { position: relative; } .login .login__image { width: 33rem; height: 33rem; object-fit: cover; margin-right: 3rem; border-radius: 1000000px; shape-outside: circle(16.5rem at 50% 50%); float: left; } @media (max-width: 75em) { .login .login__image { width: 29.7rem; height: 29.7rem; } } @media (max-width: 62em) { .login .login__image { width: 26.4rem; height: 26.4rem; } } @media (max-width: 768px) { .login .login__image { width: 16.5rem; height: 16.5rem; } } @media (max-width: 576px) { .login .login__image { width: 6.6rem; height: 6.6rem; } } .login .login__image__slide { position: absolute; top: 0; left: 0; } .login .login__image__slide_3 { animation-name: animation_login_image_slide_3; animation-timing-function: ease-in-out; animation-duration: 10s; animation-iteration-count: infinite; } @keyframes animation_login_image_slide_3 { 0% { opacity: 1; } 20% { opacity: 1; } 25% { opacity: 0; } 95% { opacity: 0; } 100% { opacity: 1; } } .login .login__image__slide_2 { animation-name: animation_login_image_slide_2; animation-timing-function: ease-in-out; animation-duration: 10s; animation-iteration-count: infinite; } @keyframes animation_login_image_slide_2 { 0% { opacity: 1; } 45% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } } .login .login__image__slide_1 { animation-name: animation_login_image_slide_1; animation-timing-function: ease-in-out; animation-duration: 10s; animation-iteration-count: infinite; } @keyframes animation_login_image_slide_1 { 0% { opacity: 1; } 70% { opacity: 1; } 75% { opacity: 0; } 100% { opacity: 0; } } .login .login__button { margin-top: 3rem; min-width: 130px; height: 4rem; color: #011820; padding: 0.5rem 2rem; font-weight: bold; cursor: pointer; position: relative; display: inline-block; outline: none; border-radius: 5px; z-index: 0; background: #26464d; overflow: hidden; border: 0.25rem solid #F3C13CFF; text-transform: uppercase; font-weight: 300; letter-spacing: 0.1em; font-size: 1.5rem; color: white; } .login::before { content: "DGis"; position: absolute; bottom: 0; left: 0; right: 0; text-align: center; color: #011820; font-weight: bold; text-transform: uppercase; font-size: 25rem; text-shadow: 0 0 2px #FFF, 0 0 2px #FFF, 0 0 2px #FFF, 0 0 2px #FFF, 0 0 2px #FFF, 0 0 2px #FFF, 0 0 2px #FFF; z-index: -1; } @supports (-webkit-text-stroke: 1px rgba(255, 255, 255, 0.2)) or (text-stroke: 1px rgba(255, 255, 255, 0.2)) { .login::before { -webkit-text-stroke: 1px rgba(255, 255, 255, 0.2); text-stroke: 2px rgba(255, 255, 255, 0.2); text-shadow: none; } } @media (max-width: 75em) { .login::before { display: none; } } .login::after { content: "DGis"; position: absolute; bottom: 0; left: 0; right: 0; text-align: center; color: #011820; font-weight: bold; text-transform: uppercase; font-size: 25rem; text-shadow: 0 0 2px #FFF, 0 0 2px #FFF, 0 0 2px #FFF, 0 0 2px #FFF, 0 0 2px #FFF, 0 0 2px #FFF, 0 0 2px #FFF; z-index: -1; } @supports (-webkit-text-stroke: 1px transparent) or (text-stroke: 1px transparent) { .login::after { -webkit-text-stroke: 1px transparent; text-stroke: 2px transparent; text-shadow: none; } } @media (max-width: 75em) { .login::after { display: none; } } .zitat { margin-left: auto; margin-right: auto; width: 50%; margin-top: 2rem; margin-bottom: 3rem; } .zitat .zitat__para { display: inline; font-style: italic; font-weight: 300; letter-spacing: 0.1em; font-size: 1.5rem; color: #26464d; } .zitat .zitat__para::before { content: "„"; } .zitat .zitat__para::after { content: "“"; } @media (max-width: 75em) { .zitat .zitat__para { font-size: 1rem; } } .zitat .zitat__quelle { display: inline; font-weight: 300; letter-spacing: 0.1em; font-size: 1.5rem; color: #26464d; } @media (max-width: 75em) { .zitat .zitat__quelle { font-size: 1rem; } } @media (max-width: 75em) { .zitat { margin-left: auto; margin-right: auto; width: 75%; margin-top: 1rem; } } @media (max-width: 768px) { .zitat { margin-left: auto; margin-right: auto; width: 90%; margin-top: 1rem; } } @media (max-width: 576px) { .zitat { display: none; } }