/* #Information
    -design: desktop-first 
    -standard width: 1025px to 1440px
    -widths adjusted to (Media Queries):
        -smaller than 480px: small smartphones; minimum 320px
        -481px to 768px: standard smartphones
        -769px to 1024px: Tablets
        -1441px to 1920px: large monitors
        -greater than 1921px: ultra-wide or 4K monitors */

/* #region root-html-body */
:root {
    /* Color definition */
    --color01: #FFFFFF;
    --color02: #000000;

    --color03-1: #010A13;
    --color03-2: #112030;
    --color03-3: #143F5B;
    --color03-4: #01060B;

    --color04-1: #8695A4;
    --color04-2: #C8C8C8;
    --color04-3: #E6E6E6;

    --color05-1: #ffa500;

    --color06-1: #FF0000;

    /* setting font-size to rem -> 1rem = 10px */
    font-size: 62.5%;
}

* {
    margin: 0;
    padding: 0;
    outline: 0;
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
    color: var(--color01);
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--color01);
}

/* #endregion */

/* #region header */
header {
    background-color: var(--color03-4);
    border-bottom: 0.1rem solid var(--color03-2);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 2rem;
    padding-bottom: 1rem;
}

header a img {
    width: 100%;
}

/* #endregion */

/* #region banner */
.banner-section {
    background-color: var(--color05-1);
    width: 100%;
    height: 5rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: sticky;
    top: 6rem;
    border-top: 0.1rem solid var(--color01);

}

.banner-section a span {
    color: var(--color01);
    font-size: 2rem;
    font-weight: bold;
    display: inline-block;
    animation: pulse-mode-1 0.5s infinite alternate ease-in-out;
}

/* #endregion */

/* #region home */
.home-section {
    width: 100%;
    height: calc(100vh - 6.5rem);
    display: flex;
    flex-direction: row;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 2%;
    padding-bottom: 5%;
}

.home-section-div-left {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    padding-left: 7%;
    padding-right: 7%;
    padding-top: 7%;
}

.home-section-div-left h1 {
    color: var(--color02);
    font-size: 3.5rem;
    font-weight: bold;
    padding-bottom: 10%;
}

.home-section-div-left span {
    color: var(--color02);
    font-size: 1.9rem;
    padding-bottom: 10%;
    text-align: justify;
}

.home-section-div-left a {
    text-decoration: none;
}

.home-section-div-left a div {
    background-color: var(--color05-1);
    font-weight: 600;
    font-size: 1.8rem;
    padding-left: 5rem;
    padding-right: 5rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-radius: 1rem;
    transition: 0.2s;
}

.home-section-div-left a div:hover {
    transform: scale(1.1);
}

.home-section-div-right {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.home-section-div-right img {
    width: 80%;
    max-width: 64rem;
}

.home-section-div-right a {
    text-decoration: none;
}

.home-section-div-right a div {
    background-color: var(--color02);
    font-weight: 600;
    font-size: 1.8rem;
    padding-left: 5rem;
    padding-right: 5rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-radius: 1rem;
    transition: 0.2s;
}

.home-section-div-right a div:hover {
    transform: scale(1.1);
}

/* #endregion */

/* #region topics*/
.topics-section {
    background-color: var(--color04-3);
    display: flex;
    flex-direction: column;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 2%;
    padding-bottom: 2%;
}

.topics-section h2 {
    color: var(--color02);
    font-size: 3rem;
    font-weight: bold;
    padding-bottom: 2%;
}

.topics-section-div-carousel {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding-bottom: 2%;
}

.topics-section-div-carousel-unit {
    background-color: var(--color01);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2%;
    margin: 0.5%;
    border-radius: 1rem;
    border: 0.05rem solid var(--color04-2);
}

.topics-section-div-carousel-unit img {
    width: 100%;
}

.topics-section-div-carousel-unit span {
    color: var(--color02);
    font-size: 1.5rem;
    font-weight: bold;
    padding-top: 8rem;
}

.topics-section-div-btn {
    display: flex;
    justify-content: center;

}

.topics-section-div-btn a {
    text-decoration: none;
}

.topics-section-div-btn a div {
    background-color: var(--color02);
    font-weight: 600;
    font-size: 1.8rem;
    padding-left: 5rem;
    padding-right: 5rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-radius: 1rem;
    transition: 0.2s;
}

.topics-section-div-btn a div:hover {
    transform: scale(1.1);
}

/* #endregion */

/* #region questions*/
.questions-section {
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 3rem;
    padding-bottom: 3rem;
    display: flex;
    flex-direction: row;
}

.questions-section-div-left {
    width: 60%;
    display: flex;
    flex-direction: column;
}

.questions-section-div-left h2 {
    color: var(--color02);
    font-size: 3.2rem;
    font-weight: bold;
    padding-bottom: 5rem;
}

.questions-section-div-left-list {
    width: 80%;
    display: flex;
    flex-direction: column;
}

.questions-section-div-left-list-iten {
    display: flex;
    border-radius: 1rem;
    border: 0.05rem solid var(--color04-2);
    padding: 2rem;
    margin-bottom: 2rem;
    width: 100%;
}

.questions-section-div-left-list-iten span {
    color: var(--color02);
    font-size: 2rem;
    font-weight: normal;
    padding-top: 0;
}

.questions-section-div-right {
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.questions-section-div-right img {
    width: 60%;
}

/* #endregion */

/* #region preview*/
.preview-section {
    background-color: var(--color04-3);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 3rem;
}

.preview-section-ebook {
    border: 0px;
    width: 100%;
    height: 80rem;
    margin-bottom: 2rem;
}

.preview-section a {
    text-decoration: none;
}

.preview-section a div {
    background-color: var(--color05-1);
    font-weight: 600;
    font-size: 1.8rem;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-radius: 1rem;
    transition: 0.2s;
}

.preview-section a div:hover {
    transform: scale(1.1);
}

/* #endregion */

/*#region footer */
footer {
    background-color: var(--color03-1);
    border-top: 0.2rem solid var(--color03-2);
    display: flex;
    align-items: center;
    justify-content: center;
}

footer img {
    height: 6.5rem;
}

footer p {
    margin: 0;
    text-align: center;
    font-size: 1.6rem;
}

/* #endregion */

/* #region keyframes*/
@keyframes pulse-mode-1 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.1);
    }
}

