body, html {
    scroll-behavior: smooth;
}

/*Extra Large Screens*/
@media screen and (min-width:1200px) {
    /* careers section */
    #careersHeader {
        min-height: 80vh;
        background: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.7)),url('Images/Careers/careers-title.jpg') no-repeat;
        background-size: cover;
        background-attachment: fixed;
        background-position: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: rgb(255, 255, 255);
        padding-top: 40px;
    }

    #careersHeader h1 {
        font-size:80px;
    }

    #careersHeader h3 {
        font-size:35px;
        font-weight: 400;
    }

    /* why choose algal */
    #whyChooseAlgal {
        background-color: white;
        width:80vw;
        padding-left: 10%;
        height:max-content;
        display:block;
    }

    #whyChooseAlgal h1 {
        margin-top: 50px;
        font-size: 40px;
        transform:translateX(-2.5vw);
    }

    .container {
        width:100%;
        display:grid;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 110px;
        margin-bottom: 40px;
    }

    .attribute {
        background-color:#0f0c2c ;
        color:white;
        border-radius: 10px;
        text-align: center;
    }

    .attribute i {
        padding-top: 25px;
    }

    .attribute p {
        padding:15px;
        font-size:18px;
        margin-bottom:20px;
        margin-top:20px;
    }

    /* innovate */
    #innovate {
        background-color: white;
        padding-left: 10%;
        width:80vw;
        height:max-content;
        display:block;
        margin-bottom: 50px;
    }

    #innovate h1 {
        margin-top: 50px;
        font-size: 40px;
        margin-bottom: 40px;
        transform: translateX(-2.5vw);
    }

    .horizontalGrid {
        width:100%;
        height:max-content;
        display: grid;
        grid-template-rows: auto;
        row-gap: 50px;
    }

    .gridItem {
        background-color: #0f0c2c;
        border-radius: 10px;
        display:flex;
        align-items: center;
    }

    .gridItem p {
        font-size: 18px;
        padding:10px;
        padding-top: 30px; padding-bottom: 30px;
        margin:0px;
        color:white;
    }

    .gridItem i {
        color:white;
        font-size:40px;
        padding:25px;
    }

    /*opportunities*/
    #opportunities {
        min-height: 300px;
        background: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.7)),url('Images/Careers/careers-pg.jpg') no-repeat;
        background-size: cover;
        background-attachment: fixed;
        background-position: center;
        color: rgb(255, 255, 255);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        
    }

    .opportunitiesText {
        width:80vw;
        padding-left:0px;
        padding-bottom: 20px;
    }

    .opportunitiesText h1 {
        padding-top: 50px;
        font-size: 40px;
        transform:translateX(-2.5vw);
        color:white;
    }
    .opportunitiesText h2 {
        font-size: 30px;
        margin-bottom:10px;
        transform:translateX(-2.5vw);
        color:white;
    }

    .opportunitiesText li {
        margin:20px;
        font-size: 20px;
        color:white;
        text-decoration: none;
    }


    .jobPosts {
        backdrop-filter: blur(0px);
        background-color:rgba(255, 255, 255, 0.4);
        border-radius: 12px;
        margin:80px;
        width:80vw;
        height:max-content;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color:white;
    }

    .jobPosts p {
        font-size: 40px;
        font-weight: 700;
        opacity:1;
        margin-bottom:25px;
        margin-top:25px;
    }

    .jobPosts a {
        font-size:25px;
        font-weight: 600;
        opacity:1;
        padding:5px;
        color:inherit;
        text-decoration: none;
    }

    .jobPosts a:hover {
        color:rgb(0, 0, 177);
    }

    /* Student */
    #student {
        min-height: 70vh;
        background: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.7)),url('Images/Careers/careers-student.jpg') no-repeat;
        background-size: cover;
        background-attachment: fixed;
        background-position: center;
        color: rgb(255, 255, 255);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .coop {
        width:80vw;
        padding-bottom: 20px;
    }

    .coop h1 {
        padding-top: 50px;
        font-size: 40px;
        transform:translateX(-2.5vw);
        color:white;
    }

    .coop li, .coop p {
        margin:20px;
        font-size: 20px;
    }
}

