/*** FONTS ***/
@font-face {
    font-family: shapiro-air;
    src: url("../font/shapiro-air.otf");
}

@font-face {
    font-family: halibut-serif-thin;
    src: url("../font/halibut-serif-thin.woff");
}

@font-face {
    font-family: shapiro-115;
    src: url("../font/Shapiro-115-Plus-Extd.otf");
}

@font-face {
    font-family: shapiro-95;
    src: url("../font/Shapiro-95-Super-Wide.otf");
}

@font-face {
    font-family: shapiro-75;
    src: url("../font/Shapiro-75-Heavy-Wide.otf");
}

/*** GENERAL ***/
html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    color: black;
}

/*** LOADING PAGE ***/
.loading-page {
    width: 100vw;
    height: 100vh;
    background-color: #f1d8e2;
    z-index: 2004;
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.loading-page small {
    margin-top: -20px;
    margin-bottom: 10px;
    font-family: shapiro-75;
    color: #42b5be;
    font-size: 15px;
}

#loading-icon {
    height: auto;
    width: 45px;
    animation: spin-menu 5s infinite linear;
    filter: drop-shadow(1px 1px 1.5px rgba(14, 14, 14, 0.42));
}

/*** CUSTOM SCROLLBAR ***/
/* Firefox */
html {
    scrollbar-width: none;
}

/* all other browsers */
::-webkit-scrollbar {
    width: 0;
}

#scrollbar-thumb {
    width: 30px;
    height: auto;
    position: absolute;
    right: 0;
    z-index: 1000;
    filter: drop-shadow(1px 1px 1px rgba(14, 14, 14, 0.42));
}

#thumb-container {
    height: 100vh;
    background-color: rgba(87, 226, 239, 0.25);
    width: 29px;
    position: fixed;
    right: 0;
    z-index: 999;
    border-radius: 15px;
    border: 0.5px solid #42b5be;
    opacity: 0;
    transition: 0.5s ease all;
}

/*** GENERAL TEXT ***/
h1, h2 {
    font-family: shapiro-air;
    font-weight: 300;
}

a {
    color: black;
}

p, button {
    font-family: halibut-serif-thin;
    color: black;
}

/*** HEADER ***/
#menu-container {
    display: flex;
    flex-direction: column;
    position: fixed;
    z-index: 1003;
    top: 10px;
    left: 10px;
}

#menu-container > img:nth-child(1) {
    height: auto;
    width: 65px;
}

#menu-container > img:nth-child(2) {
    height: auto;
    width: 35px;
    margin-left: 14px;
    margin-top: -5px;
    animation: spin-menu 5s infinite linear;
    filter: drop-shadow(0px 0px 1px rgba(14, 14, 14, 0.42));
}

#menu-container > img:nth-child(2):hover {
    cursor: pointer;
}

@keyframes spin-menu {
    0% {
        rotate: 0deg;
    }
    100% {
        rotate: 360deg;
    }
}

.menu-bg {
    background-color: rgba(0, 0, 0, 0.87);
    position: fixed;
    height: 100vh;
    width: 100vw;
    z-index: 0;
    opacity: 0;
    transition: .5s;
}

header > div {
    background-color: #6cced5;
    position: fixed;
    left: -221px;
    top: 0;
    height: 100vh;
    width: 220px;
    z-index: 1002;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    border-right: 1px solid #f47daf;
    transition: .7s;
}

.open-menu {
    left: 0;
}

.close-menu {
    left: -221px;
}

header ul {
    list-style: none;
    margin: 50px 0 0 10px;
    padding: 0;
}

header a {
    color: white;
    font-family: shapiro-75;
    text-decoration: none;
    font-size: 20px;
    transition: .2s;
}

header a:hover {
    color: #ddf3f5;
}

header li {
    margin-bottom: 20px;
}

header img {
    width: auto;
    height: 80px;
    margin: 0 0 10px 0;
    padding: 0;
}

header menu {
    margin: 0;
    padding: 0;
}

header i {
    color: #2f979f;
    font-size: 40px;
    margin-top: 15px;
    margin-left: 10px;
    transition: .2s;
}

header i:hover {
    cursor: pointer;
    color: #28868d;
}

#x-icon {
    cursor: pointer;
    margin: 12px 0 -10px 7px;
}

/*** HOME SECTION 1 ***/
#section-1-home {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    z-index: -1;
}

#sprinkles-video {
    width: 100%;
    height: auto;
    margin-top: -200px;
    position: fixed;
    z-index: -10;
    opacity: 0.6;
}

#masthead-logo {
    width: 1100px;
    height: auto;
    margin: 50px 0 -40px 0;
}

#masthead-logo-mobile {
    display: none;
    width: 500px;
    height: auto;
    margin-top: 50px;
    margin-bottom: 10px;
}

.masthead-logo {
    position: relative;
    z-index: -10;
    filter: drop-shadow(8px 5px 0px rgba(61, 193, 210, 0.37));
}

.masthead-donut {
    width: auto;
    height: 200px;
    margin: -65px -30px 0 -30px;
}

.masthead-donut-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

