styles.css

*{
    margin: 0;
}
:root {
    --gray-canvas: #f6f6f6;
    --gray20: #b1b2b5;
    --gray30: #7b7d85;
    --gray40: #64666a;
    --gray50: #303236;
    --gray60: #1f1f1f;
    --black: black;
    --primary: #ac2c2c;
    --primary-soft: #fce3e3;
    --white: white;
    --font-main: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --size-72: 2.25em;
    --size-32: 1.25em;
  }

body {
    background: white;
    font-family: var(--font-main);
    font-size: 1.3em;
    line-height: 1.75em;
}

.top-navbar {
    padding: 3em 4em;
    font-weight: 600;
    color: var(--gray60);
}

.top-navbar-link {

    float: right;
    text-align: center;
    color: var(--gray60);
    text-decoration: none;
    padding: 10px 15px;
    margin-left: 10px;
}

.top-navbar a.logo{
    float: left;
    margin-left: 1%;
}

.top-navbar a.ghlogo {
    float: right;
    margin: 0.3% 1%;
}

.swanhead {
    background-color: var(--gray-canvas);
}

.swanhead-content {
    padding: 5em;
}
/*
.swanhead-text {
    display:flex;
    justify-content:center;
}
*/
.swanhead-features {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    justify-content: space-between;
    vertical-align: center;
    align-items: center;
}

.swanhead-features-LHS {
    max-width: 40%;
}
.swanhead-features-RHS {
    max-width: 60%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    text-align: center;
}

.headline {
    font-size: var(--size-72);
    font-weight: 600;
    line-height: 1.25em;
    color: var(--black);
}

.headline-sub {
    font-size: var(--size-32);
    font-size: 1.1em;
    font-weight: 400;
    margin-top: 0.75em;
    line-height: 1.75em;
    color: var(--gray50);
}

.swan-underline {
    color: var(--primary);
    text-decoration: underline solid var(--primary) 4px;
    text-underline-offset: 6px;
}
.gh-button {
    font-size: var(--size-32);
    font-weight: 400;
    background-color: var(--primary);
    color: var(--white);
    display: inline-block;
    padding: 0.45em 0.55em;
    margin-top: 0.75em;
    /*border: 3px solid var(--gray-canvas);*/
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}

.gh-button-flex {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.gh-button img {
    margin-right: 0.5em;
}

.gh-button:hover {
    /*border: 3px solid var(--primary);*/
    background-color: var(--gray60);
}

/* Sections */
.swancontent {
    padding: 0 5em 5em 5em;
}

.section-start {
    line-height: 2.25em;
    margin: 5em 0 3em 0;
}

.section-pre {
    font-size: var(--size-32);
    font-weight: 400;
    text-transform: uppercase;
    color: var(--gray20);
}
.section-header {
    font-size: var(--size-72);
    font-weight: 600;
    color: var(--primary);
}

/* features */
.swancontent-features {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    justify-content: space-around;
    vertical-align: center;
    align-items: center;
}

.swancontent-feature-contents {
    line-height: 1.75em;
}

.feature-highlight {
    color: var(--primary);
    font-weight: 600;
}

.swancontent-features-LHS {
    max-width: 40%;
}
.swancontent-features-RHS {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    text-align: right;
}

.swancontent-image-description {
    color: var(--gray40);
    margin-top: 1em;
}

.swancontent-feature {
    color: var(--gray60);
    margin: 2em 0;
}

.swancontent-feature-title {
    font-size: var(--size-32);
    font-weight: 600;
    margin-bottom: 0.75em;
}

/* examples */

.section-examples-previa {
    margin-bottom: 2em;
}

.section-examples {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    max-width: 100%;
    justify-content: center;
    margin-right: 2em;
}

.section-newExample {
    border-radius: 25px;
    margin: 0 2em 2em 0;
    max-width: 100%;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px;
    display: flex;
    flex-direction: row-reverse;
}

.section-newExample-content {
    padding: 2em;
}

.section-newExample-imgHorizontal {
    min-width: 35%;
}
.section-newExample-imgHorizontal img {
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.section-newExample-imgVertical img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.tag-example {
    color: var(--primary);
    background-color: var(--primary-soft);
    padding: 0.25em 1em;
    border-radius: 30px;
    font-weight: 400;
    font-weight: 600;
}

.tag-example a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}
.section-examples-example {
    align-self: flex-start;
    margin: 2em 2em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    max-width: 40%;
}

.examples-image img{
    border-radius: 16px;
    /*
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
    */
}

.examples-name {
    font-size: var(--size-32);
    font-weight: 600;
    padding: 1em 0 0.5em 0;
}

.examples-text {
    color: var(--gray50);
    margin-bottom: 1em;
    line-height: 1.75em;
}

/* contributors */
.section-contributors {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    max-width: 100%;
    justify-content: center;
    margin-right: 2em;
}
.section-contributors-contributor {
    align-self: flex-start;
    margin: 2em 2em;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.contributor-image img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--gray20);
}

.contributor-name {
    font-size: var(--size-32);
    font-weight: 600;
    padding: 0.5em 0;
}

.contributor-text {
    color: var(--gray50)
}

.contributor-text a {
    text-decoration: none;
    color: var(--primary);
}


/* ------
---------
---------
------ */

.meet-the-teachers-carousel {
    height: 400px;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space:nowrap; /*Added this*/
}


.reviews {
    margin: 2em 6em;
}
.reviews-quote {
    margin: 2em 0;
    color: var(--gray50)
}

/* */

.timetable {
    overflow-x: auto;
    width: 100%;
}

.timetable-table {
    width: 100%;
    text-align: center;
}

.timetable-table tbody tr th {
    background-color: var(--gray-canvas);
    font-weight: 800;
    padding: 0.75rem 0;
}

.timetable-table tbody tr td {
    padding: 1.25rem 0;
}

.timetable-lesson {
    font-weight: 600;
    text-decoration: none;
}

.timetable-lesson:hover {
    color: var(--gray60);
}