/*Large Screens*/
@media screen and (min-width:992px) and (max-width:1199px) {
    /* careers section */
    #careersHeader {
        min-height: 80vh;
        background: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.7)),url('Images/Careers/careers-title.jpg') no-repeat;
        background-size: cover;
        background-attachment: fixed;
        background-position: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: rgb(255, 255, 255);
        padding-top: 40px;
    }

    #careersHeader h1 {
        font-size:60px;
    }

    #careersHeader h3 {
        font-size:30px;
        font-weight: 400;
    }

    /* why choose algal */
    #whyChooseAlgal {
        background-color: white;
        width:80vw;
        padding-left: 10%;
        height:max-content;
        display:block;
    }

    #whyChooseAlgal h1 {
        margin-top: 50px;
        font-size: 30px;
        transform:translateX(-2.5vw);
    }

    .container {
        width:100%;
        display:grid;
        grid-template-rows: 1fr 1fr 1fr;
        row-gap: 40px;
        margin-bottom: 40px;
    }

    .attribute {
        background-color:#0f0c2c ;
        color:white;
        border-radius: 10px;
        text-align: center;
    }

    .attribute i {
        padding-top: 25px;
    }

    .attribute p {
        padding:15px;
        font-size:17px;
        margin-bottom:20px;
        margin-top:20px;
    }

    /* innovate */
    #innovate {
        background-color: white;
        padding-left: 10%;
        width:80vw;
        height:max-content;
        display:block;
        margin-bottom: 50px;
    }

    #innovate h1 {
        margin-top: 50px;
        font-size: 30px;
        margin-bottom: 40px;
        transform: translateX(-2.5vw);
    }

    .horizontalGrid {
        width:100%;
        height:max-content;
        display: grid;
        grid-template-rows: auto;
        row-gap: 50px;
    }

    .gridItem {
        background-color: #0f0c2c;
        border-radius: 10px;
        display:flex;
        align-items: center;
    }

    .gridItem p {
        font-size: 17px;
        padding:10px;
        padding-top: 30px; padding-bottom: 20px;
        margin:0px;
        color:white;
    }

    .gridItem i {
        color:white;
        font-size:40px;
        padding:25px;
    }

    /*opportunities*/
    #opportunities {
        min-height: 300px;
        background: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.7)),url('Images/Careers/careers-pg.jpg') no-repeat;
        background-size: cover;
        background-attachment: fixed;
        background-position: center;
        color: rgb(255, 255, 255);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        
    }

    .opportunitiesText {
        width:80vw;
        padding-left:0px;
        padding-bottom: 10px;
    }

    .opportunitiesText h1 {
        padding-top: 50px;
        font-size: 30px;
        transform:translateX(-2.5vw);
        color:white;
    }

    .opportunitiesText li {
        margin:20px;
        font-size: 17px;
        color:white;
        text-decoration: none;
    }


    .jobPosts {
        backdrop-filter: blur(0px);
        background-color:rgba(255, 255, 255, 0.4);
        border-radius: 12px;
        margin:60px;
        width:80vw;
        height:max-content;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color:white;
    }

    .jobPosts p {
        font-size: 30px;
        font-weight: 700;
        opacity:1;
        margin-bottom:25px;
        margin-top:25px;
    }

    .jobPosts a {
        font-size:20px;
        font-weight: 600;
        opacity:1;
        padding:5px;
        color:inherit;
        text-decoration: none;
    }

    .jobPosts a:hover {
        color:rgb(0, 0, 177);
    }

    /* Student */
    #student {
        min-height: 70vh;
        background: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.7)),url('Images/Careers/careers-student.jpg') no-repeat;
        background-size: cover;
        background-attachment: fixed;
        background-position: center;
        color: rgb(255, 255, 255);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .coop {
        width:80vw;
        padding-bottom: 20px;
    }

    .coop h1 {
        padding-top: 50px;
        font-size: 30px;
        transform:translateX(-2.5vw);
        color:white;
    }

    .coop li, .coop p {
        margin:20px;
        font-size: 17px;
    }
}

