html,body{
    box-sizing: border-box;
    font-size: 24px;
    padding:0;
    height:100%;
}


/* this grid was coded completely wrong and the webpage would not run ....so I fixed the page */
.container{
    display:grid;
    grid-gap:.5rem;
    grid-template-columns: repeat(12,1fr);
    grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
    grid-template-areas:
      "t t t t t t t t t t t t"
      "m m m m m m m m m m m m"
      "h h h h h h h h h h h h"
      "a a a a a a a a a a a a"
      "r r r r r r r r r r r r"
      "z z z z z z z z z z z z"
      "b b b b b b b b b b b b"
      "c c c c c . . e e e e e"
      "i i i i i i i i i i i i"
      "i i i i i i i i i i i i"
      "j j j j j j j j j j j j"
      "k k k k k k k k k k k k"
      "l l l l l l l l l l l l"
      "n n n n n n n n n n n n"
      "o o o o o o o o o o o o"
      "p p p p p p p p p p p p"
      "f f f f f f f f f f f f";   
  }
  
  
.heading1{
    background-color:deeppink;
    color:rgb(73, 73, 73);
  }

    

.title{
    grid-area:t;
    background-color: rgb(0, 0, 0);
    font-size:2.5rem;
    text-align:center;
    color:rgb(255, 255, 255);
    border:0.2rem white solid;
    font-style: italic;
}
.heading1{
    background-color:rgb(255, 103, 129);
    color:rgb(73, 73, 73);
}
.navbar{
    background-image: url('../images/nav.jpg');
    grid-area:m;
    font-family: Arial, Helvetica, sans-serif;
    justify-content: space-evenly;
    background-repeat: repeat-y;
    background-position: left;
    text-transform: uppercase;
    background-color:lightblue;
    border: 0.2rem solid black;
   

}

nav ul{
    display: flex;
    justify-content:space-evenly;
    list-style-type: none;
    padding: 3rem 1rem;
}
nav ul li{
    margin-right: 0.2rem;
}
nav ul li a{
    text-decoration:wavy;
    color:black;
    font-weight:bolder;
}


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

.heading1{
    grid-area:h;
    color:black;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    
}
.contenta{
    grid-area:a;
    background-color:rgb(255, 103, 129);
    color:rgb(73, 73, 73);
}
.contentr{
    grid-area:r;
    background-color:pink;
    color:rgb(73, 73, 73);
}
.contentz{
    grid-area:z;
    background-color:rgb(255, 103, 129);
    color:rgb(73, 73, 73);
   
}
.contentb{
    grid-area:b;
    background-color:pink;
    color:rgb(73, 73, 73);
}


.contentc{
    grid-area:c;
    background-color:rgb(255, 103, 129);
    color:rgb(73, 73, 73);

}
.contente{
    grid-area:e;
    background-color: pink;
    color:rgb(73, 73, 73);
}
.contenti{
    grid-area:i;
    background-color: rgb(255, 103, 129);
    color:rgb(73, 73, 73);
}

.contentj{
    grid-area:j;
    background-color:pink;
    color:rgb(73, 73, 73);
}
.contentk{
    grid-area:k;
    background-color:rgb(255, 103, 129);
    color:rgb(73, 73, 73);
}
.contentl{
    grid-area:l;
    background-color:pink;
    color:rgb(73, 73, 73);
}
.contentn{
    grid-area:n;
    background-color:rgb(255, 103, 129);
    color:rgb(73, 73, 73);
}
.contento{
    grid-area:o;
    background-color: pink;
    color:rgb(73, 73, 73);
}
.contentp{
    grid-area:p;
    background-color:rgb(255, 103, 129);
    color:rgb(73, 73, 73);
}


