/* ------------------------------ */
/* ------------ GENERAL --------- */
/* ------------------------------ */

body{
    color: #1D364E;
    font-size: 18px;
    font-family: 'DM Sans', sans-serif;
}

main{
    margin-top: 68px;
}

.gif{
    /*cursor: pointer;*/
    width: 100px;
    border-radius: 10px;
    border: 1px solid transparent;
    display: block;
}

.gifWrapper{
    display: inline-block;
    transition: transform 0.3s;
}

/*.gifWrapper:hover{
    transform: scale(1.1);
}*/

.hidden{
    display: none !important;
}

.contentWidth{
    max-width: 700px;
    padding: 0 40px;
    margin: auto;
}

@media screen and (max-width: 600px) {
    .contentWidth{
        padding: 0 20px;
    }
}

b, strong{
    font-weight: bold;
}

i{
    font-style: italic;
}

.bg-gray-100{ background-color: #F8F9FB; }
.bg-gray-200{ background-color: #E1E8ED; }

.bg-yellow-350{ background-color: #FED938; }
.bg-yellow-400{ background-color: #FECD2F; }

.bg-red-350{ background-color: #FD7E6E; }
.bg-red-400{ background-color: #FC6B59; }

.bg-green-200{ background-color: #C7EFE4  }
.bg-green-300{ background-color: #A0E1D0; }
.bg-green-500{ background-color: #68B49D; }

.bg-blue-400{ background-color: #B7CFED; }
.bg-blue-700{ background-color: #006B8E; }
.bg-blue-900{ background-color: #1D364E; }

.text-blue-700{ color: #006B8E; }
.text-blue-900{ color: #1D364E; }

.pb-4{ padding-bottom: 16px; }
.w-icon{ width: 32px; }

.font-vevey{
    font-family: 'Vevey', sans-serif;
}

.font-dm-sans{
    font-family: 'DM Sans', sans-serif;
}

.text-3xl{
    /* E.g.: Large Headlines */
    font-size: 30px;
    line-height: 50px;
}

.text-2xl{
    /* E.g.: Headlines */
    font-size: 28px;
    line-height: 48px;
}

.text-xl{
    /* E.g.: Important text */
    font-size: 22px;
    line-height: 32px;
}

/* .text-lg is skipped so it can be added later if needed */

.text-md{
    /* E.g.: Normal text */
    font-size: 18px;
    line-height: 27px;
}

.text-sm{
    /* E.g.: Legal at the bottom */
    font-size: 15px;
    line-height: 19px;
}

.text-xs{
    /* Better never use */
    font-size: 12px;
    line-height: 14px;
}

.font-medium{
    font-weight: 500;
}

.font-bold{
    font-weight: bold;
}

/* ------------------------------ */
/* ------------ HEADER ---------- */
/* ------------------------------ */

header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    padding: 10px 24px;
    box-sizing: border-box;
}

header .selectedLanguage{
    /*opacity: 0.5;*/
    color: #68B49D !important;
    font-weight: bold;
    cursor: default !important;
}

@media screen and (max-width: 970px) {
    header h1{
        font-size: 18px !important;
    }
}

#mobile-nav ul li + li{
    margin-top: 20px;
}

#mobile-nav ul{
    padding-top: 30px;
    padding-bottom: 30px;
    text-align: center;
}

@media screen and (min-width: 970px) {
  #mobileMenuButtons{
    display: none;
  }

  #mobile-nav-wrapper{
    display: none;
  }
}

@media screen and (max-width: 970px) {
    #desktop-menu{
        display: none;
    }
}

#desktop-menu ul{
    gap: 36px;
}

#desktop-menu #languageSwitchAndTwitter{
    display: flex;
    align-items: center;
    gap:  34px;
}

.languageSwitch button{
    background: none;
    border: none;
    color: inherit;
    font-size: inherit;
    cursor: pointer;
}

header a{
    text-decoration: none;
    color: inherit;
}

#desktop-menu a:hover, #desktop-menu button:hover, #mobile-nav a:hover, #mobile-nav button:hover{
    opacity: 0.5;
}

#mobileMenuButtons button{
    height: 40px;
    display: flex;
    align-items: center;
    cursor: pointer;
    background: none;
    border: none;
    border-radius: 999px;
    transition: background 0.2s;
}

#openMobileMenuButton{
    width: 60px;
}

#openMobileMenuButton img{
    width: 30px;
}

#closeMobileMenuButton{
    width: 60px;
}

#closeMobileMenuButton img{
    width: 20px;
}

#mobileMenuButtons button img{
    margin: auto;
    display: block;
    max-width: 100%;
    max-height: 100%;
}

#mobileMenuButtons button:hover{
    background: #F8F9FB; /* Gray 100 */
}

.header-nav-horizontal{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-nav-horizontal nav ul{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ------------------------------ */
/* ------------- HERO ----------- */
/* ------------------------------ */

.splide__track{
    padding-bottom: 10px;
}

#hero{
    padding-bottom: 60px;
    position: relative;
    z-index: 10;
}

#bookPreview{
    cursor: grab;
    padding: 40px 0;
}