/*Medium Screens*/
@media screen and (min-width:768px) and (max-width:991px) {
    /* careers section */
    #careersHeader {
        min-height: 80vh;
        background: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.7)),url('Images/Careers/careers-title.jpg') no-repeat;
        background-size: cover;
        background-attachment: fixed;
        background-position: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: rgb(255, 255, 255);
        padding-top: 40px;
    }

    #careersHeader h1 {
        font-size:50px;
    }

    #careersHeader h3 {
        font-size:25px;
        font-weight: 400;
    }

    /* why choose algal */
    #whyChooseAlgal {
        background-color: white;
        width:80vw;
        padding-left: 10%;
        height:max-content;
        display:block;
    }

    #whyChooseAlgal h1 {
        margin-top: 50px;
        font-size: 25px;
        transform:translateX(-2.5vw);
    }

    .container {
        width:100%;
        display:grid;
        grid-template-rows: 1fr 1fr 1fr;
        row-gap: 40px;
        margin-bottom: 40px;
    }

    .attribute {
        background-color:#0f0c2c ;
        color:white;
        border-radius: 10px;
        text-align: center;
    }

    .attribute i {
        padding-top: 25px;
        font-size: 30px !important;
    }

    .attribute p {
        padding:15px;
        font-size:16px;
        margin-bottom:20px;
        margin-top:10px;
    }

    /* innovate */
    #innovate {
        background-color: white;
        padding-left: 10%;
        width:80vw;
        height:max-content;
        display:block;
        margin-bottom: 50px;
    }

    #innovate h1 {
        margin-top: 50px;
        font-size: 25px;
        margin-bottom: 40px;
        transform: translateX(-2.5vw);
    }

    .horizontalGrid {
        width:100%;
        height:max-content;
        display: grid;
        grid-template-rows: auto;
        row-gap: 50px;
    }

    .gridItem {
        background-color: #0f0c2c;
        border-radius: 10px;
        display:flex;
        align-items: center;
    }

    .gridItem p {
        font-size: 16px;
        padding:10px;
        padding-top: 20px; padding-bottom: 20px;
        margin:0px;
        color:white;
    }

    .gridItem i {
        color:white;
        font-size:30px;
        padding:25px;
    }

    /*opportunities*/
    #opportunities {
        min-height: 300px;
        background: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.7)),url('Images/Careers/careers-pg.jpg') no-repeat;
        background-size: cover;
        background-attachment: fixed;
        background-position: center;
        color: rgb(255, 255, 255);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        
    }

    .opportunitiesText {
        width:80vw;
        padding-left:0px;
        padding-bottom: 10px;
    }

    .opportunitiesText h1 {
        padding-top: 40px;
        font-size: 25px;
        transform:translateX(-2.5vw);
        color:white;
    }

    .opportunitiesText li {
        margin:20px;
        font-size: 16px;
        color:white;
        text-decoration: none;
    }


    .jobPosts {
        backdrop-filter: blur(0px);
        background-color:rgba(255, 255, 255, 0.4);
        border-radius: 12px;
        margin:40px;
        width:60vw;
        height:max-content;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color:white;
    }

    .jobPosts p {
        font-size: 25px;
        font-weight: 700;
        opacity:1;
        margin-bottom:18px;
        margin-top:18px;
    }

    .jobPosts a {
        font-size:16px;
        font-weight: 600;
        opacity:1;
        padding:5px;
        color:inherit;
        text-decoration: none;
    }

    .jobPosts a:hover {
        color:rgb(0, 0, 177);
    }

    /* Student */
    #student {
        min-height: 70vh;
        background: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.7)),url('Images/Careers/careers-student.jpg') no-repeat;
        background-size: cover;
        background-attachment: fixed;
        background-position: center;
        color: rgb(255, 255, 255);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .coop {
        width:80vw;
        padding-bottom: 20px;
    }

    .coop h1 {
        padding-top: 40px;
        font-size: 25px;
        transform:translateX(-2.5vw);
        color:white;
    }

    .coop li, .coop p {
        margin:20px;
        font-size: 16px;
    }
}

