html{
    background-color: #06061a;
    color: white;
    font-family: 'Encode Sans';
    font-size: 17px;
}   
body{
    margin: 0;
    padding: 0;
    
}

/* Template Selectors */

a, a:visited{
    text-decoration-line: none;
    color: white;
}
a:hover{
    color: rgba(255, 255, 255, 0.792);
}
.button1 .black{
    color: #000;
}
.button1{
    height: 3.125rem;
    width: 10rem;
    border-radius: 3.125rem;
    font-weight:600;
    font-size: 0.938rem;
    background-color: #D9d9d9;
    color: #040529;
    border: #d9d9d9;
    margin-top: 0.938rem;
}
.button1:hover{
    background-color: #1b1e73;
    color: #D9d9d9;
    cursor: pointer;
}
.button2{
    height: 4rem;
    width: 4rem;
    margin: auto;
    border-radius: 3.125rem;
    font-family: 'Encode Sans';
    font-weight: 900;
    font-size: 1.5rem;
    background-color: #D9d9d9;
    color: #040529;
    border: #d9d9d9;
}
.button2:hover{
    background-color: #1b1e73;
    color: #D9d9d9;
    cursor: pointer;
}
.roboto{
    font-family: "Roboto", sans-serif;
}
.highlight{
    color: #b1b1b1;
    text-decoration: underline;
}
.legal-block{
    padding: 0.5rem 5rem 3rem;
}
.text-center{
    text-align: center;
}
.text-left{
    text-align: left;
    justify-content: left;
}
.textblock{
    padding: 2rem 4.063rem 9.375rem;
}
.textblock h1 {
    text-align: center;
    margin: 0 0 2.188rem 0;
}
.titlehead{
    background-size:cover;
    background-repeat: no-repeat;
    background-position-y: top;
    height: 30rem;
}
/* Font sizes */
.very-big{
    /* h1 */
    font-size: 4.063rem;
    font-weight: 700;
}
.big{
    /* h2 */
    font-size: 3rem;;
}
.medium-big{
    /* h3 */
    font-size: 2.3rem;
    margin: 0;
}
.medium{
    /* <h4> */
    font-size: 2rem;
    margin: 0;
}
.medium-small{
    font-size: 1rem;
    margin: 0;
}
.small{
    /* <p> */
    font-size: 1.3rem;
}
.small-medium{
    /* <p> */
    font-size: 0.9rem;
}
.very-small{
    /* <p> */
    font-weight: 100;
    font-size: 0.625rem;
}

/* dividing lines */

.dividing-line-right{
    border-width: 0.01px;
    border-right: rgb(128, 136, 167);
    border-style: solid;
    color: rgba(0, 0, 0, 0);
    margin: 10rem 0;
}
.dividing-line-bottom{
    border-width: 0.01px;
    border-bottom: rgb(128, 136, 167);
    border-style: solid;
    color: rgba(0, 0, 0, 0);
    margin: 0 0.5rem;
}

/* navbar */

#nav{
    display: flex;
    padding: 0.875rem 1.75rem;
    height: 3.75rem;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 100%;
    background-color: rgba(3, 2, 10, 0);
}
.logo{
    font-family: 'nevis', sans-serif;
    letter-spacing: 0.098rem;
    font-size: 2.3rem;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
#nav ul{
    list-style-type: none;
    display: flex;
    width: 37.432rem;   
    height: 1.188rem;
    padding: 0 5rem;
    justify-content: flex-end;
    align-items: center;
    gap: 3.125rem;
    flex-shrink: 0;
}
.hamburger-bars{
    display: none;
    
}
.hamburger-bars:hover{
    cursor: pointer;
}
.bar1, .bar2, .bar3{
    background-color: white;
    height: 0.25rem;
    width: 1.5rem;
    margin: 0.13rem 0;
    border-radius: 1rem;
}
.bar1:hover, .bar2:hover, .bar3:hover{
    background-color: rgb(148, 144, 144);
}
.selection-menu{
    background-color: #181b3f;
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    font-size: 2rem;
    z-index: 0;
}
.selection-menu ul{
    list-style-type: none;
    padding: 6rem 2rem;
}
.selection-menu li{
    padding-bottom: 1rem;
}

/* footer */

