html {
    scroll-behavior: smooth;
}

body {
    font-family: "DM Sans", sans-serif;
    margin: 0;
    padding: 0;
}

/* Loading screen */
#loading {
    height: 100vh;
    width: 100%;
}

#loading p {
    display: block;
    text-align: center;
    justify-content: center;
    font-size: 5vw;
}

/* Logo */
header > a {
    height: 60%;
    margin: auto;
    margin-left: 3em;
}

header > a img{
    height: 100%
}

/* Header */
header {
    position: fixed;
    display: flex;
    height: 8vw;
    width: 100%;
    z-index: 5;
    background: transparent;
}

#header-bg {
    position: absolute;
    z-index: -1;
    height: 100%;
    width: 100%;
    background-color: aliceblue;
    opacity: 0%;
}

nav {
    width: 100%;
    margin: auto 0;
}

#nav-bar {
    display: flex;
    justify-content: center;
    padding: 0%;
   
}

#nav-bar div {
    display: flex;
    list-style: none;
}

#nav-bar a, #goals {
    font-size: 2vw;
    text-align: center;
    text-decoration: none;
    margin: 0% 5vw;
    height: 100%;
    color: black;
}

#goals {
    border: none;
    width: 6em;
    height: 100%;
    background: transparent;
    appearance: none;
    padding-left: 1.5em;
    cursor: pointer;
}

#goals option {
    text-align: left;
}

#hamburger {
    height: 60%;
    margin-left: auto;
    margin-right: 1em;
    visibility: hidden;
}

header img {
    visibility: visible;
}

.active {
    text-decoration: underline;
    text-decoration-style: double;
    text-underline-offset: 0.5em;
}

/* Home Page Title Section */
#title-section {
    height: 100vh;
    overflow: hidden;
}

#title-hue {
    position: relative;
    z-index: -1;
    height: 100%;
    width: 100%;
    opacity: 100%;
    background-color: rgb(111, 154, 140);
    top: -100%;
}

#title-section img{
    position: relative;
    z-index: 0;
    height: 100%;
    min-width: 100%;
}

#title-text {
    width: 100%;
    position: absolute;
    z-index: 1;
    display: block;
    text-align: center;
    justify-items: center;
    align-items: center;
    margin: auto;
    text-wrap: pretty;
    transform: translateY(32vh);
}

#title-text h1{
    font-size: 10vw;
    padding: 0% 10%;
    margin: 0;
    text-shadow: 0px 0px 20px rgba(228, 247, 253, 0.795);
}

#title-text h2 {
    font-size: 2vw;
    padding: 0% 10%;
    text-shadow: 0px 0px 20px rgba(228, 247, 253, 0.795);
}

/* Home Page Take Action Section */
#take-action div{
    display: grid;
    margin: 4vw;
    justify-items: center;
    overflow: hidden;
    grid-template-areas:"LoL2 LoL2 CA2 LoL1 LoL1"
                        "LoL2 LoL2 title1 LoL1 LoL1"
                        "LoL2 LoL2 title2 . SCaC2"
                        "SCaC1 SCaC1 CA1 CA1 SCaC2";
}

#take-action h2:nth-child(1), #take-action h2:nth-child(2) {
    text-align: center;
    margin: auto;
    font-size:6vw;
}

#take-action h2:nth-child(1) {
    margin-top: 30%;
    grid-area: title1;
}

#take-action h2:nth-child(2) {
    margin-bottom: 10%;
    grid-area: title2;
    
}

#CA_image1 {
    grid-area: CA1;
    width: 30vw;
    margin-top: 10%;
    border-radius: 10%;
}

#CA_image2 {
    grid-area: CA2;
    width: 24vw;
    border-radius: 10%;
}

#LoL_image1 {
    grid-area: LoL1;
    width: 26vw;
    margin: auto;
    border-radius: 10%;
}

#LoL_image2 {
    grid-area: LoL2;
    width: 20vw;
    margin-top: 10%;
    margin-left: 5%;
    border-radius: 10%;
}

#SCaC_image1 {
    grid-area: SCaC1;
    width: 25vw;
    border-radius: 10%;
}