/*Small Screens*/
@media screen and (min-width:576px) and (max-width:767px) {
    /* careers section */
    #careersHeader {
        min-height: 80vh;
        background: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.7)),url('Images/Careers/careers-title.jpg') no-repeat;
        background-size: cover;
        background-attachment: fixed;
        background-position: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: rgb(255, 255, 255);
        padding-top: 40px;
    }

    #careersHeader h1 {
        font-size:40px;
    }

    #careersHeader h3 {
        font-size:20px;
        font-weight: 400;
    }

    /* why choose algal */
    #whyChooseAlgal {
        background-color: white;
        width:80vw;
        padding-left: 10%;
        height:max-content;
        display:block;
    }

    #whyChooseAlgal h1 {
        margin-top: 50px;
        font-size: 20px;
        transform:translateX(-2.5vw);
    }

    .container {
        width:100%;
        display:grid;
        grid-template-rows: 1fr 1fr 1fr;
        row-gap: 40px;
        margin-bottom: 40px;
    }

    .attribute {
        background-color:#0f0c2c ;
        color:white;
        border-radius: 10px;
        text-align: center;
    }

    .attribute i {
        padding-top: 25px;
        font-size: 25px !important;
    }

    .attribute p {
        padding:15px;
        font-size:15px;
        margin-bottom:20px;
        margin-top:10px;
    }

    /* innovate */
    #innovate {
        background-color: white;
        padding-left: 10%;
        width:80vw;
        height:max-content;
        display:block;
        margin-bottom: 50px;
    }

    #innovate h1 {
        margin-top: 50px;
        font-size: 20px;
        margin-bottom: 40px;
        transform: translateX(-2.5vw);
    }

    .horizontalGrid {
        width:100%;
        height:max-content;
        display: grid;
        grid-template-rows: auto;
        row-gap: 50px;
    }

    .gridItem {
        background-color: #0f0c2c;
        border-radius: 10px;
        display:flex;
        align-items: center;
    }

    .gridItem p {
        font-size: 15px;
        padding:10px;
        padding-top: 20px; padding-bottom: 20px;
        margin:0px;
        color:white;
    }

    .gridItem i {
        color:white;
        font-size:25px;
        padding:25px;
    }

    /*opportunities*/
    #opportunities {
        min-height: 300px;
        background: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.7)),url('Images/Careers/careers-pg.jpg') no-repeat;
        background-size: cover;
        background-attachment: fixed;
        background-position: center;
        color: rgb(255, 255, 255);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        
    }

    .opportunitiesText {
        width:80vw;
        padding-left:0px;
        padding-bottom: 10px;
    }

    .opportunitiesText h1 {
        padding-top: 40px;
        font-size: 20px;
        transform:translateX(-2.5vw);
        color:white;
    }

    .opportunitiesText li {
        margin:20px;
        font-size: 15px;
        color:white;
        text-decoration: none;
    }


    .jobPosts {
        backdrop-filter: blur(0px);
        background-color:rgba(255, 255, 255, 0.4);
        border-radius: 12px;
        margin:40px;
        width:60vw;
        height:max-content;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color:white;
    }

    .jobPosts p {
        font-size: 20px;
        font-weight: 700;
        opacity:1;
        margin-bottom:18px;
        margin-top:18px;
    }

    .jobPosts a {
        font-size:15px;
        font-weight: 600;
        opacity:1;
        padding:5px;
        color:inherit;
        text-decoration: none;
    }

    .jobPosts a:hover {
        color:rgb(0, 0, 177);
    }

    /* Student */
    #student {
        min-height: 70vh;
        background: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.7)),url('Images/Careers/careers-student.jpg') no-repeat;
        background-size: cover;
        background-attachment: fixed;
        background-position: center;
        color: rgb(255, 255, 255);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .coop {
        width:80vw;
        padding-bottom: 20px;
    }

    .coop h1 {
        padding-top: 40px;
        font-size: 20px;
        transform:translateX(-2.5vw);
        color:white;
    }

    .coop li, .coop p {
        margin:20px;
        font-size: 15px;
    }
}