footer{
    margin: 0;
    padding-bottom: 0.2rem;
    height: 19.688rem;
    background-color: #000;
}
.footer-info {
    display: flex;
}
.logo-and-address{
    padding: 1.875rem;
    width: 15vw;
}
.logo-footer{
    padding: 0;
    font-family: 'nevis', sans-serif;
    letter-spacing: 0.098rem;
    font-size: 2.3rem;
    text-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.25);
}
.footer-nav ul{
    list-style-type: none;
    padding: 3.125rem;
}   
.footer-nav li{
    padding: 0.313rem;
}
.navbar-divider{
    margin: 4rem 0;
    border-color: #3e3e3e;
}
.newsletter{
    padding: 2rem 3rem;
}
.newsletter-title{
    margin-bottom: 1rem;
}
#newsletter-email{
    width: 25em;
}
.small-button{
    margin-top: 0;
    font-size: 0.8rem;
    height: 2rem;
    width: 6rem;
}
.footer-nav-mobile{
    display: none;
}
.copyright{
    margin: 0;
}

/* Layout Selectors for index.html*/

.hero{
    display: flex;
    justify-content: flex-start;
    column-gap: 37.5rem;
    height: 39rem;
    /* Original photo here: https://www.pexels.com/photo/snowy-trees-by-green-house-in-finland-18711720/. License on Pexels photos here https://www.pexels.com/license/ */
    background-image: url(../assets/png/house.jpg);
    background-size:cover;
    background-repeat: no-repeat;
    background-position-y: center;
}
.slogan {
    margin-left: 2.5rem;
    width: 35vw;
    height: 20rem;
    padding: 7rem 0 8rem;
    text-align: left;
}
.feature1{
    background-color: #06061a;
    height: 40.625rem;
    padding: 3.125rem;
} 
.competitor-speed{
    padding: 6rem;
    padding-left: 10rem;
    padding-bottom: 2rem;
    display: flex;
    gap: 4rem;
    align-items: center;
}
#competitor-bar{
    background-color: white;
    width: 0;
    height: 1rem;
    border-radius: 3rem;
    font-size: 1px;
}
.interdish-speed{
    padding: 6rem;
    padding-left: 10rem;
    padding-top: 2rem;
    padding-bottom: 3rem;
    display: flex;
    gap: 2.76rem;
    align-items: center;
}
.logo2{
    margin: 0;
}
#interdish-bar{
    background-color: white;
    width: 0;
    height: 1rem;
    border-radius: 3rem;
    font-size: 1px;
}
.feature2{
    /* Original photo here: https://www.pexels.com/photo/black-and-white-striped-textile-2387532/       . License on Pexels photos here https://www.pexels.com/license/ */
    background-image: url(../assets/png/streaks.jpg);
    background-size:cover;
    background-repeat: no-repeat;
    background-position-y: center;
    height: 20.313rem;
    padding: 3.125rem;
}   
.reviews{
    font-size: 1.563rem;
    background-color: #0D2954;
    padding: 3.125rem;
}
.testimonials{
    display: flex;
    margin: auto;
}
.testimonials-box{
    height: 24.313rem;
    overflow: auto;
    display: flex;
    gap: 0.625rem;
    background-color: white;
    max-width: 700px;
    border-radius: 3.125rem;
    color:#000;
    flex-direction: column;
}
#comment{
    margin: 1rem;
}
#profile-picture{
    margin: 1rem auto 0.5rem;
    height: 7rem;
    width: 7rem;
    object-fit: cover;
    display: flex;
    border-radius: 8rem;
}
.footnotes{
    padding: 1rem;
    margin-left: 0.5vw;
}

/* Layout selectors for aboutus.html */

.about-bg{
    /* Original photo here: https://images-assets.nasa.gov/image/iss043e000030/iss043e000030~orig.jpg. NASA photos are free to use according to https://www.nasa.gov/nasa-brand-center/images-and-media/ */ 
    background-image: url(../assets/png/earth.jpg);
}
.about-slogan{
    margin: 2rem 0;
}
.about-landing{
    display: flex;
    margin: 4rem 3rem;
    align-items: center;
}
.initial-promise{
    flex-basis: 40vw;
}
.title{
    padding: 15rem 0;
    margin: 0;
    text-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25); 
}
.promise-slogan{
    width: 90%;
}
.services{
    padding-left: 5rem;
    display: flex;
    flex-wrap: wrap;
}
.offerings{
    max-width: 20rem;
    margin: 2rem;
    background-color: #181b3f;
    padding: 2rem;
    border-radius: 1rem;
}

/* Layout selectors for careers.html */
.careers-bg{
    background-color: #0006bd;
}

/* Layout seletors for companyhistory.html */