#SCaC_image2 {
    grid-area: SCaC2;
    width: 20vw;
    margin-top: 5%;
    border-radius: 10%;
}

#take-action div:nth-child(2) {
    margin: auto;
    padding: 6vw 0;
    display: flex;
    flex-direction: row;
    background-color: #696d6d;
    color: white;
}

#take-action div div {
    display: flex;
    flex-direction: column;
}

#take-action div h3 {
    text-align: center;
    font-size: 6vw;
    margin: auto auto 0 auto;
}

#take-action h4 {
    margin: 0 4vw auto 4vw;
    text-align: center;
    font-size: 1.2vw;
}

#take-action video {
    margin: auto;
    margin-right: 4vw;
    width: 42vw;
    border-radius: 10%;
}

/* Home Page Cards Section */
#cards {
    display: flex;
    margin: 2vw;
    padding: 2vw 0;
}

#cards_title {
    z-index: 3;
    display: flex;
    width: 42vw;
    height: 42vw;
    background-color: #080808;
    color: white;
    border-radius: 0 15% 0 15%;
}

#cards_title h2 {
    text-align: center;
    margin: auto;
    margin-left: 2vw;
    font-size: 12vw;
    line-height: 100%;
}

#cards_title h2:nth-child(2) {
    text-align: center;
    margin: auto;
    margin-right: 2vw;
    font-size: 20vw;
}

.card {
    position: relative;
    left: 0;
    display: grid;
    grid-template-rows: 1fr 2fr;
    width: 42vw;
    height: 42vw;
    margin-left: -23vw;
    padding-right: 1vw;
    overflow: hidden;
    border-radius: 0 15% 0 15%;
}

.card img {
    width: 12vw;
    justify-content: center;
    margin: 2vw 2vw 0 2vw;
    border-radius: 20%;
}

.card h2 {
    font-size: 5vw;
    text-align: center;
    margin: auto;
    writing-mode: vertical-lr;
    text-orientation:sideways;
}

.card h3 {
    font-size: 1.7vw;
    text-align: left;
    padding: 10%;
}

#card1 {
    z-index: 2;
    grid-template-areas: "cardpara1 cardimage1"
                           "cardpara1 cardgoal1";
    background-color: #f0d786;
}

#card1 h2 {
    grid-area: cardgoal1;
}

#card1 h3 {
    grid-area: cardpara1;
}

#card1 img {
    grid-area: cardimage1;
}

#card2 {
    z-index: 1;
    grid-template-areas: "cardpara2 cardimage2"
                           "cardpara2 cardgoal2";
    background-color: #a5dce7;
}

#card2 h2 {
    grid-area: cardgoal2;
}

#card2 h3 {
    grid-area: cardpara2;
}

#card2 img {
    grid-area: cardimage2;
}

#card3 {
    z-index: 0;
    grid-template-areas: "cardpara3 cardimage3"
                           "cardpara3 cardgoal3";
    background-color: #8ab98c;
}

#card3 h2 {
    grid-area: cardgoal3;
}

#card3 h3 {
    grid-area: cardpara3;
}

#card3 img {
    grid-area: cardimage3;
}

/* Form Section */
#title {
    height: fit-content;
    transform: translateY(8vh);
    margin-top: 4vw;
}
#form-title, #form-subtitle {
    text-align: center;
    margin: 0px;
}

#form-title {
    font-size: 6vw;
}

#form-subtitle {
    margin-bottom: 10px;
    font-size: 1.5vw;
}

hr {
    display: block;
    border: 0;
    border-top: 0.75vw solid black;
    margin: 0 10vw;
    margin-top: 6.5vw;
    margin-bottom: 6vw;
    grid-row: 2;
    grid-column: 3;
}

.input {
    margin: auto;
    margin-top: 1vw;
    font-size: 1.5vw;
    display: grid;
    width: 95%;
    grid-template-columns: 1fr 8fr 0.1fr;
    border-radius: 20%;
}

.input label {
    grid-column: 1;
    grid-row: 1;
}

.input input {
    grid-column: 2;
    grid-row: 1;
}

.input span {
    grid-column: 3;
}