/* donut z-index */
#dm3, #dm5, #db1, #db3, #db5, #db8 {
    z-index: 1;
}

#db4,#db7 {
    z-index: 2;
}

#dm2, #dm5 {
    z-index: -1;
}

#dt1 {
    z-index: -2;
}
/* end donut z-index */

/* donut margins */
#db2 {
    margin-top: -125px;
}

#db4, #db6 {
    margin-top: -80px;
}

#db8 {
    margin-top: -128px;
}

#db9 {
    margin-top: -90px;
}

#dm1 {
    margin-right: -60px;
}

#dm2 {
    margin-top: -120px;
}

#dm3 {
    margin-right: -50px;
}

#dm4 {
    margin-top: -100px;
}

#dt1 {
    margin-bottom: -5px;
}

#dbl, #dbr {
    margin: 0 -20px -70px -20px;
}
/* end donut margins */

/*** HOME SECTION 2 ***/
#section-2-home {
    z-index: 3;
    margin-top: -100px;
    position: relative;
    height: 675px;
}

#donuts-video {
    width: 100%;
    height: auto;
}

#mobile-donut-sprinkles-bg {
    display: none;
}

#section2-content {
    margin-top: -930px;
    padding-right: 80px;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
    position: relative;

    margin-top: 1000px;
}

#title {
    margin-bottom: 10px;
    width: 600px;
}

#home h1,
#home h2 {
    font-size: 75px;
    line-height: 70px;
}

#s2-p {
    width: 500px;
}

#home p {
    line-height: 42px;
    font-size: 28px;
}

.blue-pink-btn {
    background-image: linear-gradient(to right, #a9e2e6, #f6c4e9);
    border: 1px rgba(245, 223, 240, 0.99) solid;
    border-radius: 10px;
    z-index: 10;
    transition: 0.5s ease all;
    padding: 7px 45px;
    font-size: 28px;
    position: relative;
}

#section-2-home button {
    margin-top: 100px;
}

.blue-pink-btn:hover {
    background-image: linear-gradient(to right, #f6c4e9, #f6c4e9);
    border: 1px rgba(241, 150, 217, 0.99) solid;
    cursor: pointer;
}

#section2-content h1,
#section2-content p {
    z-index: 10;
    pointer-events: none;
}

/* sprinkles */
.home-sprinkle {
    width: 120px;
    height: auto;
    transition: all ease 0.5s;
    transform: rotate(0deg);
    position: absolute;
    z-index: 9;
}

/* white */
#sprinkle-1 {
    bottom: 0px;
    right: 40px;
}

#sprinkle-2 {
    bottom: -30px;
    right: 300px;
    transform: rotate(20deg);
}

#sprinkle-3 {
    bottom: 30px;
    right: 400px;
    transform: rotate(50deg);
}

#sprinkle-4 {
    bottom: 200px;
    right: 800px;
    transform: rotate(2deg);
}

#sprinkle-5 {
    bottom: -350px;
    right: 220px;
    transform: rotate(160deg);
}

#sprinkle-6 {
    bottom: 500px;
    right: 770px;
    transform: rotate(250deg);
}

#sprinkle-7 {
    bottom: 420px;
    right: 370px;
    transform: rotate(320deg);
}

#sprinkle-8 {
    bottom: 370px;
    right: 290px;
    transform: rotate(186deg);
}

/* orange */
#sprinkle-9 {
    bottom: 240px;
    right: 0px;
    transform: rotate(220deg);
}

#sprinkle-10 {
    bottom: 310px;
    right: 630px;
    transform: rotate(59deg);
}

#sprinkle-11 {
    bottom: 460px;
    right: 230px;
    transform: rotate(136deg);
}

/* red */
#sprinkle-12 {
    bottom: 100px;
    right: 390px;
    transform: rotate(111deg);
}

#sprinkle-13 {
    bottom: -280px;
    right: 420px;
    transform: rotate(83deg);
}

#sprinkle-14 {
    bottom: -170px;
    right: 610px;
    transform: rotate(145deg);
}

#sprinkle-15 {
    bottom: -100px;
    right: 560px;
    transform: rotate(299deg);
}

/* blue */
#sprinkle-16 {
    bottom: 530px;
    right: 700px;
    transform: rotate(59deg);
}

#sprinkle-17 {
    bottom: 55px;
    right: 420px;
    transform: rotate(129deg);
}

#sprinkle-18 {
    bottom: 322px;
    right: 520px;
    transform: rotate(342deg);
}

#sprinkle-19 {
    bottom: 530px;
    right: 100px;
    transform: rotate(28deg);
}

/* yellow */
#sprinkle-20 {
    bottom: 560px;
    right: 800px;
    transform: rotate(348deg);
}

#sprinkle-21 {
    bottom: 250px;
    right: 760px;
    transform: rotate(264deg);
}

#sprinkle-22 {
    bottom: 10px;
    right: 300px;
    transform: rotate(90deg);
}

#sprinkle-23 {
    bottom: -230px;
    right: 460px;
    transform: rotate(0deg);
}

#sprinkle-24 {
    bottom: -50px;
    right: 660px;
    transform: rotate(34deg);
}