/*Mobile Screens*/
@media screen and (max-width:575px) {
    /* careers section */
    #careersHeader {
        min-height: 80vh;
        background: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.7)),url('Images/Careers/careers-title.jpg') no-repeat;
        background-size: cover;
        background-attachment: fixed;
        background-position: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: rgb(255, 255, 255);
        padding-top: 40px;
    }

    #careersHeader h1 {
        font-size:30px;
    }

    #careersHeader h3 {
        font-size:18px;
        font-weight: 400;
    }

    /* why choose algal */
    #whyChooseAlgal {
        background-color: white;
        width:80vw;
        padding-left: 10%;
        height:max-content;
        display:block;
    }

    #whyChooseAlgal h1 {
        margin-top: 50px;
        font-size: 18px;
        transform:translateX(-2.5vw);
    }

    .container {
        width:100%;
        display:grid;
        grid-template-rows: 1fr 1fr 1fr;
        row-gap: 40px;
        margin-bottom: 40px;
    }

    .attribute {
        background-color:#0f0c2c ;
        color:white;
        border-radius: 10px;
        text-align: center;
    }

    .attribute i {
        padding-top: 25px;
        font-size: 25px !important;
    }

    .attribute p {
        padding:15px;
        font-size:15px;
        margin-bottom:20px;
        margin-top:10px;
    }

    /* innovate */
    #innovate {
        background-color: white;
        padding-left: 10%;
        width:80vw;
        height:max-content;
        display:block;
        margin-bottom: 50px;
    }

    #innovate h1 {
        margin-top: 50px;
        font-size: 18px;
        margin-bottom: 40px;
        transform: translateX(-2.5vw);
    }

    .horizontalGrid {
        width:100%;
        height:max-content;
        display: grid;
        grid-template-rows: auto;
        row-gap: 50px;
    }

    .gridItem {
        background-color: #0f0c2c;
        border-radius: 10px;
        display:flex;
        align-items: center;
    }

    .gridItem p {
        font-size: 15px;
        padding:10px;
        padding-top: 20px; padding-bottom: 20px;
        margin:0px;
        color:white;
    }

    .gridItem i {
        color:white;
        font-size:25px;
        padding:25px;
    }

    /*opportunities*/
    #opportunities {
        min-height: 300px;
        background: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.7)),url('Images/Careers/careers-pg.jpg') no-repeat;
        background-size: cover;
        background-attachment: fixed;
        background-position: center;
        color: rgb(255, 255, 255);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        
    }

    .opportunitiesText {
        width:80vw;
        padding-left:0px;
        padding-bottom: 10px;
    }

    .opportunitiesText h1 {
        padding-top: 40px;
        font-size: 18px;
        transform:translateX(-2.5vw);
        color:white;
    }

    .opportunitiesText li {
        margin:20px;
        font-size: 15px;
        color:white;
        text-decoration: none;
    }


    .jobPosts {
        backdrop-filter: blur(0px);
        background-color:rgba(255, 255, 255, 0.4);
        border-radius: 12px;
        margin:40px;
        width:60vw;
        height:max-content;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color:white;
    }

    .jobPosts p {
        font-size: 15px;
        font-weight: 700;
        opacity:1;
        padding:18px;
    }

    .jobPosts a {
        font-size:15px;
        font-weight: 600;
        opacity:1;
        padding:5px;
        color:inherit;
        text-decoration: none;
    }

    .jobPosts a:hover {
        color:rgb(0, 0, 177);
    }

    /* Student */
    #student {
        min-height: 70vh;
        background: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.7)),url('Images/Careers/careers-student.jpg') no-repeat;
        background-size: cover;
        background-attachment: fixed;
        background-position: center;
        color: rgb(255, 255, 255);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .coop {
        width:80vw;
        padding-bottom: 20px;
    }

    .coop h1 {
        padding-top: 40px;
        font-size: 18px;
        transform:translateX(-2.5vw);
        color:white;
    }

    .coop li, .coop p {
        margin:20px;
        font-size: 15px;
    }
}