.footer{
    grid-area:f;
    border:.2rem solid pink; 
    text-align:center;
    display:flex;
    justify-content: space-between;
    align-items:center;
    background-color:lightpink;
    background-position: right, left;
    color:deeppink;
    font-size:1rem;
    

}
.footer > ul{
    margin-left:0rem;
    list-style-type:none;
    display:flex;
    text-align:center;
}
.footer > ul > a{
    text-decoration:none;
}
.footer > ul > a > li{
    color:black;
}
.symbol ul{
    padding-left:3rem;
}
.fa{
    padding:.3rem;
    text-align:center;
    text-decoration:none;
    margin: .04rem .04rem;
}
.fa:hover{
    opacity:0.7;
}
.fa-facebook{
    background:#3B5998;
    color:white;
}
.fa-twitter{
    background:#55ACEE;
    color:white;
}
.fa-instagram{
    background:#125688;
    color:white;
}
.fa-snapchat-ghost{
    background:#fffc00;
    color:white;
    text-shadow: -0.063rem 0 black, 0 0.063 black, 0.063 0 black, 0 -0.063rem black;
}
.form{
    border:.04rem solid rgb(255, 249, 185);
}
.container2{
    padding:.04rem;
    background-color:pink;
}
input[text=type], input[type=submit]{
    width:100%;
    padding:.02rem;
    margin:.02rem 0;
    display:inline-block;
    border:.04rem solid white;
    box-sizing:border-box;
}
input[type=submit]{
    background-color:#c8a2c8;
    color:white;
    border:.04rem solid hotpink;
}
input[type=submit]:hover{
    opacity:0.8;
}
.black{
    color:black;
}
.shift{
    color:black;
    font-weight:900;
    padding-bottom:.5rem;
    align-content:center;
    padding-right:2.75rem;
}
.dropdown .dropbtn{
    font-size:0.5rem;
    width:5rem;
    color:black;
    font-family:inherit; 
    margin-bottom:0.2rem;
    border:0.2rem solid lightcoral; 
    background-color:rgb(255, 259, 185);
}

a:hover .dropdown:hover .dropbtn{
   background-color: gray;
}
.dropdown-content{
    display:none;
    position: absolute;
    width:4rem;
    background-color: #f9f9f9;
    font-size:.5rem;
}
.dropdown-content a{
    color:black;
    text-decoration:none;
    display:block;
    padding-left:.1rem;
    padding-bottom: .1rem;
}
.dropdown-content a:hover{
    background-color: #ddd;
}
.dropdown:hover .dropdown-content{
    display:block;
}
.parallax{
    background-image: url('../images/goldenretrieverp.jpg');
    height:100%;
    background-attachment:fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.para{
    height:400px;
    background-color:pink;
    font-size:xx-large;
}
table,th,td{
    border:1px wavy;
    color:rgb(252, 223, 228);
    background-color: rgb(255, 132, 153);
}
.labs{
    color:deeppink;
    font-style: italic;
}
.animation{
    min-height: 100%;
    position: relative;
    width:100%;
    display:flex;
    background-color:deeppink;
    justify-content: center;
    align-items: center;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    position: relative;
}
h1{
    font-size:150px;
    color:lightpink;
    transform: translateY(-600px);
    animation: 1.2s slideIn ease-in-out forwards 1s;
    z-index:10;
    opacity:0;
    position: relative;
}
h1::before{
    content: '';
    width:0;
    background-color: #c8a2c8;
    position: absolute;
    bottom:-10px;
    animation: 1s underline ease-in-out forwards 2s;
    mix-blend-mode: screen;

}
.overlay{
    position: absolute;
    width: 100%;
    top:0;
    bottom:0;
    opacity:0;
    left:0;
    right:0;
    background-color:#c8a2c8;
    transform: scale(.5);
    animation: .5s slideIn ease-in-out forwards, 1s skewBg ease-in-out;
}
@keyframes skewBg{
    0%{
        transform: scale(.5);
    }
    100%{
        transform:scale(1);
    }
}
@keyframes underline{
    100%{
        width:100%;
    }
}
@keyframes slideIn{
    100%{
        transform: translateY(0px);
        opacity: 1;
    }
}
h2{
    color:deeppink;
    font:xx-large;
}