/* #region GLOBAL */
* {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;

    --dark: #1D2329;
    --blue: #16BDE2;
    --orange: #F56514;
    --gray: #7F97A8;
    --green: #18F514;
    --gold: #F5A814;
    --yellow: #F5F514;
    --purple: #b747f4;
    --border-radius: 1rem;

    --font-size-s: 0.875rem;
    --font-size-n: 1rem;
    --font-size-m: 1.25rem;
    --font-size-l: 1.5rem;
    --font-size-xl: 2rem;
    --font-size-xxl: 3rem;
    --font-size-xxxl: 6rem;
    --font-size-super: 18rem;


    --header-height: 5.6rem;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 1rem);
    background-color: var(--dark);
}

body {
    font-family: Montserrat, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: white;
    background-color: var(--dark);
    overflow-x: hidden;
    margin: 0;
}

.container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.font-heading {
    font-size: var(--font-size-xxxl);
    font-weight: 900;
    line-height: 1;
}

.font-subheading {
    font-size: var(--font-size-xxl);
    font-weight: 900;
    line-height: 1;
}

.font-superheading {
    font-size: var(--font-size-super);
    color: transparent;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    font-weight: 900;
    line-height: 1;
}

.font-para {
    font-size: var(--font-size-n);
    font-weight: 500;
    line-height: 1.5;
}

.font-para-big {
    font-size: var(--font-size-m);
    color: var(--gray);
    font-weight: 500;
    line-height: 1.5;
}

.text-disabled {
    color: var(--gray);
}

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

.text-blue {
    color: var(--blue);
}

.text-green {
    color: var(--green);
}

.text-orange {
    color: var(--orange);
}

.text-gray {
    color: var(--gray);
}

.text-yellow {
    color: var(--yellow);
}

.text-purple {
    color: var(--purple);
}

.pop-gray {
    --pop: var(--gray);
}

.pop-gold {
    --pop: var(--gold);
}

.font-size-xl {
    font-size: var(--font-size-xl);
}

/* #endregion */

/* #region RESET */
a {
    text-decoration: none;
    color: inherit;
}

/* #endregion */

/* #region UTILITIES */
.spacer {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.btn {
    display: inline-block;
    background: var(--blue);
    font-size: 0.875rem;
    font-weight: 900;
    padding: 0.75rem 1.5rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.btn:hover {
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1);
}

input {
    font-family: inherit;
    background: transparent;
    border: 1px solid var(--gray);
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
    color: white;
    font-size: 1rem;
    font-weight: 500;
    padding: 1rem 1.5rem;
    width: 20rem;
    border-radius: var(--border-radius);
}

input::-webkit-input-placeholder {
    color: var(--gray);
    opacity: 0.5;
}

input::-moz-placeholder {
    color: var(--gray);
    opacity: 0.5;
}

input:-ms-input-placeholder {
    color: var(--gray);
    opacity: 0.5;
}

input::-ms-input-placeholder {
    color: var(--gray);
    opacity: 0.5;
}

input::placeholder {
    color: var(--gray);
    opacity: 0.5;
}

textarea {
    font-family: inherit;
    background: transparent;
    border: 1px solid var(--gray);
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
    color: white;
    font-size: 1rem;
    font-weight: 500;
    padding: 1rem 1.5rem;
    width: 100%;
    border-radius: var(--border-radius);
    min-height: 10rem;
}

textarea::-webkit-input-placeholder {
    color: var(--gray);
    opacity: 0.5;
}

textarea::-moz-placeholder {
    color: var(--gray);
    opacity: 0.5;
}

textarea:-ms-input-placeholder {
    color: var(--gray);
    opacity: 0.5;
}

textarea::-ms-input-placeholder {
    color: var(--gray);
    opacity: 0.5;
}

textarea::placeholder {
    color: var(--gray);
    opacity: 0.5;
}

label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray);
    display: block;
    margin-bottom: 0.5rem;
}

input:focus,
textarea:focus {
    --pop: var(--blue);
    outline: none;
    border-color: var(--pop);
}

.flow-content>* {
    margin: 0;
}

.flow-content>*+* {
    margin-top: 1.5rem;
}

.flow-content-big>*+* {
    margin-top: 2.5rem;
}