.input p {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0px;
    font-size: 1vw;
}

#main {
    display: grid;
    grid-template-columns: 10fr 17.5fr 45fr 17.5fr 10fr;
}

#title {
    grid-column: 1 / 6;
    grid-row: 1;
}

#contactform {
    grid-column: 2 / 5;
    grid-row: 3;
}

fieldset {
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 10px;
    border-width: 4px;
    border: solid;
    background-color: #C8E6FF;
}

#radio-input {
    grid-column: 1 / 4;
    display: grid;
    margin: 1vw;
    border: 2px #000 solid;
    border-radius: 2px;
    background-color: lightblue;
    grid-template-columns: 0.5fr 9.5fr;
    padding: 2vw;
    font-size: 1.125vw;
}

#radio-input p {
    grid-column: 1 / 4;
    grid-row: 1;
    color: black;
    font-size: 1.5vw;
}

#radio-input label, #radio-input input {
    margin: 0.5vw;
}

.goal-label {
    margin: auto 0;
    align-items: center;
    display: flex;
}

#goal-11-label {
    grid-column: 2;
    grid-row: 2;
}
#goal-11 {
    grid-column: 1;
    grid-row: 2;
    height: 2.5vw;
}

#goal-13-label {
    grid-column: 2;
    grid-row: 3;
}
#goal-13 {
    grid-column: 1;
    grid-row: 3;
    height: 2.5vw;
}

#goal-15-label {
    grid-column: 2;
    grid-row: 4;
}
#goal-15 {
    grid-column: 1;
    grid-row: 4;
    height: 2.5vw;
}

#goal-other-label {
    grid-column: 2;
    grid-row: 5;
}

#goal-other {
    grid-column: 1;
    grid-row: 5;
    height: 2.5vw;
}

#other-text {
    grid-column: 1 / 3;
    grid-row: 6;
    height: 10vw;
    margin: 0.5vw;
}

#submit-button {
    grid-column: 1 / 4;
    grid-row: 5;
    margin: auto;
    margin-top: 10px;
    width: 20%;
    padding: 1vw 0;
    margin-bottom: 5px;
}

#message {
    grid-column: 1 / 4;
    grid-row: 4;
    margin: 1vw;
}

#comments-label {
    grid-column: 1 / 4;
    grid-row: 2;
    margin-bottom: 10px;
}

#comments-text {
    grid-column: 1 / 4;
    grid-row: 3;
}

/* Goals page CSS */
#goal-title-section {
    height: 100vh;
    overflow: hidden;
}

#goal-title-section img {
    opacity: 40%;
    width: 100%;
    overflow: hidden;
}

#goal-title-section div{
    background-color: #cdb461;
    opacity: 80%;
    margin: auto;
}

#definition {
    margin: 2vw;
}

#definition div{
    display: grid;
    grid-template-areas: "img1 goal_text img2";
}

.goal_img1 {
    grid-area: img1;
    width: 25vw;
    border-radius: 20px;
}

.goal_img2 {
    grid-area: img2;
    width: 25vw;
    border-radius: 20px;
}

#definition div h3 {
    grid-area: goal_text;
    font-size: 1.5vw;
    margin: 2vw;
}

#importance {
    background-color: black;
    padding: 2vw;
    margin-bottom: 2vw;
    display: flex;
}

#importance div {
    margin: 2vw;
}

#importance h2, #importance h3 {
    color: white;
}

#importance h2 {
    font-size: 4vw;
}

#importance h3 {
    font-size: 1.5vw;
}

.importance_img {
    width: 25vw;
}

/* Team Page Title Area */
#team-title-section {
    min-height: 100vh;
    margin: auto;
    vertical-align: auto;
}

#title-team {
    padding-bottom: 1vw;
    transform: translateY(8vh);
    text-align: center;
    font-size: 80px;
}

#team-members {
    display: flex;
}

.team-member {
    width: 25vw;
    margin: 3vw;
    cursor: pointer;
}

.team-member img {
    width: 100%;
    border: 2px;
    border-radius: 20px;
    border-style: solid;
    border-color: black;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.team-member p {
    display: block;
    text-align: center;
    font-size: 2vw;
}

#team-members {
    margin: auto;
    width: fit-content;
}