#sprinkle-25 {
    bottom: 550px;
    right: 460px;
    transform: rotate(184deg);
}

#sprinkle-26 {
    bottom: 230px;
    right: 560px;
    transform: rotate(233deg);
}

/* green */
#sprinkle-27 {
    bottom: 490px;
    right: 660px;
    transform: rotate(233deg);
}

#sprinkle-28 {
    bottom: 330px;
    right: 430px;
    transform: rotate(233deg);
}

#sprinkle-29 {
    bottom: 60px;
    right: 760px;
    transform: rotate(233deg);
}

#sprinkle-30 {
    bottom: 530px;
    right: 150px;
    transform: rotate(133deg);
}
/* end sprinkles */

/*** HOME SECTION 3 ***/
#section-3-home {
    background-color: white;
    background-image: url("../img/glam-donut-bg.jpg");
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.section-resize {
    height: 1200px;
}

#section-3-home > div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 0 40px 0 10px;
}

/* to disable the full height stretching of the flexbox property */
.btn-reg-height {
    align-self: center;
}

#section-3-home div > img {
    height: 100px;
    width: auto;
    margin-bottom: 40px;
}

#section-3-home > div > div > p:nth-child(1) {
    margin-top: 50px;
}

#section-3-home > div > div > p:nth-child(2) {
    margin-top: -20px;
}

#section-3-home > div > div > p {
    text-align: right;
}

/*** HOME SECTION 4 ***/
#section-4-home {
    background-color: white;
    width: 100%;
    display: flex;
    flex-direction: row;
}

#section-4-home > div:nth-child(1) {
    background-image: url("../img/mini-milk-donut.jpg");
    width: 60%;
    background-size: cover;
    background-position: center;
}

#section-4-home > div:nth-child(2) {
    background-image: url("../img/donut-print.jpg");
    width: 40%;
    background-size: cover;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#section-4-home > div:nth-child(2) > p:nth-child(2) {
    margin-top: -10px;
    margin-bottom: 70px;
}

#section-4-home h2 {
    transform: rotate(270deg);
    position: absolute;
    left: -480px;
    margin-top: 570px;
    font-size: 98px;
}

/*** HOME SECTION 5 ***/
#section-5-home {
    background-image: url("../img/pink-blue-bg.jpg");
    margin-top: -70px;
    display: flex;
    justify-content: space-between;
    padding-right: 20px;
    padding-left: 10px;
    background-position-x: center;
}

.pink-fill-text {
    font-family: shapiro-95;
    color: #f47daf;
}

#donut-tower {
    height: 900px;
    width: auto;
}

#blue-sparks {
    width: 160px;
    height: auto;
    margin-top: 50px;
}

.donut-sketch {
    width: 60px;
    height: auto;
    margin-top: 15px;
}

.donut-sketch-container {
    display: flex;
    flex-direction: column;
}

#section-5-home > div:nth-child(1) {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    margin-bottom: 10px;
}

#section-5-home > div:nth-child(2) {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-top: 70px;
    justify-content: space-between;
}

.left-justified-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

#section-5-home > div:nth-child(2) > div:nth-child(2) {
    margin-right: 60px;
    margin-bottom: 250px;
}

#section-5-home > div:nth-child(2) > div:nth-child(2) h2 {
    text-align: right;
    width: 700px;
    line-height: 90px;
}

#section-5-home p {
    margin-top: -20px;
    margin-bottom: 50px;
}

#section-5-home button {
    align-self: revert;
}

#section-5-home > div:nth-child(1) > div:nth-child(2) {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    align-self: flex-start;
    margin-top: 230px;
    margin-left: 70px;
}

/*** HOME SECTION 6 ***/
#section-6-home {
    background-image: url("../img/pink-teal-donuts-bg.jpg");
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-position: center;
    padding-bottom: 60px;
}

#section-6-home button {
    margin-bottom: 70px;
}

#section-6-home h2 {
    margin-top: 0;
    margin-bottom: 35px;
}

#section-6-home > div:nth-child(1) {
    padding-top: 50px;
    padding-left: 20px;
}

#section-6-home > div:nth-child(2) {
    display: flex;
    justify-content: center;
}

#section-6-home-btn {
    background-color: #f6c4e9;
    background-image: revert;
}

#section-6-home-btn:hover {
    background-color: #f1bde3;
}

#section-6-home p {
    margin-right: 45px;
}

/*** HOME SECTION 7 ***/
#section-7-home {
    background-color: black;
    background-image: url("../img/teal-donuts-bg-darkened.jpg");
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

#section-7-home h2 {
    font-family: shapiro-95;
    margin-left: 20px;
    margin-right: 20px;
}

#section-7-home p {
    color: white;
    margin-left: 20px;
    margin-right: 20px;
}

/*** HOME SECTION 8 ***/
#section-8-home {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), white), url("../img/gift-donut-bg.jpg");
    background-size: contain;
    background-size: 900px;
    background-repeat: no-repeat;
    background-position-y: bottom;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    text-align: right;
    padding-right: 50px;
}

#section-8-home > div {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-end;
    height: 600px;
}