.section__heading {
    max-width: 100%;
    margin: 0 auto;
    display: block;
    -webkit-filter: drop-shadow(0 0 4px white) drop-shadow(0 0 4rem white) drop-shadow(0 0 8rem white);
            filter: drop-shadow(0 0 4px white) drop-shadow(0 0 4rem white) drop-shadow(0 0 8rem white);
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.section__content {
    margin: 4rem auto;
}

/* #endregion */

/* #region HEADER */
header {
    position: sticky;
    top: 0;
    width: 100%;
    height: var(--header-height);
    z-index: 1;
    background: #22222226;
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
}

header .container {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

header ul {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    list-style: none;
    gap: 2em;
    margin: 0;
    padding: 0;
}

.logo {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 0.01;
    font-style: italic;
    text-transform: uppercase;
}

/* #endregion */

/* #region HERO */
.hero {
    display: flow-root;
    overflow: hidden;
    position: relative;
    text-align: center;
    min-height: calc(100vh - var(--header-height));
}

.hero__wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    min-height: 100vh;
    margin-top: calc(-1 * var(--header-height));
}

.hero__content {
    max-width: 52rem;
}

.mouse-wheel {
    position: absolute;
    bottom: 6rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 1.5rem;
    height: 2.5rem;
    border-radius: 2rem;
    border: 0.2em solid white;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-animation: bounce-outer 3s infinite;
            animation: bounce-outer 3s infinite;
}

.mouse-wheel::before {
    content: '';
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: white;
    -webkit-animation: bounce-inner 3s infinite;
            animation: bounce-inner 3s infinite;
    -webkit-transform: translateY(-0.5rem);
        -ms-transform: translateY(-0.5rem);
            transform: translateY(-0.5rem);
}

@-webkit-keyframes bounce-outer {
    0% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }

    25% {
        -webkit-transform: translateY(1rem);
                transform: translateY(1rem);
    }

    50% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}

@keyframes bounce-outer {
    0% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }

    25% {
        -webkit-transform: translateY(1rem);
                transform: translateY(1rem);
    }

    50% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}

@-webkit-keyframes bounce-inner {
    0% {
        -webkit-transform: translateY(-0.5rem);
                transform: translateY(-0.5rem);
    }

    25% {
        -webkit-transform: translateY(0.5rem);
                transform: translateY(0.5rem);
    }

    50% {
        -webkit-transform: translateY(-0.5rem);
                transform: translateY(-0.5rem);
    }

    100% {
        -webkit-transform: translateY(-0.5rem);
                transform: translateY(-0.5rem);
    }
}

@keyframes bounce-inner {
    0% {
        -webkit-transform: translateY(-0.5rem);
                transform: translateY(-0.5rem);
    }

    25% {
        -webkit-transform: translateY(0.5rem);
                transform: translateY(0.5rem);
    }

    50% {
        -webkit-transform: translateY(-0.5rem);
                transform: translateY(-0.5rem);
    }

    100% {
        -webkit-transform: translateY(-0.5rem);
                transform: translateY(-0.5rem);
    }
}

.section--padding {
    padding: 0 12rem;
}

@media screen and (max-width: 1920px) {
    .section--padding {
        padding: 0 8rem;
    }
}

@media screen and (max-width: 1440px) {
    .section--padding {
        padding: 0 4rem;
    }
}

@media screen and (max-width: 1024px) {
    .section--padding {
        padding: 0 2rem;
    }
}

/* #endregion */

/* #region COURSES */
.courses {
    min-height: 100vh;
    background-image: url(../assets/Grid.svg);
    background-size: cover;
    background-position: center;
}

.courses__cards {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 4rem;
    max-width: 100rem;
    margin: 4rem auto;
}

.card {
    width: 45%;
    min-width: 21rem;
    max-width: 35rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    padding: 3rem;
    border-radius: var(--border-radius);
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    cursor: pointer;

    border: 1px solid rgba(255, 255, 255, 0.3);
    background: var(--gradient);
    -webkit-box-shadow: inset 0px 4px 8px rgba(255, 255, 255, 0.15);
            box-shadow: inset 0px 4px 8px rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
    border-radius: var(--border-radius);
}