/* Team Page Member Details */
.member-details {
    width: 100%;
    background-color: rgb(0, 0, 0);
    display: grid;
    margin-bottom: 2vw;
    grid-template-areas: "picture name"
                         "picture subtitle"
                         "picture about-text"
                         "contributions contributions"
                         "responsibilities responsibilities";
}

#member-pic {
    grid-area: picture;
    margin: 4vw;
    margin-right: 0;
    border: 2px;
    border-radius: 5vw;
    border-style: solid;
    border-color: white;
    width: 25vw;
}

#name-member {
    grid-area: name;
    font-size: 6vw;
    overflow: auto;
    margin: 4vw 4vw 0 4vw;
    color: white;
}

.about-member-section {
    display: inline-block;
    margin: 0 4vw 0 4vw;
}

#about-member {
    grid-area: subtitle;
    font-size: 2.5vw;
    color: white;
}

#about-paragraph {
    grid-area: about-text;
    font-size: 1.7vw;
    color: white;
}

#contributions-section {
    grid-area: contributions;
    width: 100%;
    display: grid;
    margin-bottom: 2vw;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2vw;
    grid-template-areas: "one two two"
                         "one cont-text three"
                         "four four three";
}

#contribution-1, #contribution-2, #contribution-3, #contribution-4 {
    margin: auto;
    border-radius: 20px;
    border-radius: 5vw;
    border-style: solid;
    border-color: white;
}

#contribution-1 {
    grid-area: one;
    width: 25vw;
}

#contribution-2 {
    grid-area: two;
    width: 45vw;
}

#contribution-3 {
    grid-area: three;
    width: 25vw;
}

#contribution-4 {
    grid-area: four;
    width: 35vw;
}

#contributions-section h2 {
    grid-area: cont-text;
    font-size: 6vw;
    text-align: center;
    margin: 4vw auto;
    color: white;
}

#responsibilities {
    grid-area: responsibilities;
    display: flex;
    flex-direction: column;
    width: 80%;
    margin: 4vw auto;
    background-color: #cdb461;
    padding: 2vw;
    border-radius: 20px;
}

#responsibilities-subtitle {
    font-size: 6vw;
    margin: 2vw auto;
    color: white;
}

#responsibilities-text {
    font-size: 1.5vw;
    color: white;
}

/* Footer */
footer {
    display: grid;
    grid-template-columns: 1fr 11fr;
    grid-template-areas:"logo navigations"
                        "hamb-details hamb-details"
                        "details details";
    background-color: #080808;
    padding: 2vw;
}

footer > a {
    grid-area: logo;
    width: 100%;
    margin: auto;
}

footer > a img {
    width: 80%;
    margin: auto;
}

#footer-nav {
    display: flex;
    flex-direction: row;
    grid-area: navigations;
    padding: 0;
    padding-right: 2vw;
    margin: 0;
}

#footer-nav div {
    padding-right: 5vw;
}

#footer-nav li {
    font-size: 1vw;
    list-style: none;
    text-align: left;
    padding: 0.5vw;
}

#footer-nav a {
    text-decoration: none;
    color: whitesmoke;
}

#hamb-details {
   grid-area: hamb-details; 
   width: 100%;
   font-size: 1vw;
   color: whitesmoke;
   padding: 2vw 0 2vw 1vw;
}

footer > div {
    grid-area: details;
    display: flex;
    flex-direction: row;
    margin: auto;
    margin-top: 0;
}

footer > div p {
    font-size: 1vw;
    padding: 0 1vw;
    color: whitesmoke;
}

