html, body {
    box-sizing: border-box; 
    height: 100%;
    margin: 0px; 
    padding: 10px; 
    background-color: bisque; 
    text-align: center;
    font-size: 20px;
}

.sjahome{
  margin-left:-55rem;
  font-size:.7rem;
  }
  
.container {
    display: grid; 
    grid-gap: 5px;
    grid-template-columns: repeat(12,1fr);
    grid-template-rows: 40px auto auto auto 40px
                        auto auto auto auto auto auto auto auto auto auto 
                        auto auto auto auto auto auto auto auto auto auto  
                        auto auto auto auto auto auto 
                        ; 
    grid-template-areas: 
    "h h h h h h h h h h h h"  
    "h h h h h h h h h h h h"
    "a a . b b . c c . u u ."   
    ". . . . . . . . . . . ."
    "r r r r r r r r r r r r"
    "r r r r r r r r r r r r"
    "r r r r r r r r r r r r"
    ". . . . . . . . . . . ."
    "d d d . e e e e . z z z"
    "d d d . e e e e . z z z"
    "d d d . e e e e . z z z"
    "d d d w w w w w w z z z"
    "d d d w w w w w w z z z"
    ". . . . . . . . . . . ."
    ". . . j j j j j j . . ."
    ". . . j j j j j j . . ."
    ". . . . . . . . . . . ."
    "g g g . y y y y . i i i"
    "g g g . y y y y . i i i"
    "g g g . y y y y . i i i"
    "g g g . . . . . . i i i"
    "g g g v v v v v v i i i"
    "g g g v v v v v v i i i"
    ". . . . . . . . . . . ."
    "f f f f f f f f f f f f"
    "f f f f f f f f f f f f"
    "f f f f f f f f f f f f"
     ;
}
img {
    max-width: 100%;
    height: auto;
}
.header {
    grid-area: h;
    background-color: white; 
    text-align: center;
    font-size: 1.5rem;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: rgb(243, 38, 199);
    text-shadow: .5rem;
    padding-top: 2rem;
}
.rainbow {
    font-size: .75rem; 
    background-color: transparent;
    border-radius: .15rem; 
    color: black;
    cursor: pointer; 
    padding: .10rem .10rem;
}
.rainbow:hover {
    background-image: linear-gradient(90deg, rgb(147, 240, 25) 0%, rgb(14, 205, 93) 49%, rgb(236, 198, 74) 80%, rgb(249, 154, 12) 100%);
    animation: slide 3s linear infinite;
}
@keyframes slide {
    to {
        background-position: 7vw;
    }
}
#grad1 {
    height: 3.5rem;
    background: linear-gradient(to bottom right, rgb(73, 174, 194), rgb(38, 110, 197), rgb(48, 34, 170), rgb(129, 39, 189));
}

