html, body{
    box-sizing: border-box;
    height: 100%;
    margin: 0rem;
    padding: .2rem;
    background-color:rgb(206, 207, 232);
}

.container{
    justify-content: center;
    height:100%;
    display: grid;
    grid-gap: 5px;
    border: bold 2px;
    grid-template-columns: repeat(12,1fr);
    grid-template-rows: 40px 40px 40px 40px 40px 
    100px 100px 100px 100px 100px 
    100px 100px 100px 100px 100px 
    100px 100px 100px 100px 100px
    100px 100px 100px 100px 100px 
    100px 100px 100px 100px 100px
    100px 100px 100px 100px 100px 
    100px 100px 100px 100px 100px 
    100px 100px 100px 100px 100px
    100px 100px 100px 100px 100px 
    100px 100px 100px 100px 100px
    100px 100px 100px 100px 100px 
    100px 100px 100px 100px 100px;
    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"
    "m m m m m m m m m m m m"
    "c c c c c c c c s s s s"
    "c c c c c c c c s s s s"
    "r r r r r r r r s s s s"
    ". . . . . . . . s s s s"
    ". . . . . . . . . . . ."
    ". . y y y y y y y . . ."
    ". . y y y y y y y . . ."
    ". . y y y y y y y . . ."
    ". . y y y y y y y . . ."
    ". . . . . . . . . . . ."
    "z z z z z z z z . . . ."
    "z z z z z z z z . x x x"
    "z z z z z z z z . x x x"
    "z z z z z z z z . x x x"
    ". . . . . . . . . . . ."
    "e e e e e e e e e e e e"
    "e e e e e e e e e e e e"
    "e e e e e e e e e e e e"
    "e e e e e e e e e e e e"
    "e e e e e e e e e e e e"
    "e e e e e e e e e e e e"
    ". . . . . . . . . . . ."
    "t t t . . . . . . . . ."
    "t t t . . . . . . v v v"
    "t t t . . . . . . v v v"
    ". . . . . . . . . v v v"
    "i i i . . . . . . . . ."
    "i i i . . . . . . j j j"
    "i i i . . . . . . j j j"
    ". . . . . . . . . j j j"
    "k k k . . . . . . . . ."
    "k k k . . . . . . n n n"
    "k k k . . . . . . n n n"
    ". . . . . . . . . n n n"
    "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"
;}

.contentc{
    grid-area: c;
    background-color:rgb(223, 83, 186);
    border: 2px solid black;
    text-align: center;
    font-family: 'Times New Roman', Times, serif;
    font-size: 25px;
}
.parallax{
    grid-area: e;
    background-color:white;
    border: 2px solid black;
    background-image: url('../images/ocean.jpg');
    height:100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}
.para{
  height: 400px;
 background-color: lightblue;
 font-size: 36px;
    }

.contentf{
    grid-area: f;
    background-color:white;
    border: 2px solid black;
    background: linear-gradient(to bottom right,lightpink,lightblue ,rgb(218, 149, 239) );
    text-align: center;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 20px;
}
.contenth{
    grid-area: h;
    font-family: 'Times New Roman', Times, serif;
    border: 2px solid black;
    font-size:  4rem;
    color: rgb(189, 63, 179);
    text-align: center;
    -webkit-animation: glow 1s ease-in-out infinite alternate;
    -moz-animation: glow 1s ease-in-out infinite alternate;
    animation: glow 1s ease-in-out infinite alternate;
  }
@-webkit-keyframes glow {
    from {
      text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
    }
    to {
      text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
    }
}
.contenti{
    grid-area: i;
    background-color:white;
    border: 2px solid black;
}
.contentj{
    grid-area: j;
    background-color:white;
    border: 2px solid black;
}
.contentk{
    grid-area: k;
    background-color:white;
    border: 2px solid black;
}

.contentm{
    grid-area: m;
    background-color:rgb(159, 236, 236);
    border: 2px solid black;
    text-align: center;
    font-size: 20px;
    color: black;
   
}
.secondrowt:hover .image{
    opacity: 1;
}