@media only screen and (max-width:680px) {
    /* Navigation */
    header {
        height: 16vw;
    }
    
    .showNav {
        width: 0%;
        overflow: hidden;
    }

    header nav {
        width: 100%;
        transform: translate(-30%, 0);
    }

    #nav-bar {
        justify-content: left;
        margin: auto;
        padding-left: 5%;
    }

    #nav-bar div {
        display: flex;
        flex-direction: column;
        text-align: left;
        padding: auto;
    }

    #nav-bar li {
        padding-bottom: 0em;
    }

    #nav-bar a, #goals {
        font-size: 2.5vw;
    }

    #goals {
        padding-left: 0;
    }

    #hamburger {
        visibility: visible;
        height: 50%;
    }

    header img {
       visibility: hidden; 
    }

    .active {
        text-decoration-style: solid;
        text-underline-offset: 0.3em;
    }

    /* Home Page Title Section */
    #title-text {
        transform: translateY(20vh);
    }
    #title-text h1 {
        font-size: 16vw;
        line-height: 100%;
    }

    #title-text h2 {
        font-size: 3vw;
    }

    /* Home Page Take Action Section */
    #take-action div{
        gap: 2vw;
        grid-template-areas:"LoL2 CA2 CA2"
                            "LoL2 title1 SCaC2"
                            "LoL2 title2 SCaC2"
                            ". title2 SCaC2"
                            "CA1 CA1 SCaC2";
    }

    #take-action h2:nth-child(1), #take-action h2:nth-child(2) {
        font-size: 7vw;
        margin: auto;
        padding: 0;
    }

    #LoL_image1 {
        display: none;
    }

    #SCaC_image1 {
        display: none;
    }

    #LoL_image2 {
        width: 25vw;
    }

    #CA_image1 {
        width: 45vw;
        margin: 0;
    }

    #CA_image2 {
        width: 35vw;
    }

    #SCaC_image2 {
        width: 25vw;
    }

    #take-action div:nth-child(2) {
        flex-direction: column;
        margin: 0 4vw;
        border-radius: 10%;
    }

    #take-action div h3 {
        font-size: 8vw;
    }

    #take-action div h4 {
        font-size: 2vw;
        margin: 0 5%;
    }

    #take-action video {
        width: 65%;
        margin: auto;
    }

    #cards_title, .card {
        height: 60vw;
    }

    #cards_title img, .card img {
       margin-top: 4vw;
    }

    .card h3 {
        font-size: 2.1vw;
    }

    /* Form Section */
    #main {
        display: block;
    }
    #form-title {
        font-size: 15vw;
    }
    #form-subtitle {
        font-size: 5vw;
    }
    hr {
        margin-top: 11vw;
    }
    fieldset {
        padding: 0;
    }
    .input {
        grid-template-columns: 3fr 6fr 0.1fr;
    }
    .input label {
        font-size: 4vw;
    }
    #radio-input input {
        border: 0px;
        width: 100%;
        height: 2em;
    }
    #radio-input p {
        font-size: 4vw;
        text-align: center;
    }
    #submit-button {
        font-size: 4vw;
        width: 40%;
    }

    /* Team Section */
    #title-team {
        font-size: 12vw;
        margin: 10vw auto;
        line-height: 100%;
    }

    #team-members {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "Matthew Lola"
                             "Aven Aven";
    }

    #matthew {
        grid-area: Matthew;
    }

    #lola {
        grid-area: Lola;
    }

    #aven {
        grid-area: Aven;
        margin: auto;
    }

    .team-member {
        width: 35vw;
        margin: 2vw;
    }

    .team-member img {
        width: 95%;
    }

    .member-details {
        grid-template-areas: "picture subtitle"
                             "picture about-text"
                             "name about-text"
                             "contributions contributions"
                             "responsibilities responsibilities";
    }

    #member-pic {
        width: 25vw;
        margin: 4vw 2vw 0 4vw;
    }

    #name-member {
        width: 25vw;
        overflow: auto;
        font-size: 4vw;
        margin: 2vw 2vw 4vw 4vw;
        text-align: center;
    }

    #about-member {
        font-size: 7vw;
        margin: 4vw 2vw 2vw 0;
    }

    #about-paragraph {
        font-size: 2vw;
        margin: 0 2vw 2vw 0;
    }

    #contributions-section h2 {
        font-size: 6vw;
    }

    /* Footer */
    footer > a img {
        width: 90%;
    }

    #footer-nav li {
        font-size: 2.5vw;
    }

    #hamb-details, footer > div p {
        font-size: 2vw;
    }
}