#links {
    color:rgb(243, 38, 199);
}
.title {
    color:rgb(129, 39, 189);
}
.information {
    color:rgb(73, 174, 194)
}
nav ul {
    display: flex; 
    list-style-type: none;
    justify-content: space-between;
}
nav ul li {
    padding-top: 1.5rem; 
    margin-right: 7em;
}
nav ul li a {
    text-decoration: none;
}
.contenta {
    grid-area: a;
    padding-top: 2rem; 
}
.contentb {
    grid-area: b;
    padding-top: 2rem; 
}
.contentc {
    grid-area: c; 
    padding-top: 2rem; 
}
.contentd {
    grid-area: d;
    padding-top: 2rem;
    background-color: white; 
    position: relative; 
}
.textd{
    text-align: center;
    position: relative;
    top: 0%;
    left: 0%;
    opacity: 0;
    transition: .5s ease; 
}
.texti{
    text-align: center;
    position: relative;
    opacity: 0;
    transition: .5s ease; 
}
.textg{
    text-align: center;
    position: relative;
    opacity: 0;
    transition: .5s ease; 
    height: auto;
    width: auto;
}
.textz{
    text-align: center;
    position: relative;
    opacity: 0;
    transition: .5s ease; 
    height: auto;
    width: auto;
}
.contentd:hover .textd {
    opacity: .7;
}
.contentd:hover .headingd {
    opacity: .2;
}
.contentz:hover .textz {
    opacity: .7;
}
.contentz:hover .headingz {
    opacity: .2;
}
.contentg:hover .textg {
    opacity: .7;
}
.contentg:hover .headingg {
    opacity: .2;
}
.contenti:hover .texti {
    opacity: .7;
}
.contenti:hover .headingi {
    opacity: .2;
}
.contente {
    grid-area: e;
    background-color: rgb(73, 174, 194);
}
.contenti {
    grid-area: i; 
    background-color: white;
    padding-top: 2rem;
}
.contentimexico {
    grid-area: i; 
    background-color: white;
    padding-top: 2rem;
}
.contentg {
    grid-area: g;
    background-color: white;
    padding-top: 2rem;
}
.contentgmexico {
    grid-area: g;
    background-color: white;
    padding-top: 2rem;
}
.contentz {
    grid-area: z;
    background-color: white;
    padding-top: 2rem;
}
.contentzmexico {
    grid-area: z;
    background-color: white;
    padding-top: 2rem;
}
.contenty { 
    grid-area: y;
    background-color: rgb(129, 39, 189);
}
.contentymexico{ 
    grid-area: y;
    background-color: rgb(129, 39, 189);
}
.contentj {
    grid-area: j;
    background-color: rgb(48, 34, 170);
    padding: 3rem 7rem 5rem 2rem;
    image-rendering: center;
}
.contentjmexico {
    grid-area: j;
    background-color: rgb(48, 34, 170);
    padding: 3rem 7rem 5rem 2rem;
    image-rendering: center;
}


#video {
    margin: 0rem;
    height: auto; 
}

.contentr {
    grid-area: r;
    background-color: rgb(126, 104, 147);
    background-image: url('../images/cabo.jpg');
    min-height: 15rem;
    background-attachment: fixed;
    background-position: center;
    background-size: cover; 
    background-repeat: no-repeat;
}
.contentrmexico {
    grid-area: r;
    background-color: rgb(126, 104, 147);
    background-image: url('../images/mexicoflag.png');
    min-height: 15rem;
    background-attachment: fixed;
    background-position: center;
    background-size: cover; 
    background-repeat: no-repeat;
}
.contentrhawaii {
    grid-area: r;
    background-color: rgb(126, 104, 147);
    background-image: url('../images/hawaiiflag.jfif');
    min-height: 15rem;
    background-attachment: fixed;
    background-position: center;
    background-size: cover; 
    background-repeat: no-repeat;
}
.contentrsouthcarolina {
    grid-area: r;
    background-color: rgb(126, 104, 147);
    background-image: url('../images/claiforniaflag.jfif');
    min-height: 15rem;
    background-attachment: fixed;
    background-position: center;
    background-size: cover; 
    background-repeat: no-repeat;
}
.contentrcalifornia {
    grid-area: r;
    background-color: rgb(126, 104, 147);
    background-image: url('../images/southcarolinaflag.png');
    min-height: 15rem;
    background-attachment: fixed;
    background-position: center;
    background-size: cover; 
    background-repeat: no-repeat;
}
.contentu {
    grid-area: u; 
    padding: 2rem;
} 
.contentv {
    grid-area: v;
    background-color: rgb(209, 139, 255);
    padding: 0 1rem;
}
.contentw {
    grid-area: w;
    background-color: rgb(38, 110, 197);
}
/* footer code */
.footer {
    grid-area: f; 
    text-align: center;
    font-size: 7rem;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: rgb(243, 38, 199);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-top: 2rem;
    font-size: .55cm; 
}
.footer > ul {
    margin-left: 0rem;
    list-style-type: none;
}
.footer > ul > a {
    text-decoration: none;
}
.footer > ul > a > li {
    color: rgb(34, 191, 34); 
}
.symbol > ul {
    padding-left: .3rem;
}
#grad2 {
    height: 3.5rem;
    background: linear-gradient(to bottom right, rgb(129, 39, 189), rgb(48, 34, 170), rgb(38, 110, 197), rgb(73, 174, 194));
}
form {
    padding: .2rem .4rem .3rem 20rem;
}

