html, body{
    box-sizing: border-box;
    height:100%;
    background-image:repeating-linear-gradient(#C2CAE8, #8380B6, #111D4A );
    background-repeat:repeat;
}

a:link{
    color:#111D4A;
}

a:visited{
    color:#111D4A;
}

a:hover{
    color:white;
}

a:active{
    color:white;
}





.container{
    box-sizing:border-box;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    text-align: center;
    border:2rem solid transparent;
    display:grid;
    grid-gap:0.3125rem;
    grid-template-columns: repeat(auto-fit, minmax(0,1fr));
    grid-template-rows: 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"
    "t t t t t t t t t t t t"
    ". l l l l l l l l l l ."
    "m m m m m m m m m m m m"
    "m m m m m m m m m m m m"
    "z z z z z z z z z z z z"
    "z z z z z z z z z z z z"
    "b b b b b b b b b b b b"
    ". a a c c r r p p o o ."
    "g g g g g g g g g g g g"
    "g g g g g g g g g g g g";
}

.header{
    grid-area:h;
    background-color: black;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    text-shadow: 0.125rem 0.125rem #8380B6;
    color:white;
     
}

.l{
    grid-area: c;
    transform:skew(10deg, 10deg);
    color:#C2CAE8;
}
.n{
    grid-area: a;
    transform:skew(-10deg, -10deg);
    color:#C2CAE8;
}
.c{
    grid-area: r;
    transform:skew(-10deg, -10deg);
    color:#C2CAE8;
}
.d{
    grid-area: p;
    transform:skew(10deg, 10deg);
    color:#C2CAE8;
}
.s{
    grid-area: o;
    transform:skew(-10deg, -10deg);
    color:#C2CAE8;
}


iframe{
    grid-area: b;
    margin:0 auto;
}


.title{
    grid-area:t;
    display:flex;
    justify-content:space-between;
    font-size:1.25rem;
}

.row2{
    grid-area: m;
    display:flex;
    justify-content:space-between;
    font-size:1.25rem;
}

.button1{
    grid-area:l;
    background-color:#8380B6;
    padding:1rem;
    margin-left:3rem;
   
}

.button2{
    grid-area:l;
    background-color:#8380B6;
    padding:1rem;
}

.button3{
    grid-area:l;
    background-color:#8380B6;
    padding:1rem;
    margin-left:-1.5rem;
}

.button4{
    grid-area:l;
    background-color:#8380B6;
    padding: 1rem;
    margin-right:-1rem;
    
}
/* 75x100 */
.button5{
    grid-area:l;
    background-color:#8380B6;
    padding:1rem;
    margin-right:2.5rem;
   
}


img{
    max-width:100%;
    height:auto;
}


.image_home{
    grid-area:m;
    display:flex;
    justify-content:space-around;
}

.image1{
    grid-area: m;
}

.image2{
    grid-area: m;
}


.image3{
    grid-area: m;
  
    
}

.image4{
    grid-area: m;
  
    
}

.image5{
    grid-area: m;
  
    
}

.years{
    grid-area: z;
    color:white;
}

table, th, td {
    border:.2rem solid #C2CAE8;
    color:#C2CAE8;

}

.parent span{
    color:purple;
    font-weight:bold;
}

.child {
    color:inherit;
    font-weight:inherit;
}


.footer{
    grid-area:g;
    display:flex;
    justify-content:space-between;
    border:.25rem solid #111D4A;
    background-color:black;
    color:white;
    align-items: center;
    
}

.social{
    display:flex;
    justify-content:space-between;
    padding-left:12rem;
}


.fa{
    padding:.3rem;
    text-align:center;
    text-decoration:none;
    margin:.04rem .04rem;
}

.fa:hover{
    opacity:07;
}

.fa-facebook{
    background: #8380B6;
    color:white
}

.fa-twitter{
    background:lightblue;
    color:white;
}

.fa-twitter{
    background:lightblue;
    color:white;
}

.fa-instagram{
    background:#8380B6;
    color:white;
}

.fa-snapchat-ghost{
    background:#fffc00;
    color:white;
    text-shadow:-3px 0 black,0 3px black, 3px 0 black, 0 -3px;
    
}
    



.title:hover{
    background-image:linear-gradient(90deg red, #8380B6,#C2CAE8,#111D4A);
    animation:slide 3s linear infinite;
}

@keyframes slide {
    to{
        background-position: 20vw;
    }
}
/*Beginning of Lando's special CSS styling*/

.landobuttons{
    display:flex;
    align-items:center;
    justify-content:center;

}

.landobody{
    padding: 0.625rem;
}

.headerlando{
    
    grid-area: h;
    background-color: black;
    color: white;
    text-align:center;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-shadow: 0.125rem 0.125rem #8380B6;
    
}

.landofacts{
 
    background-color:black;
    color:aliceblue;
    text-align:left;
   
  
}

.textlando{
    text-align:center;
    font-size:1.2rem;
    padding:1rem;
    font-style:normal;
    color:#C2CAE8;
}


/*Beginning of Lewis's special CSS styling*/

.lewisbuttons{
    display:flex;
    align-items:center;
    justify-content:center;
   
}

.lewisbody{
    padding: 0.625rem;
    
}

.lewisheader{
    grid-area: h;
    background-color: black;
    color: white;
    text-align:center;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-shadow: 0.125rem 0.125rem #8380B6;

}

.image1lewis{
    grid-area:m;
}

.textlewis{
    grid-area:m;
    font-size:.9rem;
    padding:1rem;
    color:#C2CAE8;
    

}

.lewisfacts{
    grid-area:m;
    background-color:black;
    color:aliceblue;
    text-align: left;
    font-size: 1rem;
}

/*Beginning of Charles's special CSS styling*/

.chbuttons{
    display:flex;
    align-items:center;
    justify-content:center;
}

.chbody{
    padding: 0.625rem;
}

.headerch{
    grid-area: h;
    background-color: black;
    color: white;
    text-align:center;
    text-shadow: 0.125rem 0.125rem #8380B6;
}

.image1ch{
    grid-area: m;

}

.textch{
    grid-area:r;
   
}

.chfacts{
    grid-area:m;
    background-color:black;
    color:aliceblue;
    position:absolute;
    top:42%;
    left:84%;
    margin-right: 1%;
    margin-left:-1%;
    margin-bottom:1%;
    margin-top:1%;
    text-align: left;
}

/*Beginning of Daniel's special CSS styling*/

.drbuttons{
    display:flex;
    align-items:center;
    justify-content:center;
    width:62.5rem;

}

.drbody{
    padding: 0.625rem;
}

.headerdr{
    grid-area: h;
    background-color: black;
    color: white;
    text-align:center;
    text-shadow: 0.125rem 0.125rem #8380B6;
}





.drfacts{
    grid-area:m;
    background-color:black;
    color:aliceblue;
}

/*Beginning of Carlos's special CSS styling*/

.csbuttons{
    display:flex;
    align-items:center;
    justify-content:center;
    width:62.5;

}

.csbody{
    padding: 0.625rem;
}

.headercs{
    grid-area: h;
    background-color: black;
    color: white;
    text-align:center;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-shadow: 0.125rem 0.125rem #8380B6;

}

.image1cs{
    grid-area: m;
}

.textcs{
    grid-area:r;

}

.csfacts{
    grid-area:m;
    background-color:black;
    color:aliceblue;
    position:absolute;
    top:42%;
    left:84%;
    margin-right: 1%;
    margin-left:-1%;
    margin-bottom:1%;
    margin-top:1%;
    text-align: left;
}

.more{
    border: 0.25rem solid #111D4A;
    padding:0.063 0.313rem;
    display:inline-block;
   
}

@media only screen and (max-device-width:780px) {
.container{
    border:0rem solid transparent;
}

.header{
    font-size:.4rem;
    margin:0rem auto
}

h3{
    font-size:0rem;
}

.button1{
    grid-area: l;
    background-color: #8380B6;
    padding:0rem;
    margin-left:0rem;
}

.button2{
    grid-area: l;
    background-color: #8380B6;
    padding:1rem;
    margin-left:0rem;
}

.button4{
    grid-area:1;
    background-color: #8380B6;
    padding:1rem;
    margin-left:-2rem;
}

.button5{
    grid-area:1;
    background-color: #8380B6;
    padding:1rem;
    margin-right:0rem;
}

.footer{
    grid-area: g;
    font-size:.7rem;
}

.social{
    padding-left:0rem;
}
    

}