.courses__cards .card {
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.courses__cards .card:hover {
    scale: 1.1;
}

.card-1 {
    --pop: var(--green);
    --gradient: radial-gradient(90% 120% at 0% 0%, rgba(24, 245, 20, 0.2) 0%, rgba(24, 245, 20, 0.02) 100%);
    left: calc(50% - var(--width) - 5vw);
    top: 2vh;
}

.card-2 {
    --pop: var(--blue);
    --gradient: radial-gradient(90% 120% at 100% 0%, rgba(22, 189, 226, 0.2) 0%, rgba(22, 189, 226, 0) 100%);
    right: calc(50% - var(--width) - 5vw);
    top: 10vh;
}

.card-3 {
    --pop: var(--gold);
    --gradient: radial-gradient(90% 120% at 50% 100%, rgba(245, 168, 20, 0.2) 0%, rgba(245, 168, 20, 0) 100%);
    left: calc(50% - var(--width) - 5vw);
    top: 18vh;
}

.card__content h3 {
    color: var(--pop);
    text-transform: uppercase;
}

.card__content h2 {
    margin-top: 0.5rem;
}

.card__footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.card__footer .btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 1rem;

    background: rgba(255, 255, 255, 0.05);
    border-radius: 78px;
}

.courses__cards .card .btn::before {
    content: 'Starten';
    opacity: 0;
    margin: 0;
    width: 0;
    color: white;
    font-size: var(--font-size-sm);
}

.courses__cards .card:hover .btn::before {
    -webkit-animation: slide 0.3s ease forwards;
            animation: slide 0.3s ease forwards;
}

@-webkit-keyframes slide {
    0% {
        width: 0;
        opacity: 0;
        margin: 0;
    }

    30% {
        opacity: 0;
    }

    100% {
        width: auto;
        opacity: 1;
        margin: 0 1rem;
    }
}

@keyframes slide {
    0% {
        width: 0;
        opacity: 0;
        margin: 0;
    }

    30% {
        opacity: 0;
    }

    100% {
        width: auto;
        opacity: 1;
        margin: 0 1rem;
    }
}

.card__footer .btn img {
    width: var(--font-size-xl);
    height: var(--font-size-xl);
}

.card__footer .font-para-big {
    color: #8B8B8B;
}

/* #endregion */

/* #region ALUMNI */

.alumni {
    margin-top: 12rem;
    position: relative;
}

.alumni .section__content {
    height: 30rem;
}

.alumni__cards {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 2rem;
    width: 240vw;
    -webkit-transform: translateX(-30vw);
        -ms-transform: translateX(-30vw);
            transform: translateX(-30vw);
    -webkit-animation: scroll 28s linear infinite;
            animation: scroll 28s linear infinite;
}

@-webkit-keyframes scroll {
    0% {
        -webkit-transform: translateX(-30vw);
                transform: translateX(-30vw);
    }

    100% {
        -webkit-transform: translateX(-120vw);
                transform: translateX(-120vw);
    }
}

@keyframes scroll {
    0% {
        -webkit-transform: translateX(-30vw);
                transform: translateX(-30vw);
    }

    100% {
        -webkit-transform: translateX(-120vw);
                transform: translateX(-120vw);
    }
}

.alumni__cards:hover {
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
}

.alumni__card {
    --width: 50rem;
    border-top-left-radius: 0;
    padding: 1.5rem;
    -webkit-box-shadow: none;
            box-shadow: none;
}

.alumni__image {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
}

.alumni__comment {
    line-height: 1.75;
}

/* #endregion */

/* #region TUTORS */
.tutors {
    min-height: 100vh;
    position: relative;
}

.tutors .section__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 8rem;
    margin-top: 8rem;
}

.tutors__card {
    position: relative;
    overflow: hidden;
    --gradient: radial-gradient(88.27% 120.66% at 8.76% 84.61%, rgba(166, 20, 245, 0.2) 0%, rgba(166, 20, 245, 0) 100%);
    min-width: 36rem;
}

.tutors__card :is(h2, h3) {
    text-transform: uppercase;
}

.tutors__card h3 {
    margin-top: 0.5rem;
}

.tutors__leftwrapper,
.tutors__rightwrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.tutors__coolstuff ul {
    opacity: 0.5;
}

.tutors__coolstuff li {
    margin: 0.5rem 2rem;
    list-style: none;
    position: relative;
}

.tutors__coolstuff li::before {
    content: attr(pre);
    position: absolute;
    left: -3.5rem;
    margin-right: 0.5rem;
}

.tutors__image {
    position: absolute;
    bottom: 0;
    right: -2rem;
    height: 24rem;
}

.tutors__comment {
    display: inline-block;
    width: 65%;
    line-height: 1.75;
}

