:root{
    --green: #6abe45;
    --yellow: #f6eb13;
    --pink: #b8529e;
    --blue: #70cbdd;
    --black:#211f20;
}


nav, footer {
    background-color: var(--blue);
    text-align: center;
    padding: 1%;
    margin: 4%;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 1.25em;
    border-radius: 0.7em;
}

body{
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

html{
    background-color: var(--black);
}

h1, h2, p, table, .header3{
    color:white;
    font-family: "Trebuchet MS", sans-serif;
}

label{
    color:var(--black);
    font-family: "Trebuchet MS", sans-serif;
}

.p1{
    background: var(--green);
    color:var(--black);
    font-family: "Trebuchet MS", sans-serif;
    border-radius: 1em;
    padding: 5%;
    margin: 0.5%;
    width: 23em;
}

.p2{
    background: var(--yellow);
    color:var(--black);
    font-family: "Trebuchet MS", sans-serif;
    border-radius: 1em;
    padding: 5%;
    margin: 0.5%;
    width: 23em;
}

.p3{
    background: var(--pink);
    color:var(--black);
    font-family: "Trebuchet MS", sans-serif;
    border-radius: 1em;
    padding: 5%;
    margin: 0.5%;
    max-height: max-content;
    width: 23em;
}
.p4{
    background: var(--blue);
    color:var(--black);
    font-family: "Trebuchet MS", sans-serif;
    border-radius: 1em;
    padding: 5%;
    margin: 0.5%;
    width: 23em;
}



.grid{
    display:grid;
    grid-template-columns: auto auto;
    width: 80%;
    margin: auto;
}
.header1{
    grid-area:1/1/2/3;
    margin: auto;
    padding: 2%;
    text-align: center;
}

.header2{
    grid-area:1/1/2/3;
    text-align: center;

}

.text{
    grid-area:2/1/3/2;
    padding: 5%;
    margin: 3%;
    color:var(--black);
    vertical-align: middle;
}

.img_small{
    grid-area:2/2/3/3;
    padding: 10%;
    margin: 15% 5%;
    width: 100%;
    border: none;
}
.smaller{
    grid-area:2/2/3/3;
    padding: 10%;
    margin: 5%;
    width: 70%;

}

.small_cap{
    grid-area:2/1/3/3;
    padding: 5%;
    margin: 3%;
    color:var(--black);
    vertical-align: middle;
}


.big_video{
    grid-area:3/1/8/3;
    width: 100%;
    padding: 2%;
    border: none;
}

.sec1{
    grid-area:2/1/3/2;
}
.sec2{
    grid-area:2/2/3/3;
}
.sec3{
    grid-area:3/1/4/3;
}

#part1{
    grid-area:3/1/4/3;
}

#part2{
    grid-area:4/1/5/3;
}

#part3{
    grid-area:5/1/6/3;
}

.rounded_button{
    background-color: var(--blue);
    border-radius: 2em;
    color: var(--white);
    padding: 3% 5%;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.2em;
    border: none;
    width: 10em;
}

#subscribe{
    border: none;
    color: white;
    padding: 2% 15%;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.6em;
    background-color:red;

}

a{
    font-weight: bolder;
    color: var(--black);

}

.center{
    margin: auto;
    text-align: center;
}

textarea{
    width: 20em;
    height: 5em;
}


#area
{
    max-width: 100%; 
}

#submit
{
    max-width: 100%; 
}

.navText{
    display: inline-block;
    padding: 0.9em 0.6em;
    margin: auto;
    color: white;
    text-decoration-line: none;
    vertical-align: middle;
}

.activePage{
    color: var(--yellow);
    font-weight: bolder;
    text-decoration-line: none;
}

.logo_img{
    width: 15%;
    display: block;
    margin: auto;
}

.sub{
    font-size: 0.5em;
}

.white_text{
    color:white;
    font-family: "Trebuchet MS", sans-serif;

}


table{
    max-width: 100%;
    border: 0.5em var(--black);
    border-collapse: collapse;
    margin: auto auto auto auto;
    color:var(--black);
    padding: 10%;
  }
  tr{
    border: 0.2em var(--black);
    border-collapse: collapse;
  }
  th{
    border: 0.2em var(--black);
    border-collapse: collapse;
    font-size: 1.2em;
  }
  
  tr:nth-child(odd){
    background-color: var(--yellow);
  }
  tr:nth-child(even){
    background-color: var(--green);
  }
  
  tr:hover{
    background-color: var(--pink);
    color:white;
  }

  .fixed{
    height: 70%;
    width: 70%;
    margin: 10%;
  }

  .shorter{
    height: 35em;
  }

  #formP{
    margin: auto;
    width: 80%;
    padding: 5%;
  }

  h2{
    font-size: medium;
  }