/* Applies border box and relative position to all elements page */
* {
    box-sizing: border-box;
    position: relative;
    scroll-behavior: smooth;
}

/* Hides overflow on the horizontal axis */
html {
    overflow-x: hidden;
}

/* Applies specific styling to the body */
body {
    margin: 0;
    background-color: #EFE9E4;
    font-size: 24px;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

/* Disables scroll when added to body */
.no-scroll {
    overflow: hidden;
    height: 100vh;
}

/* Applies styling to the navbar on top of page */
.navbar {
    font-family: Bebas Neue, Verdana, sans-serif;
    color: #0E0B0C;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 94%;
    height: 4em;
    border-bottom: solid 1px #0E0B0C;
    margin-left: 3%;
    margin-right: 3%;
    margin-bottom: 0;
    background-color: #EFE9E4;
}

/* Changes the styling of the logo inside the navbar */
.img-logo {
    width: 4em;
    height: 4em;
    margin-left: 0.5em;
}

/* Removes margin and list decoration inside the unordered list in the navbar */
.navbar ul {
    margin: 0;
    list-style-type: none;
}

/* Display ul items on the same vertical level */
.nav-items {
    display: inline-block;
    margin-right: 5em;
}

/* Adds transition to the star before each nav item */
li img {
    transition: all 500ms;
}

/* Adds a rotate and scale animation to the star when the nav item is hovered over */
li:hover img {
    transform: rotate(90deg);
    scale: 1.5;
}

/* Aligns the open and close button for the nav menu using flex on mobile */
.img-container {
    width: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Applies styling to the open and close button for the nav menu on mobile */
.menu-a,
#menu-open,
#menu-close {
    width: 1.5em;
    height: 1.5em;
    filter: brightness(0%);
    display: none;
}

/* Shows the open button by default */
#menu-open {
    opacity: 100%;
}

/* Hides the close button by default */
#menu-close {
    opacity: 0%;
}

/* Maintains anchor styling even after visiting */
.nav-a,
.nav-a:visited {
    color: #0E0B0C;
    text-decoration: none;
}

/* Applies lighter color to the anchor when hovering over it */
.nav-a:hover {
    color: #525252;
    text-decoration: none;
}

/* Applies styling to the star in the navbar */
#nav-star {
    width: 0.5em;
    margin: 0 0.2em 0.1em 0;
}

/* Applies specific styling to the main header in the homepage */
.main-header {
    display: flex;
    width: 94%;
    margin: 0 3%;
    height: auto;
    font-family: Bebas Neue, Verdana, sans-serif;
    font-size: 1.5vw;
}