#bookPreview ul{
    align-items: center;
}

#purchase-book-wrapper{
    display: flex;
    overflow-x: clip;
    overflow-y: visible;
}

#purchase-book{
    border-radius: 24px;
    display: inline-block;
    margin: auto;
    min-width: 220px;
}

#purchase-book #bookTitle{
    transition: color 0.2s;
}

#purchase-book a{
    text-decoration: none;
    color: inherit;
}

#purchase-book-dropdown-arrows{
    position: relative;
    transition: transform 0.2s;
}

#purchase-book img{
    width: 24px;
}

#purchase-book img:nth-child(2){
    transition: opacity 0.2s, transform 0.2s;
    position: absolute;
    top: 0;
    right: 0;
}

#purchase-book h2{
    position: relative;
    z-index: 5;
    width: 100%;
    background: none;
    border: none;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

#purchase-book-and-arrow{
    position: relative;
    display: inline-block;
    margin: auto;
}

#arrowPointingAtBuy{
    position: absolute;
    width: 70px;
    top: -10px;
    right: -80px;
}

@media screen and (max-width: 460px) {
  #arrowPointingAtBuy {
    display: none;
  }
}

#purchase-book-retailers-wrapper{
    height: 0;
    overflow: hidden;
    transition: 0.2s;
    position: absolute;
    top: -24px;
    padding-top: 24px;
    width: 100%;
    border-radius: 0 0 24px 24px;
}

#purchase-book-retailers-wrapper-bottom{
    position: absolute;
    bottom: 0;
    width: 100%;
}

#purchase-book-retailers{
    padding: 10px 20px 20px 20px;
    text-align: center;
}

#purchase-book-retailers li a{
    display: block;
    padding: 8px 0;
    transition: color 0.2s;
}

#purchase-book-retailers li a:hover{
    color: #E1E8ED;
}

.bookPageWrapper{
    position: relative;
    display: inline-block;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    border-radius: 1px;
    max-width: 80vw;
    /*transform: scale(0.9);
    transition: 0.2s transform;*/
}

/*.bookPageWrapper.is-active{
    transform: scale(1);
}*/

.pageShadow{
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 43%, rgba(0, 0, 0, 0.06) 45%, rgba(0, 0, 0, 0.26) 48%, rgba(0, 0, 0, 0.42) 50%, rgba(0, 0, 0, 0.26) 52%, rgba(0, 0, 0, 0.06) 55%, rgba(0, 0, 0, 0) 57%, rgba(0, 0, 0, 0) 100%);
    /*background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 45%, #000 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%);*/
}

.pageCenterLine{
    width: 50%;
    height: 100%;
    margin-left: 50%;
    border-left: 1px solid black;
}

.bookPage{
    display: block;
    max-height: 400px;
    max-width: 100%;
    scroll-snap-stop: always;
    scroll-snap-align: center;
    border-radius: 1px;
}

@media screen and (max-width: 500px) {
    .bookPageWrapper{
        margin-right: 20px !important;
    }
    .bookPage{
        max-height: 80vw;
    }
}


/* ------------------------------ */
/* ------------- INTRO ---------- */
/* ------------------------------ */

#englishWarning{
    margin-top: 1rem;
    border: 2px solid #FFCD00;
    padding: 1rem;
    /* border-radius: 10px; */
}

#downloadTOC{
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #E1E8ED;
    display: block;
    margin-top: 20px;
    transition: box-shadow 0.4s;
    margin-bottom: 20px;
}

#downloadTOC:hover{
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.16);
}

#downloadTOC img{
    width: 100%;
    display: block;
}

#navigationLinks{
    display: flex;
    margin-top: 10px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#navigationLinks li{
    flex-shrink: 0;
    max-width: 240px;
    width: 100%;
}

#navigationLinks a{
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 26px;
    border: 2px solid #FD7E6E;
    padding: 2px 5px 2px 14px;
    transition: transform 0.2s;
    color: inherit;
}

#navigationLinks a:hover{
    transform: translateX(10px);
}

#navigationLinks a img{
    width: 30px;
    margin-left: 10px;
}

#arrowAndSunGif{
    display: flex;
    justify-content: space-evenly;
}

#arrowAndSunGif{
    margin-top: 60px;
    margin-bottom: -40px;
}

#arrowAndSunGif div:nth-child(2){
    margin-top: 70px;
}

#circlesGif{
    margin-top: 20px;
    margin-bottom: 20px;
}

#content{
    margin-top: 70px;
}

/* ---------------------------------- */
/* ------------- TEMPLATES ---------- */
/* ---------------------------------- */

#templates{
    background-image: url('../images/bg-tile.svg');
    background-repeat: repeat;
    background-size: 512px;
    /*margin-bottom: 96px;*/
    padding: 50px 0;
}

#templates a{
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

#templates ol{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media screen and (max-width: 600px) {
    #templates ol{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