#snapchat {
    background-color: #fffc00;
    color: white;
    text-shadow: -1px 0 black, 0 lpx black, 1px 0 black, 0 -1px black; 
}
#instagram {
    background-color: #b04cb4;
    color: white;
}
#twitter {
    background-color: #55acee;
    color: white;
}
#facebook {
    background-color: #3B5998;
    color: white;
}
.navlinks {
    font-size: .7rem;
}
a:link{ 
    color:rgb(243, 38, 199);
}
a:visited {
    color:rgb(129, 39, 189);
}
a:hover{
    color:rgb(48, 34, 170)
}
a:active {
    color: rgb(38,110,197);
}
#copyright {
    text-align: center; 
}
/* subpage 2 */

table, th, tr {
  font-size:.75rem;
    border: dashed .25rem pink; 
    background-color: white; 
    text-align: center; 
    color:rgb(243, 38, 199);
}
caption {
    color: white; 
}
.contentjmexico {
    padding: .75rem .75rem .75rem .75rem;
}
.contentvmexico {
    grid-area: v;
    background-color: rgb(209, 139, 255);
    padding: 0 1rem;
    image-resolution: repeat;
}
#contentdmexico {
    grid-area: d;
    padding-top: 2rem;
    background-color: white; 
    position: relative; 
}
.headingdmexico {
    color: rgb(239, 91, 110); 
}
.textdmexico {
    text-align: center;
    position: relative;
    top: 0%;
    left: 0%;
    opacity: 0;
    transition: .5s ease;
    color: rgb(45, 172, 92);
}
#contentdmexico:hover .textdmexico {
    opacity: .7;
}
#contentgmexico {
    grid-area: g; 
    background-color: white;
    padding-top: 2rem;
}
.headinggmexico {
    color: rgb(239, 91, 110); 
}
.textgmexico {
    text-align: center;
    position: relative;
    top: 0%;
    left: 0%;
    opacity: 0;
    transition: .5s ease;
    color: rgb(45, 172, 92);
}
#contentgmexico:hover .textgmexico {
    opacity: .7;
}
#contentimexico {
    grid-area: i; 
    background-color: white;
    padding-top: 2rem;
}
.headingimexico {
    color: rgb(239, 91, 110); 
}
.textimexico {
    text-align: center;
    position: relative;
    top: 0%;
    left: 0%;
    opacity: 0;
    transition: .5s ease;
    color: rgb(45, 172, 92);
}
#contentimexico:hover .textimexico {
    opacity: .7;
}
#contentzmexico {
    grid-area: z; 
    background-color: white;
    padding-top: 2rem;
}
.headingzmexico {
    color: rgb(239, 91, 110); 
}
.textzmexico {
    text-align: center;
    position: relative;
    top: 0%;
    left: 0%;
    opacity: 0;
    transition: .5s ease;
    color: rgb(45, 172, 92);
}
#contentzmexico:hover .textzmexico {
    opacity: .7;
}
.contentvmexico {
    grid-area: v;
    background-color:rgb(34, 191, 34);
}
.contentjmexico {
    grid-area: j;
    background-color:rgb(45, 172, 92);
}
.contentwmexico {
    grid-area: w;
    background-color:rgb(185, 76, 76);
}
.contentemexico {
    grid-area: e;
    background-color:rgb(206, 81, 112);
}
.contentymexico {
    grid-area: y; 
    background-color:rgb(147, 240, 25);
}
/* subpage 3 */
.contentjhawaii {
    padding: .75rem .75rem .75rem .75rem;
}
.contentvhawaii {
    grid-area: v;
    background-color: rgb(209, 139, 255);
    padding: 0 1rem;
}
.contentdhawaii {
    grid-area: d;
    padding-top: 2rem;
    background-color: white; 
    position: relative; 
}
.headingdhawaii {
    color: rgb(73, 103, 202); 
}
.textdhawaii {
    text-align: center;
    position: relative;
    top: 0%;
    left: 0%;
    opacity: 0;
    transition: .5s ease;
    color: rgb(202, 93, 86);
}
.contentdhawaii:hover .textdhawaii {
    opacity: .7;
}
.contentghawaii {
    grid-area: g; 
    background-color: white;
    padding-top: 2rem;
}
.headingghawaii {
    color: rgb(73, 103, 202); 
}
.textghawaii {
    text-align: center;
    position: relative;
    top: 0%;
    left: 0%;
    opacity: 0;
    transition: .5s ease;
    color: rgb(202, 93, 86);
}
.contentghawaii:hover .textghawaii {
    opacity: .7;
}
.contentihawaii {
    grid-area: i; 
    background-color: white;
    padding-top: 2rem;
}
.headingihawaii {
    color: rgb(73, 103, 202); 
}
.textihawaii {
    text-align: center;
    position: relative;
    top: 0%;
    left: 0%;
    opacity: 0;
    transition: .5s ease;
    color: rgb(202, 93, 86);
}
.contentihawaii:hover .textihawaii {
    opacity: .7;
}
.contentzhawaii {
    grid-area: z; 
    background-color: white;
    padding-top: 2rem;
}
.headingzhawaii {
    color: rgb(73, 103, 202); 
}
.textzhawaii {
    text-align: center;
    position: relative;
    top: 0%;
    left: 0%;
    opacity: 0;
    transition: .5s ease;
    color: rgb(202, 93, 86);
}
.contentzhawaii:hover .textzhawaii {
    opacity: .7;
}
.contentvhawaii {
    grid-area: v;
    background-color:rgb(73, 101, 146);
}
.contentjhawaii {
    grid-area: j;
    background-color:rgb(205, 136, 205);
}
.contentwhawaii {
    grid-area: w;
    background-color:rgb(232, 131, 158);
}
.contentehawaii {
    grid-area: e;
    background-color:rgb(78, 193, 199);
}
.contentyhawaii {
    grid-area: y; 
    background-color:rgb(88, 70, 218);
}
/* subpage 4 */ 
.contentjsouthcarolina {
    padding: .75rem .75rem .75rem .75rem;
}
.contentvsouthcarolina {
    grid-area: v;
    background-color: rgb(118, 15, 188);
    padding: 0 1rem;
}
.contentdsouthcarolina {
    grid-area: d;
    padding-top: 2rem;
    background-color: white; 
    position: relative; 
}
.headingdsouthcarolina {
    color: rgb(203, 18, 145); 
}
.textdsouthcarolina {
    text-align: center;
    position: relative;
    top: 0%;
    left: 0%;
    opacity: 0;
    transition: .5s ease;
    color: rgb(130, 8, 252);
}
.contentdsouthcarolina:hover .textdsouthcarolina {
    opacity: .7;
}
.contentgsouthcarolina {
    grid-area: g; 
    background-color: white;
    padding-top: 2rem;
}
.headinggsouthcarolina {
    color: rgb(203, 18, 145); 
}
.textgsouthcarolina {
    text-align: center;
    position: relative;
    top: 0%;
    left: 0%;
    opacity: 0;
    transition: .5s ease;
    color: rgb(130, 8, 252);
}
.contentgsouthcarolina:hover .textgsouthcarolina {
    opacity: .7;
}
.contentisouthcarolina {
    grid-area: i; 
    background-color: white;
    padding-top: 2rem;
}
.headingisouthcarolina {
    color: rgb(203, 18, 145); 
}
.textisouthcarolina {
    text-align: center;
    position: relative;
    top: 0%;
    left: 0%;
    opacity: 0;
    transition: .5s ease;
    color: rgb(130, 8, 252);
}
.contentisouthcarolina:hover .textisouthcarolina {
    opacity: .7;
}
.contentzsouthcarolina {
    grid-area: z; 
    background-color: white;
    padding-top: 2rem;
}
.headingzsouthcarolina {
    color: rgb(203, 18, 145); 
}
.textzsouthcarolina {
    text-align: center;
    position: relative;
    top: 0%;
    left: 0%;
    opacity: 0;
    transition: .5s ease;
    color: rgb(130, 8, 252);
}
.contentzsouthcarolina:hover .textzsouthcarolina {
    opacity: .7;
}
.contentvsouthcarolina {
    grid-area: v;
    background-color:rgb(179, 153, 184);
}
.contentjsouthcarolina {
    grid-area: j;
    background-color:rgb(109, 75, 139);
}
.contentwsouthcarolina {
    grid-area: w;
    background-color:rgb(137, 10, 192);
}
.contentesouthcarolina {
    grid-area: e;
    background-color:rgb(142, 46, 174);
}
.contentysouthcarolina {
    grid-area: y; 
    background-color:rgb(88, 70, 218);
}
/* subpage 5 */
.contentjcalifornia {
    padding: .75rem .75rem .75rem .75rem;
}
.contentvcalifornia {
    grid-area: v;
    background-color: rgb(255, 255, 255);
    padding: 0 1rem;
}
.contentdcalifornia {
    grid-area: d;
    padding-top: 2rem;
    background-color: white; 
    position: relative; 
}
.headingdcalifornia {
    color: rgb(34, 41, 132); 
}
.textdcalifornia {
    text-align: center;
    position: relative;
    top: 0%;
    left: 0%;
    opacity: 0;
    transition: .5s ease;
    color: rgb(22, 243, 239);
}
.contentdcalifornia:hover .textdcalifornia {
    opacity: .7;
}
.contentgcalifornia {
    grid-area: g; 
    background-color: white;
    padding-top: 2rem;
}
.headinggcalifornia {
    color: rgb(34, 41, 132); 
}
.textgcalifornia {
    text-align: center;
    position: relative;
    top: 0%;
    left: 0%;
    opacity: 0;
    transition: .5s ease;
    color: rgb(22, 243, 239);
}
.contentgcalifornia:hover .textgcalifornia {
    opacity: .7;
}
.contenticalifornia {
    grid-area: i; 
    background-color: white;
    padding-top: 2rem;
}
.headingicalifornia {
    color: rgb(34, 41, 132); 
}
.texticalifornia {
    text-align: center;
    position: relative;
    top: 0%;
    left: 0%;
    opacity: 0;
    transition: .5s ease;
    color: rgb(22, 243, 239);
}
.contenticalifornia:hover .texticalifornia {
    opacity: .7;
}
.contentzcalifornia {
    grid-area: z; 
    background-color: white;
    padding-top: 2rem;
}
.headingzcalifornia {
    color: rgb(34, 41, 132); 
}
.textzcalifornia {
    text-align: center;
    position: relative;
    top: 0%;
    left: 0%;
    opacity: 0;
    transition: .5s ease;
    color: rgb(22, 243, 239);
}
.contentzcalifornia:hover .textzcalifornia {
    opacity: .7;
}
.contentvcalifornia {
    grid-area: v;
    background-color:rgb(101, 214, 32);
}
.contentjcalifornia {
    grid-area: j;
    background-color:rgb(30, 131, 97);
}
.contentwcalifornia {
    grid-area: w;
    background-color:rgb(11, 114, 28);
}
.contentecalifornia {
    grid-area: e;
    background-color:rgb(23, 108, 99);
}
.contentycalifornia {
    grid-area: y; 
    background-color:rgb(91, 151, 38);
}