/* #endregion */

/* #region Media Queries */

/* smaller than 480px: small smartphones; minimum 320px */
@media (max-width: 480px) {

    /* #region header */
    header {
        background-color: var(--color03-4);
        border-bottom: 0.2rem solid var(--color03-2);
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: sticky;
        top: 0;
        padding-bottom: 5%;
        padding-left: 5%;
        padding-right: 5%;
    }

    header a {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center
    }

    header a img {
        width: 70%;
    }

    /* #endregion */
    
    /* #region banner */
    .banner-section {
        background-color: var(--color05-1);
        width: 100%;
        height: 5rem;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        position: sticky;
        top: 6rem;
        border-top: 0.1rem solid var(--color01);

    }

    .banner-section a span {
        color: var(--color01);
        font-size: 1rem;
        font-weight: bold;
        display: inline-block;
        animation: pulse-mode-1 0.5s infinite alternate ease-in-out;
    }

    /* #endregion */

    /* #region home */
    .home-section {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-left: 5%;
        padding-right: 5%;
    }

    .home-section-div-left {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
        padding-left: 5%;
        padding-right: 5%;
        padding-top: 5%;
    }

    .home-section-div-left h1 {
        color: var(--color02);
        font-size: 2rem;
        font-weight: bold;
        padding-bottom: 5%;
    }

    .home-section-div-left span {
        color: var(--color02);
        font-size: 1.2rem;
        padding-bottom: 5%;
        text-align: justify;
    }

    .home-section-div-left a {
        text-decoration: none;
    }

    .home-section-div-left a div {
        background-color: var(--color05-1);
        margin-bottom: 2rem;
        font-weight: 600;
        font-size: 1.6rem;
        padding-left: 3rem;
        padding-right: 3rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
        border-radius: 0.8rem;
        transition: 0.2s;
    }

    .home-section-div-right {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .home-section-div-right img {
        width: 60%;
        max-width: 64rem;
    }

    .home-section-div-right a {
        text-decoration: none;
    }

    .home-section-div-right a div {
        background-color: var(--color02);
        font-weight: 600;
        font-size: 1.2rem;
        padding-left: 3rem;
        padding-right: 3rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
        border-radius: 0.8rem;
        transition: 0.2s;
    }

    /* #endregion */

    /* #region topics*/
    .topics-section {
        width: 100%;
        background-color: var(--color04-3);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-left: 5%;
        padding-right: 5%;
        padding-top: 2%;
        padding-bottom: 2%;
    }

    .topics-section h2 {
        color: var(--color02);
        font-size: 2rem;
        font-weight: bold;
        padding-bottom: 2%;
    }

    .topics-section-div-carousel {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-bottom: 2%;
    }

    .topics-section-div-carousel-unit {
        width: 90%;
        background-color: var(--color01);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 2%;
        margin: 2%;
        border-radius: 1rem;
        border: 0.05rem solid var(--color04-2);
    }

    .topics-section-div-carousel-unit img {
        width: 30%;
    }

    .topics-section-div-carousel-unit span {
        height: 50%;
        color: var(--color02);
        font-size: 1.5rem;
        font-weight: bold;
        padding-top: 4rem;
    }

    .topics-section-div-btn a div {
        background-color: var(--color02);
        font-weight: 600;
        font-size: 1.2rem;
        padding-left: 3rem;
        padding-right: 3rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
        border-radius: 0.8rem;
        transition: 0.2s;
    }

    /* #endregion */

    /* #region questions*/
    .questions-section {
        width: 100%;
        padding-left: 5%;
        padding-right: 5%;
        padding-top: 3rem;
        padding-bottom: 3rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .questions-section-div-left {
        width: 90%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .questions-section-div-left h2 {
        color: var(--color02);
        font-size: 2rem;
        font-weight: bold;
        padding-bottom: 5rem;
        text-align: center;
    }

    .questions-section-div-left-list {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .questions-section-div-left-list-iten span {
        color: var(--color02);
        font-size: 1.4rem;
        font-weight: normal;
        padding-top: 0;
    }

    .questions-section-div-right {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .questions-section-div-right img {
        width: 50%;
    }

    /* #endregion */

    /* #region preview*/
    .preview-section-ebook {
        border: 0px;
        width: 100%;
        height: 60rem;
        margin-bottom: 2rem;
    }

    /* #endregion */

    /*#region footer */

    footer img {
        height: 3rem;
    }

    footer p {
        margin: 0;
        text-align: center;
        font-size: 0.8rem;
    }

    /* #endregion */

}

/* 481px to 768px: standard smartphones */
@media (min-width: 481px) and (max-width: 768px) {

    /* #region header */
    header {
        background-color: var(--color03-4);
        border-bottom: 0.1rem solid var(--color03-2);
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        padding-left: 5%;
        padding-right: 5%;
    }

    /* #endregion */

    /* #region banner */
    .banner-section {
        background-color: var(--color05-1);
        width: 100%;
        height: 5rem;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        position: sticky;
        top: 6rem;
        border-top: 0.1rem solid var(--color01);

    }

    .banner-section a span {
        color: var(--color01);
        font-size: 1.4rem;
        font-weight: bold;
        display: inline-block;
        animation: pulse-mode-1 0.5s infinite alternate ease-in-out;
    }

    /* #endregion */

    /* #region home */
    .home-section {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-left: 5%;
        padding-right: 5%;
    }

    .home-section-div-left {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
        padding-left: 5%;
        padding-right: 5%;
        padding-top: 5%;
    }

    .home-section-div-left h1 {
        color: var(--color02);
        font-size: 3rem;
        font-weight: bold;
        padding-bottom: 5%;
    }

    .home-section-div-left span {
        color: var(--color02);
        font-size: 1.9rem;
        padding-bottom: 5%;
        text-align: justify;
    }

    .home-section-div-left a {
        text-decoration: none;
    }

    .home-section-div-left a div {
        background-color: var(--color05-1);
        margin-bottom: 2rem;
        font-weight: 600;
        font-size: 1.6rem;
        padding-left: 3rem;
        padding-right: 3rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
        border-radius: 0.8rem;
        transition: 0.2s;
    }

    .home-section-div-right {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .home-section-div-right img {
        width: 60%;
        max-width: 64rem;
    }

    .home-section-div-right a {
        text-decoration: none;
    }

    .home-section-div-right a div {
        background-color: var(--color02);
        font-weight: 600;
        font-size: 1.2rem;
        padding-left: 3rem;
        padding-right: 3rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
        border-radius: 0.8rem;
        transition: 0.2s;
    }

    /* #endregion */

    /* #region topics*/
    .topics-section {
        width: 100%;
        background-color: var(--color04-3);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-left: 5%;
        padding-right: 5%;
        padding-top: 2%;
        padding-bottom: 2%;
    }

    .topics-section h2 {
        color: var(--color02);
        font-size: 2.5rem;
        font-weight: bold;
        padding-bottom: 2%;
    }

    .topics-section-div-carousel {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-bottom: 2%;
    }

    .topics-section-div-carousel-unit {
        width: 90%;
        background-color: var(--color01);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 2%;
        margin: 2%;
        border-radius: 1rem;
        border: 0.05rem solid var(--color04-2);
    }

    .topics-section-div-carousel-unit img {
        width: 30%;
    }

    .topics-section-div-carousel-unit span {
        height: 50%;
        color: var(--color02);
        font-size: 2rem;
        font-weight: bold;
        padding-top: 4rem;
    }

    .topics-section-div-btn a div {
        background-color: var(--color02);
        font-weight: 600;
        font-size: 1.2rem;
        padding-left: 3rem;
        padding-right: 3rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
        border-radius: 0.8rem;
        transition: 0.2s;
    }

    /* #endregion */

    /* #region questions*/
    .questions-section {
        width: 100%;
        padding-left: 5%;
        padding-right: 5%;
        padding-top: 3rem;
        padding-bottom: 3rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .questions-section-div-left {
        width: 90%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .questions-section-div-left h2 {
        color: var(--color02);
        font-size: 2.8rem;
        font-weight: bold;
        padding-bottom: 5rem;
        text-align: center;
    }

    .questions-section-div-left-list {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .questions-section-div-left-list-iten span {
        color: var(--color02);
        font-size: 2rem;
        font-weight: normal;
        padding-top: 0;
    }

    .questions-section-div-right {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .questions-section-div-right img {
        width: 40%;
    }

    /* #endregion */

    /* #region preview*/
    .preview-section-ebook {
        border: 0px;
        width: 100%;
        height: 60rem;
        margin-bottom: 2rem;
    }

    /* #endregion */

    /*#region footer */
    footer img {
        height: 4rem;
    }

    footer p {
        margin: 0;
        text-align: center;
        font-size: 1rem;
    }

    /* #endregion */
}

/* 769px to 1024px: Tablets */
@media (min-width: 769px) and (max-width: 1024px) {

    /* #region header */
    header {
        background-color: var(--color03-4);
        border-bottom: 0.1rem solid var(--color03-2);
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        padding-top: 2%;
        padding-left: 5%;
        padding-right: 5%;
    }

    /* #endregion */

    /* #region banner */
    .banner-section {
        background-color: var(--color05-1);
        width: 100%;
        height: 5rem;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        position: sticky;
        top: 6rem;
        border-top: 0.1rem solid var(--color01);

    }

    .banner-section a span {
        color: var(--color01);
        font-size: 2rem;
        font-weight: bold;
        display: inline-block;
        animation: pulse-mode-1 0.5s infinite alternate ease-in-out;
    }

    /* #endregion */

    /* #region home */
    .home-section {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-left: 5%;
        padding-right: 5%;
    }

    .home-section-div-left {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
        padding-left: 5%;
        padding-right: 5%;
        padding-top: 5%;
    }

    .home-section-div-left h1 {
        color: var(--color02);
        font-size: 3.2rem;
        font-weight: bold;
        padding-bottom: 5%;
    }

    .home-section-div-left span {
        color: var(--color02);
        font-size: 1.9rem;
        padding-bottom: 5%;
        text-align: justify;
    }

    .home-section-div-left a {
        text-decoration: none;
    }

    .home-section-div-left a div {
        background-color: var(--color05-1);
        margin-bottom: 1rem;
        font-weight: 600;
        font-size: 1.8rem;
        padding-left: 3rem;
        padding-right: 3rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
        border-radius: 0.8rem;
        transition: 0.2s;
    }

    .home-section-div-right {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .home-section-div-right img {
        width: 60%;
        max-width: 64rem;
    }

    .home-section-div-right a {
        text-decoration: none;
    }

    .home-section-div-right a div {
        background-color: var(--color02);
        font-weight: 600;
        font-size: 1.6rem;
        padding-left: 3rem;
        padding-right: 3rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
        border-radius: 0.8rem;
        transition: 0.2s;
    }

    /* #endregion */

    /* #region topics*/
    .topics-section {
        width: 100%;
        background-color: var(--color04-3);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-left: 5%;
        padding-right: 5%;
        padding-top: 2%;
        padding-bottom: 2%;
    }

    .topics-section h2 {
        color: var(--color02);
        font-size: 2.8rem;
        font-weight: bold;
        padding-bottom: 2%;
    }

    .topics-section-div-carousel {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: start;
        justify-content: center;
        padding-bottom: 2%;
    }

    .topics-section-div-carousel-unit img {
        width: 100%;
    }

    .topics-section-div-carousel-unit span {
        height: 50%;
        color: var(--color02);
        font-size: 1rem;
        font-weight: bold;
        padding-top: 4rem;
    }

    .topics-section-div-btn a div {
        background-color: var(--color02);
        font-weight: 600;
        font-size: 1.2rem;
        padding-left: 3rem;
        padding-right: 3rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
        border-radius: 0.8rem;
        transition: 0.2s;
    }

    /* #endregion */

    /* #region questions*/
    .questions-section {
        width: 100%;
        padding-left: 5%;
        padding-right: 5%;
        padding-top: 3rem;
        padding-bottom: 3rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .questions-section-div-left {
        width: 90%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .questions-section-div-left h2 {
        color: var(--color02);
        font-size: 2.8rem;
        font-weight: bold;
        padding-bottom: 5rem;
        text-align: center;
    }

    .questions-section-div-left-list {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .questions-section-div-left-list-iten span {
        color: var(--color02);
        font-size: 2rem;
        font-weight: normal;
        padding-top: 0;
    }

    .questions-section-div-right {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .questions-section-div-right img {
        width: 40%;
    }

    /* #endregion */

}
/* #endregion */