#section-8-home button {
    align-self: flex-end;
}



/*** MENU ***/

#menu h1,
#order h1
{
    font-size: 100px;
    margin: 0;
    position: relative;
    z-index: 100;
}

#section-1-menu,
#section-1-order
{
    background-image: url("../img/pink-yellow-blue-donuts-bg.jpg");
    height: 300px;
    width: 100%;
    margin-top: 0px;
    color: white;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-attachment: fixed;
    background-size: cover;
    background-position-x: center;
    background-position-y: -300px;
    background-repeat: no-repeat;
}

#section-2-menu {
    display: flex;
    justify-content: center;
    background-size: contain;
    background-image: url("../img/donut-print.jpg");
}

/*** ORDER ***/
#section-2-order {
    background-image: url("../img/donut-print.jpg");
    background-size: 100vw;
    text-align: center;
    height: 90vh;
    margin-top: -50px;
}

#section-2-order p {
    font-size: 30px;
    padding: 70px 50px 0 50px;
}

.food-menu {
    height: auto;
    position: relative;
    width: 900px;
    margin-top: 40px;
    margin-bottom: 80px;
}

.food-menu:hover {
    cursor: zoom-in;
}

.food-menu-zoom-in {
    position: absolute;
    top: 0;
    width: 100vw;
    z-index: 1000;
}

.food-menu-zoom-in:hover {
    cursor: zoom-out;
}

/*** FOOTER ***/

footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: #f1d8e2;
    height: 50px;
}

footer div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding-left: 15px;
}

footer nav ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    list-style: none;
    font-family: shapiro-75;
    position: relative;
    z-index: 1;
    font-size: 14px;
    padding-right: 70px;
    margin-top: -3px;
}

footer nav ul a {
    text-decoration: none;
    padding-left: 20px;
    color: #df7aa4;
    transition: all ease-in-out 0.5s;
}

footer nav ul a:hover {
    color: #eea3c2;
}

#copyright-box p {
    font-size: 16px !important; /* Override general text media queries */
}

footer img {
    width: auto;
    height: 19px;
    margin-left: 7px;
    margin-top: -1px;
    animation: spin-menu 5s infinite linear;
    filter: drop-shadow(0px 0px 1px rgba(14, 14, 14, 0.42));
}


/********** MEDIA QUERIES **********/

@media screen and (max-width: 1800px) {

    #sprinkle-5 {
        bottom: -250px;
    }

    .food-menu {
        width: 800px;
    }
}

@media screen and (max-width: 1730px)  {

    #sprinkle-4 {
        right: 700px;
    }

    #sprinkle-29 {
        right: 660px;
    }
}

@media screen and (max-width: 1700px)  {

     #masthead-logo {
          width: 1000px;
     }

    .section-resize {
        height: 1100px;
    }

    #section-4-home h2 {
        left: -450px;
        margin-top: 520px;
        font-size: 90px;
    }

    #donut-tower {
        height: 800px;
    }

    #blue-sparks {
        width: 140px;
        margin-top: 60px;
    }
}

@media screen and (max-width: 1670px)  {

    #sprinkle-13 {
        bottom: -180px;
    }

    #title {
        margin-bottom: 10px;
    }

    #home h1,
    #home h2 {
        font-size: 65px;
    }

    #s2-p {
        width: 500px;
    }

    #home p {
        line-height: 42px;
        font-size: 25px;
    }

    .blue-pink-btn  {
        font-size: 25px;
    }

    #section2-content {
        padding-right: 50px;
    }

    #section-4-home h2 {
        left: -450px;
        margin-top: 520px;
        font-size: 90px;
    }

}

@media screen and (max-width: 1620px)  {

    .section-resize {
        height: 1000px;
    }

    #section-4-home h2 {
        left: -400px;
        margin-top: 470px;
        font-size: 80px;
    }

    #donut-tower {
        height: 720px;
    }

    #blue-sparks {
        width: 120px;
    }

    #section-5-home > div:nth-child(2) > div:nth-child(2) {
        margin-right: 100px;
        margin-bottom: 150px;
    }
}

@media screen and (max-width: 1590px)  {

    #sprinkle-5 {
        bottom: -150px;
    }

    #sprinkle-21 {
        right: 660px;
    }

    #sprinkle-23 {
        bottom: -130px;
    }

    #sprinkle-13 {
        bottom: -80px;
    }

    #sprinkle-29 {
        right: 560px;
    }

    .home-sprinkle {
        width: 100px;
    }

    .food-menu {
        width: 700px;
    }
}

@media screen and (max-width: 1500px)  {

    .section-resize {
        height: 900px;
    }

    #section-3-home h2 {
        width: 500px;
    }

    #section-4-home h2 {
        left: -360px;
        margin-top: 422px;
        font-size: 73px;
    }

    #donut-tower {
        height: 600px;
    }

    #blue-sparks {
        width: 120px;
    }

}

@media screen and (max-width: 1450px) {

    #sprinkle-14 {
        bottom: -10px;
        right: 510px;
    }

    #sprinkle-5 {
        bottom: 70px;
        right: 40px;
    }

    #sprinkle-4 {
        right: 300px;
    }
}