.tutors__circle {
    position: relative;
    width: 28rem;
    height: 28rem;
    border-radius: 50%;
    border: 2px dashed rgba(255, 255, 255, 0.5);
}

@media screen and (max-width: 1200px) {
    .tutors__circle {
        width: 20rem;
        height: 20rem;
    }
}

[class*='tutors__simage'] {
    position: absolute;
    width: 5rem;
    height: 5rem;
    bottom: 0;
    right: 0;
    border: 3px solid white;
    border-radius: 50%;
    cursor: pointer;
}

[class*='tutors__simage']:hover {
    border-width: 6px;
}

.tutors__simage1 {
    top: 50%;
    left: 0;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

.tutors__simage2 {
    left: 4rem;
    bottom: 0;
}

.tutors__simage3 {
    left: 4rem;
    top: 0;
}

.tutors__simage4 {
    right: 0;
    top: 50%;
    -webkit-transform: translate(50%, -50%);
        -ms-transform: translate(50%, -50%);
            transform: translate(50%, -50%);
    width: 8rem;
    height: 8rem;
}

/* #endregion */

/* #region GOODIES */

.goodies {
    min-height: 100vh;
    position: relative;
    margin-top: 8rem;

    --spacing: 3rem;
}

.goodies__grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr var(--spacing) 1fr;
    grid-template-columns: repeat(2, 1fr);
    margin-top: calc(var(--spacing) * 2);
    gap: var(--spacing);
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
    margin-top: 6rem;
}

@media screen and (max-width: 768px) {
    .goodies__grid {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }
}

.goodies__card {
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
    text-align: left;
    gap: 0.5rem;
    padding: 1.5rem;
    margin: 0 auto;
    color: var(--pop);
    border-color: var(--pop);
    -webkit-box-shadow: none;
            box-shadow: none;
    cursor: default;
    -webkit-filter: drop-shadow(0px 0px 8px var(--pop)) drop-shadow(0px 0px 20rem var(--pop));
            filter: drop-shadow(0px 0px 8px var(--pop)) drop-shadow(0px 0px 20rem var(--pop));
}

.goodies__card .feather {
    margin-right: 0.5rem;
    vertical-align: middle;
}

.goodies__desc {
    opacity: 0.4;
}

.goodies__card:hover .goodies__desc {
    opacity: 1;
}

.goodies__card:hover {
    --pop: var(--gold);
}

.goodies__card .feather {
    display: inline;
}

/* #endregion */

/* #region NEWSLETTER */
.newsletter {
    min-height: 100vh;
    padding: 12rem;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.newsletter .section__content {
    text-align: center;
}

.newsletter input[type='email'] {
    margin-right: 0.5rem;
}

/* #endregion */

/* #region CONTACT */

.contact {
    margin-top: 8rem;
    position: relative;
}

.contact .section__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-top: 8rem;
    max-max-width: 60rem;
}

.contact input {
    display: block;
    width: 100%;
}

.contact__card {
    position: relative;
    overflow: hidden;
    --gradient: radial-gradient(88.27% 120.66% at 8.76% 84.61%, rgba(20, 245, 28, 0.2) 0%, rgba(245, 168, 20, 0) 100%);
    min-width: 36rem;
}

.contact__send {
    display: inline-block;
}

.contact__sendwrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

/* #endregion */

/* #region FOOTER */

footer {
    margin-top: 8rem;
    padding: 0 0 3rem 0;
    position: relative;
    text-align: center;
}

footer .section__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    margin-top: 8rem;
}

.footer__links {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 1rem;
}

/* #endregion */

/* #region BACKGROUND */
.background {
    background: var(--dark);
}

.texture {
    position: relative;
}

.texture::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url(../assets/texture.jpg);
    background-repeat: repeat;
    mix-blend-mode: overlay;
    opacity: 0.8;
}

.main-content {
    isolation: isolate;
}

.bg-gradient {
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    position: absolute;
    background: var(--bg-gradient-color, white);
    mix-blend-mode: color-dodge;
    -webkit-filter: blur(150px);
            filter: blur(150px);
}

.gradient-blue {
    --bg-gradient-color: var(--blue);
}

.gradient-red {
    --bg-gradient-color: var(--orange);
}

.gradient-orange {
    --bg-gradient-color: var(--yellow);
}

.gradient-green {
    --bg-gradient-color: var(--green);
}

.gradient-purple {
    --bg-gradient-color: var(--purple);
}

