@font-face {
    font-family: poppins;
    src: url(Poppins-Regular.ttf);
    font-weight: normal;
}

@font-face {
    font-family: poppins;
    src: url(Poppins-Bold.ttf);
    font-weight: bold;
}


:root {
  /* Desktop */
  --content-width: 1200px;
  --content-margin-x: 63px;
  --content-margin-y: 90px;
  --text-size-h1: 49px;
  --text-size-h2: 34px;
  --accent-color: rgb(69, 181, 237);
}

* {
  hyphens: auto;
  overflow-wrap: anywhere;
}

/* Tablet */
@media (max-width: 1024px) {
  :root {
    --content-width: 100%;
    --text-size-h1: 44px;
    --text-size-h2: 31px;
  }
}

/* Mobile */
@media (max-width: 750px) {
  :root {
    --content-width: 100%;
    --content-margin-x: 32px;
    --content-margin-y: 90px;
    --text-size-h1: 40px;
    --text-size-h2: 28px;
  }
}

html {
  height: 100%;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
  font-family: poppins;
  background-color: white;
}

#content-wrapper {
    margin-bottom: 4rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.5rem;
}

@media screen and (max-width: 400px) {
    #content-wrapper {
        margin-bottom: 3rem;
        gap: 2.5rem;
    }
}

#frontpage-headline {
    margin-bottom: 1.5rem;
    font-size: 2rem;
    font-weight: bold;
    color: white;
    position: relative;
    z-index: 1;
}

#frontpage-headline-2 {
    margin-top: 5.5rem;
    margin-bottom: 1rem;
    font-size: 2rem;
    font-weight: bold;
    color: var(--accent-color);
    position: relative;
    z-index: 1;
    text-decoration: none;
}

#head {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#head-img {
    margin-bottom: 1rem;
    width: 20rem;
    height: 20rem;
    border-radius: 50%;
    position: relative;
    z-index: 1;
}

@media screen and (max-width: 350px) {
    #head-img {
        width: 90vw;
        height: 90vw;
    }
}

@media screen and (max-height: 650px) {
    #head-img {
        width: 15rem;
        height: 15rem;
    }
}


.button {
    margin-top: .5rem;
    padding: .7rem 1.9rem .7rem 1.6rem;
    box-sizing: border-box;
    background-color: var(--accent-color);
    color: white;
    font-weight: normal;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    border: 2px solid var(--accent-color);
    transition: background-color .2s ease-in-out, color .2s ease-in-out;
}

.button > svg {
    fill: white;
    width: 1.3rem;
    height: 1.3rem;
    transition: fill .2s ease-in-out;
}

.button:hover {
    background-color: white;
    color: var(--accent-color);
}

.button:hover svg {
    fill: var(--accent-color);
}

#content-headline {
    margin-bottom: 3.5rem;
    padding: .7rem 2.1rem .7rem 1.9rem;
    box-sizing: border-box;
    background-color: var(--accent-color);
    color: white;
    font-weight: normal;
    border-radius: 40px 40px 40px 0;
    display: flex;
    align-items: center;
    gap: .7rem;
    font-size: 1.6rem;
}

#content-headline > svg {
    fill: white;
    width: 1.7rem;
    height: 1.7rem;
    transition: fill .2s ease-in-out;
}

@media screen and (max-width: 1000px) {
    #content-headline {
        margin-top: 3rem;
    }
}

@media screen and (max-width: 700px) {
    #content-headline {
        margin-top: 2rem;
    }
}

@media screen and (max-width: 500px) {
    #content-headline {
        margin-top: 1.5rem;
    }
}

.imprint-block {
    width: 55rem;
    line-height: 210%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

@media screen and (max-width: 1000px) {
    .imprint-block {
        width: 90%;
    }
}

.headline {
    margin-bottom: 1rem;
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--accent-color);
}

@media screen and (max-width: 400px) {
    .headline {
        margin-bottom: .7rem;
        font-size: 1.2rem;
    }
}

#link-wrapper {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

#link-wrapper > a {
    color: black;
    transition: color .2s ease-in-out;
}

#link-wrapper > a:hover {
    color: var(--accent-color);
}

#small-footer {
    margin-top: 3.5rem;
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
}


.footer-link {
    display: flex;
    align-items: center;
    padding: .3rem 1.5rem;
    box-sizing: border-box;
    background-color: var(--accent-color);
    color: white;
    font-weight: normal;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    border: 2px solid var(--accent-color);
    transition: background-color .2s ease-in-out, color .2s ease-in-out;
    font-size: 1.1rem;
}

.footer-link:hover {
    color:rgb(69, 181, 237);
    background-color: white;
}

.footer-link > svg {
    margin-left: -.1rem;
    width: 1.5rem;
    height: 1.5rem;
    fill: white;
}

.footer-link:hover svg {
    fill:var(--accent-color);
}

.tiny-headline {
    margin-top: 1.4rem;
    color: var(--accent-color);
    font-weight: bold;
}

@media screen and (max-width: 400px) {
    .tiny-headline {
        margin-top: 1.2rem;
    }
}

.block-link {
    color: black;
    transition: color .2s ease-in-out;
}

.block-link:hover {
    color: var(--accent-color);
}

.front-page-bg {
    width: 100%;
    height: 58%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--accent-color);
    clip-path: polygon(0 0, 100% 0, 100% 57%, 0% 100%);
    z-index: 0;
}

#social-media {
    margin-top: 1.5rem;
    display: flex;
    gap: 1rem;
}

#social-media-icon > svg {
    width: 2.3rem;
    height: 2.3rem;
    fill: var(--accent-color);
    transition: fill .2s ease-in-out;
}

#social-media-icon:hover svg {
    fill: rgb(37, 37, 37);
}