@media screen and (max-width: 1400px)  {

    .section-resize {
        height: 800px;
    }

    #section-4-home h2 {
        left: -337px;
        margin-top: 370px;
        font-size: 68px;
    }

    #donut-tower {
        height: 530px;
    }

    #blue-sparks {
        width: 100px;
        margin-top: 20px;
    }

    #section-5-home > div:nth-child(2) > div:nth-child(2) {
        margin-right: 105px;
        margin-top: -100px;
    }

    #section-5-home > div:nth-child(2) h2 {
        margin-right: 0px;
        margin-left: -100px;
    }

    #section-5-home p {
        margin-top: -50px;
        margin-bottom: 20px;
    }

    #section-6-home button {
        margin-bottom: 20px;
    }

    #section-8-home > div {
        height: 400px;
    }

    #section-8-home h2 {
        width: 500px;
        text-align: right;
    }

    .food-menu {
        width: 600px;
    }
}

@media screen and (max-width: 1380px)  {

    #sprinkle-13 {
        bottom: 180px;
        right: 120px;
    }

    #sprinkle-23 {
        bottom: 230px;
        right: 250px;
    }

    #sprinkle-21 {
        bottom: 270px;
        right: 360px;
    }

    #sprinkle-10 {
        right: 50px;
    }

    #sprinkle-27 {
        right: 460px;
    }

    #sprinkle-16 {
        right: 600px;
    }

    #sprinkle-6 {
        bottom: 400px;
        right: 550px;
    }

    #sprinkle-20 {
        right: 640px;
    }

    #sprinkle-15 {
        bottom: 500px;
        right: 260px;
    }

    #sprinkle-14 {
        bottom: 560px;
        right: -30px;
    }

    #section-3-home div > img {
        height: 80px;
    }
}

@media screen and (max-width: 1280px) {

    #section-5-home > div:nth-child(2) > div:nth-child(2) h2 {
        width: 500px;
    }

    #section-5-home > div:nth-child(1) > div:nth-child(2)  {
        margin-top: 205px;
    }

}

@media screen and (max-width: 1250px) {

    #sprinkle-24 {
        bottom: 350px;
        right: 230px;
    }

    #sprinkle-2 {
        bottom: 120px;
        right: 280px;
    }

    #sprinkle-29 {
        bottom: 580px;
        right: 200px;
    }

    #sprinkle-1 {
        bottom: 300px;
        right: 80px;
    }

    #sprinkle-22 {
        bottom: 410px;
        right: 200px;
    }

    #sprinkle-6 {
        bottom: 590px;
        right: 370px;
    }

    .home-sprinkle {
        width: 90px;
    }

    .section-resize {
        height: 700px;
    }

    #section-4-home h2 {
        left: -290px;
        margin-top: 315px;
        font-size: 58px;
    }

    #section-5-home > div:nth-child(1) > div:nth-child(2)  {
        margin-top: 180px;
    }

    #donut-tower {
        height: 480px;
    }

    #blue-sparks {
        width: 90px;
    }

    .food-menu {
        width: 500px;
    }

    #menu h1,
    #order h1
    {
        font-size: 80px;
    }
}

@media screen and (max-width: 1150px)  {

    #section-2-home button {
        margin-top: 50px;
    }

    #sprinkle-16 {
        bottom: 530px;
        right: 400px;
    }

    #sprinkle-20 {
        bottom: 580px;
        right: 550px;
    }

    #sprinkle-3 {
        bottom: 300px;
        right: 170px;
    }

    #sprinkle-18 {
        right: 200px;
    }

    #sprinkle-17 {
        right: 200px;
        bottom: 250px;
    }

}

@media screen and (max-width: 1100px)  {

    #masthead-logo {
        width: 900px;
    }

    #title {
        width: 400px;
    }

    #home h1,
    #home h2 {
        font-size: 55px;
        line-height: 65px;
    }

    .blue-pink-btn {
        font-size: 23px;
    }

    #s2-p {
        line-height: 33px;
    }

    #home p {
        font-size: 23px;
    }

    #section2-content {
        padding-right: 40px;
    }

    .home-sprinkle {
        width: 80px;
    }

    #section-4-home h2 {
        left: -240px;
        margin-top: 275px;
        font-size: 48px;
    }
}

@media screen and (max-width: 1050px)  {

    #sprinkle-5 {
        bottom: 340px;
        right: 20px;
    }

    .section-resize {
        height: 600px;
    }

    #section-5-home > div:nth-child(1) > div:nth-child(2)  {
        margin-top: 155px;
    }

    #donut-tower {
        height: 400px;
    }

    #blue-sparks {
        width: 80px;
    }

    #section-5-home > div:nth-child(2) > div:nth-child(2) {
        margin-right: 105px;
        margin-top: -180px;
    }

    #section-5-home > div:nth-child(2) > div:nth-child(2) h2 {
        line-height: 65px;
    }

    #section-5-home > div:nth-child(2) > div:nth-child(2) p {
        margin-top: -20px;
        margin-bottom: 25px;
    }

    .donut-sketch {
        width: 40px;
        margin-top: 12px;
    }

    #section-5-home > div:nth-child(2) > div:nth-child(2) {
        margin-top: -100px;
    }

    #section-6-home button {
        margin-top: -100px;
    }

    #section-8-home {
        background-position-y: center;
        background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.82), white), url("../img/gift-donut-bg.jpg");
    }

    .food-menu {
        width: 400px;
    }
}