.history-bg{
    /* Original photo here: https://www.pexels.com/photo/aerial-view-clouds-nasa-satellite-23781/. Pexels photos are free to use according to https://www.pexels.com/license/ */ 
    background-image: url(../assets/png/satellite.jpg);
    background-position: 50% 45%;
}

/* Layout selectors for contactus.html */
.contact-bg{
    max-height: 27rem;
}
.contact-bg h3{
    padding: 1rem 6rem 1rem;
}
.contact-bg h1{
    padding: 10rem 6rem 1rem;
}
.contact-landing{
    background-color: #0e0e48;
    margin: 0;
    display: flex;
}
.info-form{
    padding: 5rem 5rem;
}
.agreement{
    display: flex;
    max-width: 27rem;
}
input[type=text]{
    width: 27rem;
    height: 1.5rem;
    margin-top: 0.4rem;
}
input[type=checkbox]{
    margin-right: 0.5rem;
}
select{
    font-family: 'Encode Sans';
    font-size: 0.9rem;
    margin-top: 0.4rem;
}
textarea{
    margin-top: 0.4rem;
    width: 35em;
    resize: none;
    font-family: 'Encode Sans';
}
.other-info{
    padding: 5rem 5rem;
}
.contact-divider{
    display: none;
}
.social-pages{
    padding-bottom: 2rem;
}
.social-logo{
    height: 60px;
    width: 60px;
    margin-right: 1rem;
}
.careers{
    padding-bottom: 2rem;
}

/* Layout Selectors for privacypolicy.html */

.privacy-bg{
    background-color: #22269d;
    padding: 5rem;
    max-height: 20rem;
}
.privacy-bg h1{
    padding-top: 7rem;
    padding-bottom: 2rem;
}
.stipulations {
    margin: 2.5rem 0;
}
.letters{
    list-style-type: lower-latin;
}

/* Layout selectors for products.html */

.product-bg{
    padding: 5rem;
    height: 20rem;
     /* Original photo here: https://www.pexels.com/photo/body-of-water-near-city-buildings-421927/. Pexels photos are free to use according to https://www.pexels.com/license/ */
    background-image: url(../assets/png/skyline.jpg);
    background-position: 50% 40%;
}
.product-bg h1{
    padding-top: 7rem;
    padding-bottom: 2rem;
}
.product-type-selectors{
    padding: auto;
    padding-top: 1vw;
    display: flex;
    justify-content: center;
    gap: 1rem;
}
#empty{
    height: 10rem;
    display: flex;
    align-items: center;
}
#empty p{
    margin: auto;
}
#personal-offer{
    padding: 2rem 0 7rem;
    display: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.plans{
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
    justify-content: center;
    padding-top: 2rem;
}
.offers{
    padding: 2rem;
    min-height: 23rem;
    width: 16rem;
    background-color: rgb(50, 35, 110);
}
.offers .medium{
    padding-bottom: 2rem;
}
#business-offer{
    padding: 5rem 0 7rem;
    display: none;
    flex-flow: column;
    align-items: center;
}
/* Layout Selectors for slaverystatment.html */

.slavery-bg{
    background-color: #2c1371;
}

/* Responsive Selectors */