#templates ol{
    row-gap: 12px;
    column-gap: 20px;
}

#templates .template{
    padding: 14px 10px;
    transition: 0.2s;
}

#templates .template:hover{
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    transform: translateY(-6px);
}

#templates .arrow{
    display: block;
    width: 32px;
    margin-left: auto;
}

#templates .template-graphic{
    display: block;
    width: 100%;
}

#templates h3{
    margin-top: 50px;
    margin-bottom: 20px;
}

/* -------------------------------- */
/* ------------- CONTACT ---------- */
/* -------------------------------- */

#contact h2{
    margin-bottom: 20px;
}

#authors{
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    justify-content: space-around;
    margin-top: 20px;
    margin-bottom: 30px;
    padding-left: 20px;
    padding-right: 20px;
}

#authors.reverse{
    flex-direction: row-reverse;
}

@media screen and (max-width: 870px) {
    #authors{
        flex-direction: column;
    }

    #authors.reverse{
        flex-direction: column-reverse;
    }
}

#authors{
    gap: 22px;
}

#authors h3{
    text-align: center;
}

#authors .author-img{
    width: 160px;
    display: block;
    border-radius: 999px;
    margin-bottom: 10px;
}

#authors .social-btns{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
}

.social-btn{
    background-color: #A0E1D0; /* green-300 */;
    border-radius: 9999px;
    padding: 10px;
    display: inline-block;
    margin-left: 4px;
    margin-right: 4px;
    transition: 0.2s;
}

.social-btn:hover{
    background-color: #C7EFE4; /* green-200 */
}

.social-btn img{
    width: 24px;
    display: block;
}

#chartAndRocketGif{
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-evenly;
}

#rocketAndCirclesGif{
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-evenly;
}

#contactInformation{
    max-width: 460px;
    margin: auto;
}

#contact-ctas{
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}


#contact-ctas{
    row-gap: 10px;
}

#contact-ctas li{
    flex: 1;
    width: 100%;
    flex-shrink: 0;
}

#contact-ctas a{
    padding: 10px;
    border-radius: 26px;
    display: flex;
    align-items: center;
    /*justify-content: center;*/
    color: inherit;
    text-decoration: none;
    width: 100%;
    transition: 0.2s;
    box-sizing: border-box;
}

@media screen and (max-width: 870px) {
    #contact-ctas a{
        justify-content: flex-start;
    }
}

#contact-ctas a:hover{
    background-color: #FC6B59;
}


#contact-ctas a img{
    padding-right: 18px;
    padding-left: 18px;
}

/* -------------------------------- */
/* ------------- IMPRINT ---------- */
/* -------------------------------- */

#imprint{
    padding-top: 76px;
    padding-bottom: 150px;
}

#imprint h2{
    margin-bottom: 52px;
}

.legal-information li{
    padding-bottom: 24px;
}

.legal-information a{
    color: inherit;
    text-decoration: underline;
}

.legal-information a:hover{
    text-decoration: underline;
}


/* ------------------------------ */
/* -------- NOTIFY-BUTTONS ------ */
/* ------------------------------ */

#notify-me-button{
    position: fixed;
    right: 0;
    bottom: 10vh;
    display: flex;
    align-items: center;
    border: none;
    border-radius: 999px 0 0 999px;
    cursor: pointer;
    padding: 10px 20px;
    z-index: 998;
    gap: 14px;
    color: inherit;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.16);
    transition: background 0.2s;
    text-decoration: none;
}

#notify-me-button:hover{
    background-color: #FFCD00;
}

#notify-me-button img{
    width: 32px;
}


/* ------------------------------ */
/* ----------- WEBFONTS --------- */
/* ------------------------------ */

/* - - - - - - - - - - - - - - - - */
/*             DM Sans             */
/* - - - - - - - - - - - - - - - - */

@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/dm-sans/DMSans-Regular.woff2') format('woff2'),
        url('../fonts/dm-sans/DMSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/dm-sans/DMSans-BoldItalic.woff2') format('woff2'),
        url('../fonts/dm-sans/DMSans-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/dm-sans/DMSans-Medium.woff2') format('woff2'),
        url('../fonts/dm-sans/DMSans-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/dm-sans/DMSans-MediumItalic.woff2') format('woff2'),
        url('../fonts/dm-sans/DMSans-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/dm-sans/DMSans-Italic.woff2') format('woff2'),
        url('../fonts/dm-sans/DMSans-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/dm-sans/DMSans-Bold.woff2') format('woff2'),
        url('../fonts/dm-sans/DMSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* - - - - - - - - - - - - - - - - */
/*               Vevey             */
/* - - - - - - - - - - - - - - - - */

@font-face {
    font-family: 'Vevey';
    src: url('../fonts/vevey/Vevey-HumanKind.woff2') format('woff2'),
        url('../fonts/vevey/Vevey-HumanKind.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vevey';
    src: url('../fonts/vevey/Vevey-Positive.woff2') format('woff2'),
        url('../fonts/vevey/Vevey-Positive.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}