@media screen and (max-width: 1000px)  {

    #masthead-logo {
        width: 800px;
    }

    #donut-container {
        margin-top: 30px;
    }

    .home-sprinkle {
        width: 70px;
    }

    #section-5-home > div:nth-child(2) > div:nth-child(2) h2 {
        width: 400px;
    }

    #section-5-home > div:nth-child(2) > div:nth-child(2) {
        margin-top: -150px;
    }

    #section-8-home > div {
        height: 300px;
    }
}

@media screen and (max-width: 980px)  {

    #sprinkle-12 {
        bottom: 250px;
        right: 320px;
    }

    #section-6-home button {
        margin-top: -130px;
    }
}

@media screen and (max-width: 940px)  {

    #home h1,
    #home h2 {
        font-size: 50px;
        line-height: 55px;
    }

    .blue-pink-btn {
        font-size: 21px;
        padding: 7px 35px;
    }

    #section-2-home button {
        margin-top: 40px;
    }

    #s2-p {
        width: 400px;
    }

    #home p {
        line-height: 30px;
        font-size: 21px;
    }

    #sprinkle-2 {
        bottom: 430px;
        right: 40px;
    }

    #section-4-home h2 {
        left: -240px;
        margin-top: 275px;
        font-size: 48px;
    }

    #section-5-home > div:nth-child(1) > div:nth-child(2) {
        margin-left: 40px;
    }
}

@media screen and (max-width: 920px)  {

    #home h1,
    #home h2 {
        font-size: 45px;
        line-height: 50px;
    }

    .blue-pink-btn {
        font-size: 20px;
    }

    #s2-p {
        width: 320px;
    }

    #home p {
        line-height: 30px;
        font-size: 20px;
    }

    #sprinkle-28 {
        right: 330px;
    }

    #sprinkle-27 {
        right: 260px;
    }

    .home-sprinkle {
        width: 60px;
    }

    #section-4-home h2 {
        left: -240px;
        margin-top: 275px;
        font-size: 48px;
    }
}

@media screen and (max-width: 900px)  {
    #section-8-home {
        background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.95), white), url("../img/gift-donut-bg.jpg");
    }

    #menu h1,
    #order h1
    {
        font-size: 65px;
    }
}

@media screen and (max-width: 875px)  {

    .section-resize {
        height: 500px;
    }

    #section-4-home h2 {
        left: -200px;
        margin-top: 230px;
        font-size: 40px;
    }

    #donut-tower {
        height: 330px;
    }

    #blue-sparks {
        width: 65px;
    }

    #section-5-home >div:nth-child(1) > div:nth-child(2) {
        margin-top: 130px;
    }

    #section-6-home button {
        margin-top: -95px;
    }
}

@media screen and (max-width: 850px)  {

    #sprinkle-13 {
        bottom: 250px;
    }

    #sprinkle-4 {
        bottom: 320px;
        right: 280px;
    }

    #sprinkle-7 {
        bottom: 380px;
        right: 230px;
    }

    #section-6-home h2 {
        margin-bottom: -5px;
    }

}

@media screen and (max-width: 830px)  {

    #masthead-logo {
        width: 710px;
    }

    #donut-container {
        margin-top: 40px;
    }

    .home-sprinkle {
        width: 60px;
    }
}

@media screen and (max-width: 800px)  {

    #home h1,
    #home h2 {
        font-size: 40px;
        line-height: 45px;
    }

    .blue-pink-btn {
        font-size: 18px;
        padding: 6px 30px;
    }

    #s2-p {
        width: 300px;
    }

    #home p {
        line-height: 25px;
        font-size: 18px;
    }

    #section-5-home > div:nth-child(2) > div:nth-child(2) h2 {
        width: 250px;
        line-height: 55px;
    }

    #section-6-home button {
        margin-top: -115px;
    }
}

@media screen and (max-width: 768px)  {

    /* change 3 donuts with falling sprinkles video to image on mobile */
    .home-sprinkle {
        display: none;
    }

    #donuts-video {
        display: none;
    }

    #mobile-donut-sprinkles-bg {
        display: block;
        height: 432px;
        width: 100vw;
        background-image: url("../img/3-donuts-falling-sprinkles-bg.png");
        background-position: right;
        background-size: cover;
    }

    #section-4-home > div:nth-child(2) {
        background-attachment: scroll;
    }

    #section-7-home {
        background-attachment: scroll;
    }

    #section-1-menu,
    #section-1-order
    {
        background-attachment: scroll;
        background-position-y: -70px;
    }
    
    footer nav ul li {
        display: none;
    }
}