/* navbar responsiveness */
@media only screen and (max-width: 960px) {
    #nav{
        z-index: 1;
    }
    #nav ul{
        display: none;
    }
    .hamburger-bars{
        display: flex;
        flex-direction: column;
        margin-right: 60px;
    }
}
@media only screen and (min-width: 1010px) and (max-width: 1370px){
    /* Footer */
    .logo-and-address{
        width: 25vw;
    }
    .navbar-divider{
        display: none;
    }
    .newsletter{
        display: none;
    }
    
    /* index.html */
    .hero{
        height: 45rem;
    }
    .competitor-speed{
        padding-top: 2rem;
        padding-left: 5.5rem; 
        max-width: 60vw;
    }
    .interdish-speed{
        padding-left: 2rem;
    }
     
}
@media only screen and (min-width: 900px) and (max-width: 1009px) {
     /* Footer */
     .logo-and-address{
        width: 28vw;
    }
    .navbar-divider{
        display: none;
    }
    .newsletter{
        display: none;
    }

    /* index.html */
    .hero{
        height: 48rem;
    }
    .competitor-speed{
        padding-top: 2rem;
        padding-left: 5.5rem; 
        max-width: 60vw;
    }
    .interdish-speed{
        padding-left: 2rem;
    }
}
@media only screen and (min-width: 528px) and (max-width: 899px){
    /* Font sizes */
    .very-big{
        /* h1 */
        font-size: 3rem;
        font-weight: 700;
    }
    .small{
        /* <p> */
        font-size: 1rem;
    }
    
     /* Footer */
     footer{
        height: 24rem;
     }
     .logo-and-address{
        display: none;
    }
    .navbar-divider{
        display: none;
    }
    .newsletter{
        display: none;
    }

    /* index.html */

    .hero{
        height: 40rem;
    }
    .feature1{
        padding: 5rem 2rem;
        height: 23rem;
    }
    .competitor-speed{
        display: none;
    }
    .interdish-speed{
        display: none;
    }

    /* aboutus.html */
    .about-landing{
        flex-basis: 1rem;
        margin: 4rem 1.4rem;
    }
    .services{
        padding-left: 1rem;
    }

    /* contactus.html */
    .dividing-line{
        display: none;
    }

    /* products.html */
    .contact-landing{
        display: block;
    }
    .dividing-line-right{
        display: none;
    }
    .contact-divider{
        display: block;
    }
    .info-form{
        padding: 5rem 3rem;
    }
    .other-info{
        padding: 5rem 2rem;
    }
}
@media only screen and (min-width: 320px) and (max-width: 529px){
    /* Font sizes */
    .very-big{
        /* h1 */
        font-size: 2.3rem;
        font-weight: 700;
    }
    .small{
        /* <p> */
        font-size: 4vw;
    }
    /* html layout elements */
    .titlehead{
        height: 23rem;
    }
    .textblock{
        padding: 2rem 2rem 2rem;
    }
    /* footer */
    footer{
        height: 19rem;
    }
    .footer-info{
        display: block;
    }
    .logo-and-address{
        display: none;
    }
    .navbar-divider{
        display: none;
    }
    .newsletter{
        display: none;
    }
    .footer-nav{
        display: none;
    }
    .footer-nav ul{
        padding: 0;
        margin: 0;
    }
    .footer-nav-mobile{
        display: block;
        padding: 2rem 0 1rem;
    }
    .footer-nav-mobile ul{
        list-style-type: none;
    }
    .footer-nav-mobile li{
        padding: 0.15rem 0;
    }
    .copyright{
        padding: 1rem 0 0.1rem;
    }
    /*nav*/
    #nav{
        width: 100vw
    }
    /* main */
    main{
        max-width: 100vw;
    }
    /* index.html */
    .hero{
        height: 32rem;
    }
    .slogan{
        width: 64vw;
    }
    .feature1{
        height: 33rem;
    }
    .competitor-speed, .interdish-speed{
        display: none;
    }
    #profile-picture{
        height: 4rem;
        width: 4rem;
    }
    /* aboutus.html */
    .about-bg{
        height: 27rem;
    }
    .title{
        padding: 10rem 0;
    }
    .about-landing{
        flex-wrap: wrap;
        margin: 4rem 1.5rem;
    }
    .about-landing h3{
        font-size: 2rem;
        padding-bottom: 1rem;
    }
    .services{
        padding-left: 0;
    }
    .offerings{
        margin: 1rem 0 1rem 0;
    }
    /* contactus.html */
    .contact-bg h1 {
        padding: 10rem 2.1rem 1rem;
    }
    .contact-bg h3{
        display: none;
    }
    .contact-landing{
        flex-wrap: wrap;
    }
    .dividing-line-right{
        display: none;
    }
    .contact-divider{
        display: block;
    }
    .mobile-divider{
        padding: 2rem 0;
    }
    .info-form{
        padding: 5rem 1rem;
    }
    .other-info{
        padding: 1rem 1rem;
    }
    input[type=text]{
        width: 15rem;
        height: 1.5rem;
        margin-top: 0.4rem;
    }
    #inquiry{
        width: 19em;
    }
    #contact-comment{
        width: 19em;
    }
    /* products.html */
    .product-bg{
        padding: 3.5rem;  
        height: 23rem;
        padding-bottom: 2.5rem;
    }
    .product-bg h1{
        padding-top: 3.5rem;
        padding-bottom: 1rem;
    }
    .product-type-selectors{
        padding-top: 0;
    }
    #empty{
        height: 5rem;
    }
    .promo-text{
        margin: 0 0.4rem;
    }
    .offers{
        width: 11rem;
    }
    #business-offer p{
        margin: 0 1rem;
        padding-bottom: 2rem;
    }
}