/* Applies specific styling to the left part of the header */
.atom {
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

/* Applies responsive properties to the atom image in the homepage */
.atom img {
    top: -2em;
    left: 20%;
    width: 30em;
    position: absolute;
    z-index: -1;
}

/* Applies specific styling to quotes under the atom image */
.atom p {
    width: 60%;
    font-size: 0.8em;
    padding-bottom: 0;
    text-wrap: wrap;
}

/* Aligns the last qoute to the right */
.atom p:last-of-type {
    text-align: right;
}

/* Applies specific styling to the right side of the header */
.info {
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Gives specific and responsive properties to the stats on the top right of the header */
.stats {
    width: 50%;
    padding: 1em 0;
    margin-left: 50%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

/* Gives styling to each stat div */
.stat {
    width: 30%;
    height: auto;
}

/* Gives specific styling to each stat title */
.stat h3 {
    margin: 0;
    font-size: 3em;
    text-align: center;
    line-height: 1em;
}

/* Gives specific styling to each stat description */
.stat p {
    margin: 0;
    font-size: 1.7em;
    text-align: center;
}

/* Gives specific styling to the main header title */
.title {
    width: 100%;
    font-family: Bebas Neue, Verdana, sans-serif;
}

/* Applies flexbox to the start course anchor element */
.start {
    width: 19%;
    margin-left: 81%;
    margin-bottom: 0.5em;
    display: flex;
    align-items: center;
    color: rgb(167, 55, 167);
    text-decoration: none;
    font-size: 1.2em;
    height: 2em;
    padding-left: 1.5%;
}

/* Applies a lighter shade of purple on the start course anchor when hovered over */
.start:hover {
    color: rgb(198, 62, 198);
}

/* Applies a lighter shade of purple on the start course arrow image when hovered over */
.start:hover img {
    filter: invert(47%) sepia(50%) saturate(3200%) hue-rotate(268deg) brightness(77%) contrast(101%);
}

/* Applies specific properties to the arrow image in the start course anchor */
.start img {
    margin-left: 0.3em;
    width: 25%;
    height: auto;
    filter: invert(31%) sepia(89%) saturate(1136%) hue-rotate(269deg) brightness(83%) contrast(95%);
}

/* Applies responsive styling to the main header title */
.title h1 {
    width: 70%;
    margin: auto 0 20px auto;
    text-wrap: wrap;
    line-height: 0.8em;
    text-align: right;
    font-size: 10vw;
}

/* Applies properties to the course info container */
.course-info {
    width: 94%;
    margin: 1em 3%;
    height: auto;
}

/* Applies styling to the h1 title in the course info container */
.course-info>h1 {
    margin-top: 2em;
    font-family: Bebas Neue, Verdana, sans-serif;
    font-size: 3em;
    text-align: center;
}

/* Gives the requirements and learning outcomes containers flexbox properties */
.requirements,
.learning-outcomes {
    display: flex;
    width: 100%;
    margin-top: 2em;
    height: auto;
    justify-content: space-evenly;
}

/* Applies specific and responsive properties to each card in the course info */
.card {
    width: 25%;
    height: 16em;
    text-align: center;
    font-family: Bebas Neue, Verdana, sans-serif;
    background: rgba(239, 233, 228, 0.1);
    backdrop-filter: blur(15px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(104, 100, 100, 0.3);
    border-radius: 20px;
    padding: 0 0.5em;
    position: relative;
}

/* Applies styling to each card description */
.card p {
    font-family: Oswald, Verdana, sans-serif;
    color: #525252;
    margin: 0;
    margin-top: 0.4em;
}

/* Applies styling to each card title */
.card h1 {
    margin: 0;
}

/* Applies styling to each card icon */
.card img {
    width: 30%;
    margin: 1em 35% 0.5em 35%;
}

/* Applies styling to each particle */
.particle {
    width: 8%;
    aspect-ratio: 1;
    border-radius: 100%;
    position: absolute;
}

/* Applies pink gradient to particles given this class */
.pink {
    background-image: linear-gradient(rgb(234, 49, 147), rgb(66, 194, 240));
}

/* Applies purple gradient to particles given this class */
.purple {
    background-image: linear-gradient(rgb(180, 40, 215), rgb(254, 55, 204));
}

/* Applies blue gradient to particles given this class */
.blue {
    background-image: linear-gradient(rgb(31, 143, 204), rgb(184, 39, 228));
}

/* Applies specific styling and animations to each particle */
.particle-one {
    top: 10em;
    left: 0;
    z-index: 1;
    animation: particle-one 30s forwards infinite;
}

/* Applies specific styling and animations to each particle */
.particle-two {
    top: 10em;
    left: 40%;
    z-index: -1;
    animation: particle-two 30s forwards infinite;
}

/* Applies specific styling and animations to each particle */
.particle-three {
    top: 12em;
    left: 92%;
    z-index: 1;
    animation: particle-three 30s forwards infinite;
}

/* Applies specific styling and animations to each particle */
.particle-four {
    top: 2em;
    left: 55%;
    z-index: -1;
    animation: particle-four 30s forwards infinite;
}

/* Applies specific styling and animations to each particle */
.particle-five {
    top: 12em;
    left: 64%;
    z-index: -1;
    animation: particle-five 30s forwards infinite;
}

/* Applies specific styling and animations to each particle */
.particle-six {
    top: 2em;
    left: 25%;
    animation: particle-six 30s forwards infinite;
}

/* Hides the first part of the particles by default */
.hidden-one {
    display: none;
    top: 26em;
}

/* Hides the second part of the particles by default */
.hidden-two {
    display: none;
    top: 45em;
}

/* Gives responsive styling to the page footer */
footer {
    font-family: Oswald, Verdana, sans-serif;
    align-items: center;
    background-color: #EFE9E4;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 2em;
    width: 94%;
    margin-left: 3%;
    margin-right: 3%;
    border-top: solid 1px #0E0B0C;
}

/* Applies properties to the footer elements that are maintained even when visiting the anchor */
.footer-p,
.footer-a,
.footer-a:visited {
    width: 15em;
    text-align: left;
    height: auto;
    font-family: Oswald, Verdana, sans-serif;
    margin: 2% 0;
    font-size: 0.8em;
    color: rgb(83, 83, 83);
    text-align: left;
}

/* Applies text align and width properties to each div in the footer */
footer div {
    width: 12em;
    text-align: center;
}

/* Hides the empty div by default */
#emptydiv {
    height: 4em;
    display: none;
}

/* Applies various changes to elements on smaller devices mainly tablets */
@media only screen and (max-width: 890px) {

    .requirements,
    .learning-outcomes {
        flex-wrap: wrap;
    }

    .card {
        width: 40%;
        margin-bottom: 3em;
    }

    .card h1,
    .card p {
        z-index: 100;
    }

    .hidden-one {
        display: block;
        width: 15%;
        z-index: -1;
    }

    .particle-two {
        animation: particle-two 20s forwards infinite;
    }

    .particle-four {
        animation: particle-four 20s forwards infinite;
    }

    .particle-five {
        animation: particle-five 20s forwards infinite;
    }

    .particle-six {
        animation: particle-six 20s forwards infinite;
    }

}

/* Applies changes to various elements on smaller devices */
@media only screen and (max-width: 690px) {

    .card {
        width: 80%;
        margin-bottom: 3em;
    }

    .hidden-two {
        display: block;
    }

    .particle {
        width: 15%;
    }

    .course-info>h1 {
        margin-top: 1em;
        font-size: 2.5em;
    }

    footer {
        font-size: 0.6em;
    }

    .navbar {
        height: auto;
        z-index: 100;
    }

    .navbar ul {
        top: 1em;
        left: 0;
        width: 100%;
        padding: 0;
        background-color: #EFE9E4;
        display: none;
        font-size: 1.5em;
    }

    .navbar ul li {
        width: 40%;
        text-align: center;
        margin: 0em 30%;
        padding: 0.5em 0;
    }

    .img-container {
        width: 100%;
    }

    .course-info {
        flex-direction: column;
    }

    .requirements,
    .learning-outcomes {
        width: 94%;
        margin-left: auto;
        margin-right: auto;
    }

    #menu-open,
    .menu-a {
        display: block;
        margin-right: 1em;
    }

    #menu-open {
        margin-right: 1em;
    }

    .main-header {
        flex-direction: column;
    }

    .atom>div {
        display: none;
    }

    .atom {
        width: 94%;
        margin-left: 3%;
        font-size: 4em;
        height: 18em;
        padding-top: 1em;
    }

    .atom img {
        top: 2em;
        width: 14em;
        transform: translateX(-0.5em);
    }

    .info {
        width: 94%;
        margin-left: 3%;
        font-size: 3em;
    }

    .stats {
        width: 100%;
        margin: 0;
        margin-bottom: 1em;
        font-size: 0.9em;
    }

    .title {
        width: 100%;
        margin-left: 0;
    }

    .title h1 {
        font-size: 3em;
        text-align: left;
        margin-left: 0;
    }

    .start {
        width: 100%;
        text-align: left;
        margin-left: 0;
    }

    .start img {
        width: 10%;

    }
}

/* Decreases footer font size on smaller devices */
@media only screen and (max-width: 350px) {
    footer {
        font-size: 0.5em;
    }
}

/* Creates the keyframes of the fade out animation */
@keyframes shrink {
    from {
        opacity: 100%;
    }

    to {
        opacity: 0%;
    }
}

/* Creates the keyframes of the fade in animation */
@keyframes expand {
    from {
        opacity: 0%;
    }

    to {
        opacity: 100%;
    }
}

/* Creates the keyframes of the particle animation */
@keyframes particle-one {
    0% {
        transform: translateY(0em);
    }

    50% {
        transform: translateY(-7em);
    }

    100% {
        transform: translateY(0em);
    }
}

/* Creates the keyframes of the particle animation */
@keyframes particle-two {
    0% {
        transform: translateY(0em) translateX(0em);
    }

    50% {
        transform: translateY(-10em) translateX(-7em);
    }

    100% {
        transform: translateY(0em) translateX(0em);
    }
}

/* Creates the keyframes of the particle animation */
@keyframes particle-three {
    0% {
        transform: translateY(0em);
    }

    50% {
        transform: translateY(-7em);
    }

    100% {
        transform: translateY(0em);
    }
}

/* Creates the keyframes of the particle animation */
@keyframes particle-four {
    0% {
        transform: translateY(0em);
    }

    50% {
        transform: translateY(5em);
    }

    100% {
        transform: translateY(0em);
    }
}

/* Creates the keyframes of the particle animation */
@keyframes particle-five {
    0% {
        transform: translateY(0em) translateX(0em);
    }

    50% {
        transform: translateY(-10em) translateX(7em);
    }

    100% {
        transform: translateY(0em) translateX(0em);
    }
}

/* Creates the keyframes of the particle animation */
@keyframes particle-six {
    0% {
        transform: translateY(0em);
    }

    50% {
        transform: translateY(5em);
    }

    100% {
        transform: translateY(0em);
    }
}