@media screen and (max-width: 730px)  {

    #masthead-logo {
        width: 650px;
    }

    #donut-container {
        margin-top: 45px;
    }

    #sprinkles-video {
        margin-bottom: 100px;
    }

    #section-3-home > div > div > p {
        width: 205px;
    }

    #section-5-home > div:nth-child(2) > div:nth-child(2) h2 {
        width: 230px;
        line-height: 55px;
    }
}

@media screen and (max-width: 690px)  {

    #section-5-home > div:nth-child(1) > div:nth-child(2) {
        margin-left: 15px;
    }

    #section-5-home > div:nth-child(2) > div:nth-child(2) {
        margin-right: 80px;
    }

    #menu h1,
    #order h1
    {
        font-size: 50px;
    }

    #section-1-menu,
    #section-1-order
    {
        height: 200px;
    }
}

@media screen and (max-width: 665px)  {

    #masthead-logo {
        width: 600px;
    }

    #donut-container {
        margin-top: 50px;
    }
}

@media screen and (max-width: 625px)  {

    #section-5-home > div:nth-child(1) > div:nth-child(2),
    #section-5-home > div:nth-child(2) > div:nth-child(2)
    {
        width: 90%;
        position: absolute;
        margin-right: 0;
        margin-left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #section-5-home > div:nth-child(2) > div:nth-child(2) {
        margin-right: 8px;
        margin-top: 10px;
    }

    #section-5-home > div:nth-child(1) > div:nth-child(2) {
        padding-left: 75px;
        margin-top: 270px;
        width: 80vw;
    }

    #section-5-home > div:nth-child(2) > div:nth-child(2) h2 {
        text-align: center;
        width: 400px;
        margin-left: 0;
        line-height: 45px;
    }

    #section-5-home > div:nth-child(2) > div:nth-child(2) button {
        margin-top: 375px;
        width: 225px;
    }

    #section-5-home > div:nth-child(2) > div:nth-child(1)  {
        margin-right: -10px;
    }

    #blue-sparks {
        margin-top: -175px;
    }

    #section-5-home {
        height: 720px;
    }

    .donut-sketch {
        width: 30px;
    }

    #section-8-home h2 {
        width: 400px;
    }

    #section-8-home {
        background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.91), rgb(255, 255, 255), white), url("../img/gift-donut-bg.jpg");
    }
}

@media screen and (max-width: 615px)  {

    #masthead-logo {
        width: 550px;
    }

    #donut-container {
        margin-top: 55px;
    }
}

@media screen and (max-width: 608px)  {

    #section-6-home div:nth-child(1) {
        margin-top: -30px;
    }

    #menu h1,
    #order h1
    {
        font-size: 40px;
    }

    #section-1-menu,
    #section-1-order
    {
        height: 190px;
    }
}

@media screen and (max-width: 565px)  {

    #masthead-logo {
        display: none;
    }

    #masthead-logo-mobile {
        display: block;
    }

    #sprinkles-video {
        width: 300%;
        margin-bottom: 200px;
    }

    #scrollbar-thumb {
        width: 20px;
    }

    #thumb-container {
        width: 19px;
    }
}

@media screen and (max-width: 530px)  {

    .section-resize {
        height: 450px;
    }

    #section-4-home {
        flex-direction: column;
        height: 600px;
    }

    #section-4-home > div:nth-child(1) {
        width: 100%;
        height: 400px;
    }

    #section-4-home > div:nth-child(2) {
        width: 100%;
        height: 200px;
    }

    #section-4-home > div:nth-child(2) p {
        margin-top: -20px;
    }

    #section-4-home button {
        margin-top: -40px;
    }

    #section-4-home h2 {
        left: -250px;
        margin-top: 275px;
        font-size: 50px;
    }
}

@media screen and (max-width: 515px)  {

    #masthead-logo-mobile {
        width: 450px;
    }

    .food-menu {
        width: 300px;
    }
}

@media screen and (max-width: 500px)  {
    footer nav {
        display: none;
    }

    #copyright-box p {
        font-size: 14px !important; /* Override general text media queries */
    }
}