.contentn{
    grid-area: n;
    background-color:white;
    border: 2px solid black;
}
.contento{
    text-align: center;
}
.contentr{
    grid-area: r;
    background-color:rgb(240, 167, 236);
    border: 2px solid black;
    color:black;
    text-align: center;
    font-size: 25px;
    
}
.contents{
    grid-area: s;
    background-color:rgb(239, 143, 218);
    border: 2px solid black;
    text-align: center;
    font-size: 30px;
}
.class1:hover{
    color: white;
    font-size: 20px;
}
.class2:hover{
    color: white;
    font-size: 20px;
}
.class3:hover{
    color: white;
    font-size: 20px;
}
.class4:hover{
    color: white;
    font-size: 20px;
}
nav ul li{
    padding-top: 1.5rem;
    margin-right: 7rem;
}
nav ul li a{
    text-decoration: none;
}
.dropdown .dropbtn{
    font-size: 1.5rem;
    width: 10rem;
    color: black;
    background-color: inherit;
    font-family: inherit;
    margin-bottom: 2rem;
    border:4px dashed rgb(159, 236, 236);
}
a:hover .dropdown:hover .dropbtn{
    background-color: grey;
}
.dropdown-content{
    display: none;
    position: absolute;
    width:10rem;
    background-color: #f1f1f1;
    font-size: 1rem;
}
.dropdown-content a {
    color: black;
    text-decoration: none;
    display: block;
    padding-left: .5rem;
    padding-bottom: 4rem;
}
.dropdown:hover .dropdown-content {
    background-color: rgb(159, 236, 236);
    display: block;
}
.secondrowt{
    grid-area: t;
    background-color:white;
    border: 2px solid black;
    background-image: url('../images/IMG-0535.jpg');
}

.contentv{
    grid-area: v;
    background-color:white;
     position: relative;
     color: black;
     border: 2px solid black;

}
.contentx{
    grid-area: x;
    background-color:rgb(32, 39, 122);
    border: .2rem solid black;
    font-size: 1.5rem;
    color:rgb(137, 206, 255);
    text-align: center ;    
}
.flip-box1 {
    grid-area: y;
    background-color: transparent;
    width: 100%;
    height: 100%;
    border: 1px solid #7aebe0;
  }
  
  .flip-box-inner1 {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  .flip-box1:hover .flip-box-inner1 {
    transform: rotateY(180deg);
  }
  
  .flip-box-front1, .flip-box-back1 {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden;
  }
  

  .flip-box-front1 {
    background-color: rgb(161, 245, 245);
    color: black;
    width: fit-content;

  }
  

  .flip-box-back1 {
    background-color: lightblue;
    color: rgb(255, 255, 255);
    transform: rotateY(180deg);
  }
.contentz{
    grid-area: z;
    background-color:white;
    border: 1rem solid black;
}
.img{
    width:8rem;
    height:8rem;
}

.fa{
    padding: .3rem;
    text-align: center;
    text-decoration: none;
    margin: 0.4rem 0.4rem;
}
.fa:hover{
    opacity: 0.7rem;
}
.fa-snapchat{
    background-color: #fffc00;
    color: black;
    
}
.fa-instagram{
    background-color: #b04cb4;
    color: white;
}
.fa-twitter{
    background-color: #55acee;
    color: white;
}
.fa-facebook{
    background-color: #3B5998;
    color: white;
}
.images{
    padding-left: 2%;
    padding-right: 2%;
    display: flex;
    align-items: center;
    background-repeat: no-repeat;
    background-size: cover;
    justify-content: center;
}
.index{
    text-align: left;
}

.form {
    border: .4rem solid #f1f1f1;
    padding: .2rem .4rem .3rem 20rem;
}
.boxa {
    padding: 0.2rem;
    background-color: #f1f1f1;
  }
  
.boxb {
    padding: 0.2rem;
    background-color: #f1f1f1;
  }
.boxc {
    padding: 0.2rem;
    background-color: #f1f1f1;
  }

.input[type=text], input[type=submit] {
    border: 0.4rem solid #ccc;
    width: 100px;
    padding: 0.2rem;
    margin: 0.2rem 0;
    display: inline-block;
    box-sizing: border-box;
    background-color: rgb(221, 175, 240);
}

.input[type=submit] {
    background-color: #04AA6D;
    color: white;
    border: 0.4rem solid purple;
} 
  
.input[type=submit]:hover {
    opacity: 0.8rem;
}
.container2{
    margin-left: .5rem;
    padding: .04rem;
    background-color: rgb(246, 179, 224);
    width:auto;
    height: auto;
}
.footer > ul{
    margin-left: 0px;
    list-style-type:none ;
}
.footer > ul > a{
    text-decoration: none;
}
.footer > ul > a > li{
    color: black;
}
.symbol ul{
    padding-left: .3rem;
}