index.css

:root {
    /* COLOURS */
    --cream: #fbffa7;
    --medium-blue: #b1c5ff;
    --light-blue: #b6ffc0;
    --medium-orange: #ff764d;
    --purple: #d5b3ff;
    --dark-blue: #0000ff;
    /* LINK SPACING */
    --link-margin: 0 14px;
}

body {
    font-family: 'Roboto', sans-serif;
}

/* NAV SECTION */
.navbar {
    padding-top: 10px; 
    display: flex;
}

.logo img {
    width: 38px;
    height: 38px;
    padding: 0 24px;
}

.navbar .left {
    display: flex;
    align-items: center;
    margin-right: 48px;
}

.navbar .left a {
    margin: 0 14px;
}

.navbar .right {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.navbar .right a {
    margin: 0 14px;
}

#blue {
    color: var(--dark-blue);
}

.navbar a {
    text-decoration: none;
    color: black;
}

hr {
    width: 100%;
}

.sub-links {
    padding: 14px 14px;
}

.sub-links a {
    text-decoration: none;
    margin: var(--link-margin);
    color: black;
}

#about-red {
    color: red;
}

/*  MAIN IMAGE */
.welcome-image {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

#large-name {
    position: absolute;
    align-self: center;
    color: var(--medium-orange);
    font-size: 8rem;
    font-weight: bold;
    letter-spacing: 6px;
}

.mission  {
    width: 50%;
    margin: 0 auto;
    padding-top: 50px;
}

.h1-bold .blue-font {
    color: var(--dark-blue);
}

.mission .p1-small {
    font-size: 1.15rem;
}

/* MID-SECTION */
.shapes-block {
    max-width: 100%;
    height: 500px;
    position: relative;
    margin: 48px 0;
}

.shapes-block .orange-box {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    background-color: var(--cream);
    z-index: -2;   
}

.shapes-block .photos {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.shapes-block .photos img:nth-of-type(1) {
    margin-top: 40px;
}

.photo-video {
    position: relative;
    padding: 30px 0 16px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#play-button {
    width: 6em;
    height: 6em;
    position: absolute;
    align-self: center;
}

#video-side {
   width: 601px;
   margin-top: 4px;
}

/* NEXT MID-SECTION */
.photos-block {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    position: relative;
    padding-top: 60px;
}

.lightblue-box {
    width: 49vw;
    height: 75vw;
    background-color: var(--light-blue);
    z-index: -2;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.photos-block1 {
    grid-column: 1 / 2;
    grid-row: 1 / 1;
}

.photos-block1 img { 
    display: block;
    padding: 60px 0 16px 80px;
    width: 456px;
    height: 342px;
}

.photos-block3 {
    display: inline-block;
    padding-top: 180px;
    z-index: 1;
    position: absolute;
    right: 150px;
}

.photos-block3 img {
    width: 569px;
    height: 569px;
}

/* NEXT MID-SECTION */
.poster-img {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 0;
}

.photo-square {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    position: relative;
}

.photo-square .light-purple {
    width: 601px;
    height: 526px;
    max-width: 100%;
    background-color: var(--purple);
    z-index: -2;
}

.photo-square .image1, .image2 {
    z-index: 1;
    position: absolute;
    max-width: 100%;
}

.photo-square .image1 img {
    padding-right: 500px;
}

.photo-square .image2 img {
    padding-left: 600px;
    align-self: flex-end;
}

/* NEXT MID SECTION */
.photo-and-text {
    display: flex;
    margin: 0 60px;
    padding: 50px 0;
}

.photo-and-text .text {
    background-color: var(--light-blue);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.photo-and-text .text h1, h2 {
    width: 50%;
    line-height: 2.4rem;
}

.photo-and-text .text h2 {
    text-decoration: none;
    margin: 0;
}

#brand {
    padding: 30px 50px;
}

#brand h1 {
    font-size: 3rem;
}

/*  FOOTER */
.main {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding-left: 50px;
}

input, select {
    background-color: #eee;
}

input {
    font-size: 1.15rem;
    padding: 8px 0 8px 8px;
}

.signup button {
    padding: 8px;
    background-color: var(--dark-blue);
    color: white;
    font-size: 1.15rem;
}

.signup button, input {
    border: none;
}

.ll select {
    font-size: 0.8rem;
    padding: 8.8px;
    border: none;
}

.second {
    display: flex;
    padding: 30px 50px;
}

.second a {
    text-decoration: none;
    color: black;
    margin-right: 6px;
    font-size: 0.8rem;
}

.made {
    margin-left: auto;
}

.made span {
    padding: 6px;
}

.made span:nth-of-type(1) {
    font-size: 0.95rem;
}