@media screen and (max-width: 475px)  {

    #section2-content {
        padding-right: 0px;
        align-items: center;
    }

    #home h1,
    #home h2 {
        text-align: center;
        font-size: 50px;
        line-height: 55px;
    }

    #home p {
        text-align: center;
        font-size: 22px;
        line-height: 33px;
    }

    .blue-pink-btn {
        font-size: 22px;
        padding: 7px 33px;
    }

    #section-2-home button {
        margin-top: 27px;
    }

    .section-resize {
        height: 650px;
        background-position: left;
        background-position-x: -150px;
        background-position-y: 20px;
    }

    #section-3-home {
        background-position-x: -170px;
        background-position-y: 10px;
    }

    #section-3-home > div {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0;
    }

    #section-3-home > div > div:nth-child(2) {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    #section-3-home > div > div > p:nth-child(1),
    #section-3-home > div > div > p:nth-child(2) {
        text-align: center;
        margin-top: -30px;
        font-size: 18px;
    }

    #section-3-home > div > div > p:nth-child(1) {
        margin-right: -18px;
    }

    #section-3-home > div > div > p:nth-child(2) {
        margin-left: -18px;
    }

    #section-3-home > div img {
        margin-left: -270px;
        margin-bottom: 150px;
        height: 120px;
    }

    #section-3-home > div:nth-child(2) {
        margin-bottom: 70px;
    }

    #section-4-home button {
        margin-top: -60px;
    }

    #section-5-home > div:nth-child(2) > div:nth-child(2) h2 {
        text-align: center;
        width: revert;
        margin-left: 0;
        line-height: 45px;
        width: 330px;
        font-size: 40px;
    }

    #section-5-home {
        height: 730px;
        background-position-y: 200px;
    }

    #section-6-home div:nth-child(1) {
        margin-top: 10px;
    }

    #section-6-home {
        margin-top: -20px;
        background-repeat: no-repeat;
    }

    #section-6-home h2 {
        padding-right: 10px;
        padding-left: 10px;
    }

    #section-6-home p {
        margin-right: 10px;
        margin-left: 10px;
    }

    #section-6-home > div:nth-child(1) {
        padding-left: revert;
    }

    #section-8-home button {
        align-self: center;
    }

    #section-8-home {
        padding: 0;
        align-items: center;
        background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.86), rgb(255, 255, 255), white), url("../img/gift-donut-bg.jpg");
    }

    #section-8-home p {
        width: 100vw;
        margin-top: -20px;
        padding-right: 10px;
        padding-left: 10px;
        width: 90vw;
    }

    #section-8-home h2 {
        width: 100vw;
    }

    #section-8-home a {
        align-self: center;
    }
}

@media screen and (max-width: 465px)  {

    #masthead-logo-mobile {
        width: 400px;
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 460px)  {

    #section-6-home button {
        margin-top: -170px;
    }

    #menu h1,
    #order h1
    {
        font-size: 35px;
    }
}

@media screen and (max-width: 445px)  {

    #section-3-home > div img {
        margin-left: -240px;
    }
}

@media screen and (max-width: 440px)  {
    #section-6-home > div:nth-child(1) {
        margin-top: -20px;
    }
}

@media screen and (max-width: 430px) {
    #section-5-home > div:nth-child(1) > div:nth-child(2) {
        width: 70vw;
        padding-left: 85px;
    }

    #section-5-home > div:nth-child(2) > div:nth-child(2) {
        margin-right: 2px;
    }

}

@media screen and (max-width: 420px)  {

    #section-3-home > div img {
        margin-left: -220px;
    }

    #section-8-home h2 {
        font-size: 40px;
    }
}

@media screen and (max-width: 410px)  {

    #masthead-logo-mobile {
        width: 370px;
    }
}

@media screen and (max-width: 401px)  {
    #section-6-home p {
        line-height: 25px;
        font-size: 20px;
    }
}

@media screen and (max-width: 400px)  {

    #section-3-home h2 {
        width: 300px;
        line-height: 50px;
    }

    #section-3-home {
        background-position-y: 55px;
    }

    #section-3-home > div > div > p:nth-child(1) {
        margin-right: 0;
    }

    #section-3-home > div > div > p:nth-child(2) {
        margin-left: 0;
    }

    #section-3-home > div > div:nth-child(2) {
        flex-direction: column;
    }

    #section-4-home h2 {
        left: -245px;
        margin-top: 280px;
        font-size: 35px;
    }
}

@media screen and (max-width: 385px)  {

    #section-3-home > div img {
        margin-left: -200px;
        margin-bottom: 130px;
    }

    #section-5-home > div:nth-child(1) > div:nth-child(2) {
        padding-left: 75px;
    }
}

@media screen and (max-width: 375px)  {

    #masthead-logo-mobile {
        width: 340px;
    }
}

@media screen and (max-width: 365px)  {

    #section-3-home > div img {
        margin-left: -190px;
    }

    #section-3-home {
        background-position-x: -185px;
        background-position-y: 40px;
    }

    #section-4-home h2 {
        left: -250px;
        margin-top: 278px;
        font-size: 30px;
        margin-right: -20px;
        margin-left: -20px;
    }
}

@media screen and (max-width: 348px)  {
    #section-6-home p {
        line-height: 22px;
    }
}

@media screen and (max-width: 345px)  {

    #home h1,
    #home h2 {
        font-size: 42px;
        line-height: 50px;
    }

    #s2-p {
        width: 250px;
    }

    #home p {
        font-size: 20px;
        line-height: 29px;
    }

    .blue-pink-btn {
        font-size: 20px;
    }

    #section-3-home > div img {
        margin-left: -170px;
        margin-bottom: 145px;
    }

    #section-4-home h2 {
        font-size: 30px;
    }

    #section-5-home > div:nth-child(2) > div:nth-child(2) {
        margin-right: 0px;
    }

    #section-5-home > div:nth-child(2) > div:nth-child(2) h2 {
        width: 98vw;
        margin-left: 10px;
    }

    #blue-sparks {
      margin-left: -5px;
    }

    #masthead-logo-mobile {
        width: 310px;

    }

    #section-8-home h2 {
        font-size: 38px;
    }

}