.gradient__right1 {
    width: 20vh;
    height: 90vh;
    right: 0vh;
    top: 5vh;
    -webkit-transform: rotate(50deg);
        -ms-transform: rotate(50deg);
            transform: rotate(50deg);
}

.gradient__right2 {
    width: 25vh;
    height: 65vh;
    right: -20vh;
    top: 25vh;
    -webkit-transform: rotate(50deg);
        -ms-transform: rotate(50deg);
            transform: rotate(50deg);
}

.gradient__right3 {
    width: 15vh;
    height: 65vh;
    right: -20vh;
    top: 15vh;
    -webkit-transform: rotate(50deg);
        -ms-transform: rotate(50deg);
            transform: rotate(50deg);
}

.gradient__left1 {
    width: 75vh;
    height: 22vh;
    left: -18vh;
    top: -3vh;
    -webkit-transform: rotate(150deg);
        -ms-transform: rotate(150deg);
            transform: rotate(150deg);
}

.gradient__left2 {
    width: 75vh;
    height: 22vh;
    left: -28.5vh;
    top: -13vh;
    -webkit-transform: rotate(150deg);
        -ms-transform: rotate(150deg);
            transform: rotate(150deg);
}

.gradient__course1 {
    width: 35vh;
    height: 35vh;
    left: 50vw;
    top: 195vh;
    opacity: 0.5;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
}

.gradient__course2 {
    width: 35vh;
    height: 35vh;
    right: 0vw;
    top: 120vh;
    opacity: 0.5;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
}

.gradient__course3 {
    width: 35vh;
    height: 35vh;
    left: 0vw;
    top: 120vh;
    opacity: 0.5;
    -webkit-transform: translateX(50%);
        -ms-transform: translateX(50%);
            transform: translateX(50%);
}

.gradient__alumni1 {
    width: 70vw;
    height: 30vh;
    left: 50vw;
    top: 220vh;
    opacity: 0.5;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
}

.gradient__alumni2 {
    width: 70vw;
    height: 15vh;
    left: 50vw;
    top: 310vh;
    opacity: 1;
    -webkit-transform: rotate(-20deg);
        -ms-transform: rotate(-20deg);
            transform: rotate(-20deg);
}

.gradient__alumni3 {
    width: 100vw;
    height: 30vh;
    left: 50vw;
    top: 270vh;
    opacity: 0.7;
    -webkit-transform: rotate(-20deg);
        -ms-transform: rotate(-20deg);
            transform: rotate(-20deg);
}

.gradient__alumni4 {
    width: 38vw;
    height: 15vh;
    left: -25vw;
    top: 310vh;
    -webkit-transform: rotate(-20deg);
        -ms-transform: rotate(-20deg);
            transform: rotate(-20deg);
}

.gradient__tutors1 {
    width: 30vh;
    height: 30vh;
    right: 25vw;
    top: 383vh;
    opacity: 0.3;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
}

.gradient__tutors2 {
    width: 50vw;
    height: 15vh;
    left: -25vw;
    top: 400vh;
    -webkit-transform: rotate(-20deg);
        -ms-transform: rotate(-20deg);
            transform: rotate(-20deg);
}

.gradient__goodies1 {
    width: 80vw;
    height: 15vh;
    right: -20vw;
    top: 520vh;
    -webkit-transform: rotate(-20deg);
        -ms-transform: rotate(-20deg);
            transform: rotate(-20deg);
}

.gradient__goodies3 {
    width: 60vw;
    height: 20vh;
    right: -20vw;
    top: 535vh;
    opacity: 0.7;
    -webkit-transform: rotate(-20deg);
        -ms-transform: rotate(-20deg);
            transform: rotate(-20deg);
}

.gradient__goodies2 {
    width: 50vw;
    height: 30vh;
    left: -25vw;
    top: 420vh;
    opacity: 0.7;
    -webkit-transform: rotate(-20deg);
        -ms-transform: rotate(-20deg);
            transform: rotate(-20deg);
}

.gradient__goodies4 {
    width: 55vw;
    height: 15vh;
    left: -25vw;
    top: 440vh;
    opacity: 0.7;
    -webkit-transform: rotate(-20deg);
        -ms-transform: rotate(-20deg);
            transform: rotate(-20deg);
}

.gradient__contact1 {
    width: 30vw;
    height: 30vh;
    left: 50vw;
    top: 600vh;
    opacity: 0.5;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
}

/* #endregion */