* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    height: 100%;
}
body {
    background-color: black;
    height: 100%;
    color: white;
    min-width: 400px;
    min-height: 100vh;
    background-image: url(main.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow-x: hidden; 
    font-family: Arial, Helvetica, sans-serif ;
}
header {
    display: block;
    position: fixed;
    width: 100%;
    height: 60px;
    z-index: 700;
}
nav {
    width: 100%;
    height: 100%;
}
#navlist {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    list-style-type: none;
    backdrop-filter: blur(10px);
    box-shadow: 0px 0px 8px rgba(255, 255, 255, 0.345);
    padding-left: 8px;
    animation: navlist 9s ease;
}
@keyframes navlist{
    0% {transform: translateY(-100px); display: none;}
    10% {transform: translateY(-100px); display: none;}
    20% {transform: translateY(-100px); display: none;}
    30% {transform: translateY(-100px); display: flex;}
    40% {transform: translateY(-100px); display: flex;}
    50% {transform: translateY(-100px); display: flex;}
    60% {transform: translateY(-100px); display: flex;}
    70% {transform: translateY(-100px); display: flex;}
    80% {transform: translateY(-100px);  display: flex;}
    90% {transform: translateY(-100px);  display: flex;}
    100% {transform: translateY(0);  display: flex;}
}
#leftlogo1 {
    display: flex;
    justify-content: start;
    align-items: center;
    height: 50px;
    width: 50px;
    margin-left: 10px;
}
#leftlogo2 {
    display: flex;
    justify-content: start;
    align-items: center;
    height: 50px;
    width: 50px;
    margin-left: 10px;
    margin-right: auto;
}
.navi {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 90px;
    border-radius: 15px;
    margin-right: 20px;
}
.navi::before{    
    content: "";
    transition: 0.45s;
    background-color: aqua;
    inset: 0;
    position: absolute;
    height: 1.4px;
    scale: 0;
    top: 10px
}
.navi:hover::before{

    scale: 1;
}
#aboutli {
    width: 50px;
    position: relative;
}
#homeli {
    width: 50px;
    position: relative;
}
#locli{ 
    width: 70px;
    position: relative;
}
#lastnav {
    margin-right: 20px;
    position: relative;
}
#mikellogo{
    background-image: url(Mikel\ logo.png);
    background-size: 100% 100%;
    height: 50px;
    width: 50px;
    border-radius: 50px;
    text-indent: -99999px;
    cursor: default;
}
#cielologo{
    background-image: url(Cielo\ logo.png);
    background-size: 100% 100%;
    height: 50px;
    width: 50px;
    border-radius: 50px;
    text-indent: -99999px;
    cursor: default;
}
#mikellogo:hover, #cielologo:hover {
    filter: drop-shadow(0px 0px 10px aqua);
}
li a{
    text-decoration: none;
    color: white;
    font-size: clamp(10px, 3vw, 14px);
}

/* SECTION */

.box60 {
    height: 60px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.365);
}
#home {
    width: 100%;
    min-height: 100vh;
    background-color: rgba(0, 0, 0, 0.075);
    animation: home 10s ease-in;
}
@keyframes home {
    0% {background-color: black;}
    100% {background-color: rgba(0, 0, 0, 0.075);}
}
#parent1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: auto;
    padding-left: 10vw;
    background-color: rgba(0, 0, 0, 0.336);
    min-height: 100vh;
    margin-top: -60px;
}
#top1 {
    font-size: clamp(90px, 10vw, 100px);
    font-weight: 750;
    display: flex;
    align-items: end;
    justify-content: start;
    width: 80%;
    padding-bottom: 10px;
    color: rgba(255, 255, 255, 0);
}
#top1::before{
    content: "";
    animation: top1 9s forwards, top1glow 3s 8s infinite;
}
@keyframes top1 {
    0%{content: ""; color: white;}
    5%{content: "L"; color: white;}
    10%{content: "Le";color: white;}
    15%{content: "Len";color: white;}
    20%{content: "Lens";color: white;}
    25%{content: "Len";color: white;}
    30%{content: "Lens";color: white;}
    35%{content: "Len";color: white;}
    40%{content: "Lens";color: white;}
    45%{content: "Lens L";color: white;}
    50%{content: "Lens Le";color: white;}
    55%{content: "Lens Leg";color: white;}
    60%{content: "Lens Lega";color: white;}
    65%{content: "Lens Legac";color: white;}
    70%{content: "Lens Legacy";color: white;}
    75%{content: "Lens Legac";color: white;}
    80%{content: "Lens Legacy";color: white;}
    85%{content: "Lens Legac";color: white;}
    90%{content: "Lens Legacy";color: white;}
    95%{content: "Lens Legacy";color: white;}
    100%{content: "Lens Legacy";color: white;}
}
@keyframes top1glow {
    0% {content: "Lens Legacy";color: rgb(220, 244, 255); text-shadow: 0px 0px 10px;}
    10% {content: "Lens Legacy";color: white; text-shadow: 0px 0px 11px;}
    20% {content: "Lens Legacy";color: white; text-shadow: 0px 0px 12px;}
    30% {content: "Lens Legacy";color: white; text-shadow: 0px 0px 13px;}
    40% {content: "Lens Legacy";color: white; text-shadow: 0px 0px 14px;}
    50% {content: "Lens Legacy";color: white; text-shadow: 0px 0px 15px;}
    60% {content: "Lens Legacy";color: white; text-shadow: 0px 0px 14px;}
    70% {content: "Lens Legacy";color: white; text-shadow: 0px 0px 13px;}
    80% {content: "Lens Legacy";color: rgb(220, 244, 255); text-shadow: 0px 0px 12px;}
    90% {content: "Lens Legacy";color: rgb(220, 244, 255);text-shadow: 0px 0px 11px;}
    100% {content: "Lens Legacy";color: rgb(220, 244, 255);  text-shadow: 0px 0px 10px;}
}
#top1 h1{
    font-size: clamp(20px, 10vw, 100px);
    cursor: default;
}
#sub1 {
    height: 30px;
    width: 80%;
    display: flex;
    align-items: center;
    font-size: clamp(10px, 2vw, 20px);
    padding-bottom: 10px;
    cursor: default;
    animation: sub1 9s ease;
}
@keyframes sub1{
    0% {transform: translateX(-90000px); display: flex;}
    10% {transform: translateX(-90000px); display: flex;}
    20% {transform: translateX(-90000px); display: flex;}
    30% {transform: translateX(-90000px); display: flex;}
    40% {transform: translateX(-90000px); display: flex;}
    50% {transform: translateX(-90000px); display: flex;}
    60% {transform: translateX(-90000px); display: flex;}
    70% {transform: translateX(-90000px); display: flex;}
    80% {transform: translateX(-90000px);  display: flex;}
    90% {transform: translateX(-90000px);  display: flex;}
    100% {transform: translateX(0);  display: flex;}
}
#info1 {
    padding-top: 10px;
    height: auto;
    width: clamp(300px, 50vw, 500px);
    font-size: clamp(10px, 5vw, 15px);
    cursor: default;
    animation: info1 9s ease;
}
@keyframes info1{
    0% {transform: translateX(-90000px); display: flex;}
    10% {transform: translateX(-90000px); display: flex;}
    20% {transform: translateX(-90000px); display: flex;}
    30% {transform: translateX(-90000px); display: flex;}
    40% {transform: translateX(-90000px); display: flex;}
    50% {transform: translateX(-90000px); display: flex;}
    60% {transform: translateX(-90000px); display: flex;}
    70% {transform: translateX(-90000px); display: flex;}
    80% {transform: translateX(-90000px);  display: flex;}
    90% {transform: translateX(-90000px);  display: flex;}
    100% {transform: translateX(0);  display: flex;}
}
#bot1 {
    margin-top: 30px;
    width: 100%;
    height: 50px;
}
#buttondiv1 {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: start  ;
    align-items: center;
    animation: button1 10s ease;
}
@keyframes button1{
    0% {opacity: 0;}
    10% {opacity: 0;}
    20% {opacity: 0;}
    30% {opacity: 0;}
    40% {opacity: 0;}
    50% {opacity: 0;}
    60% {opacity: 0;}
    70% {opacity: 0;}
    80% {opacity: 0;}
    90% {opacity: 0;}
    100% {opacity: 1;}
}
#button1 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 200px;
    border-radius: 35px;
    animation: scale1 2s 10s infinite;
    margin-left: 1vw;
}
@keyframes scale1 {
    0% {transform: scale(1);}
    50% {transform: scale(1.1);}
    100% {transform: scale(1);}
}
#abutton:hover {
    box-shadow: aquamarine 0px 5px 10px;
}
#abutton:active {
    background-color: rgb(0, 214, 243);
    color: white;
    transform: translateY(5px);
    box-shadow: aquamarine 0px -5px 10px;
}
#abutton {
    box-shadow: aquamarine 0px 0px 4px;
    border-radius: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: white;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 203, 203);
}

/* CONTENT */

.hidden {
    transform: translateY(-100%);
    transition: 700ms;
  }
.show {
    transform: translateY(0);
    transition: 700ms;
}
#home {
    display: block;
    min-height: 100vh;
}
#about {
    display: none;
    min-height: 100vh;
}
#location {
    display: none;
    min-height: 100vh;
}
#contact {
    display: none;
    min-height: 100vh;
}
#gallery {
    display: none;
}
#homenav, #aboutnav, #locationnav, #contactnav {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#homenav:hover, #aboutnav:hover, #locationnav:hover, #contactnav:hover {
    color: aqua;
}
/* ABOUT */

#parent2 {
    width: 100%;
    height: auto;
    padding-left: 5vw;
    background-color: rgba(0, 0, 0, 0.687);
    min-height: 100vh;
}
#top2 {
    font-size: clamp(10px, 7vw, 20px);
    padding-top: 10px;
    padding-bottom: 10px;
    color: aqua;
    animation: top2 2s ease-out;
}
@keyframes top2 {
    0% {opacity: 0; transform: translateX(-100px);}
    100% {opacity: 1; transform: translateX(0);}
}
#sub2 {
    padding-bottom: 10px;
    animation: sub2 1s ease-in;
}
@keyframes sub2 {
    0% {opacity: 0; transform: translateX(-100px);}
    100% {opacity: 1; transform: translateX(0);}
}
#infotop2 {
    font-size: clamp(10px, 7vw, 20px);
    padding-bottom: 10px;
    line-height: 1.5;
    animation: infotop2 1s forwards;
}
@keyframes infotop2 {
    0% {opacity: 0; transform: translateX(-100px);}
    100% {opacity: 1; transform: translateX(0);}
}
#box2 {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
}
.picdiv {
    height: clamp(500px, 20vw, 600px);
    width: clamp(350px, 20vw, 500px);
    border-radius: 25px;
    margin-right: 2vw;
}
.pic-container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
#mikelpic {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 25px;
    filter: brightness(140%);
    animation: mike 2s 2s forwards;
}
@keyframes mike {
   0% {transform: translateX(0);} 
   50% {transform: translateX(525px);} 
   100% {transform: translateX(0);}
}
#cielopic {
    width: 100%;
    height: 100%;
    border-radius: 25px;
    object-fit: cover;
    animation: cielo 2s 2s forwards;
}
@keyframes cielo {
   0% {transform: translateX(0);} 
   50% {transform: translateX(-525px);} 
   100% {transform: translateX(0);}
}
.picname {
    border-radius: 25px;
    text-align: center;
    width: 100%;
    margin: 10px 0 10px 0;
    font-size: clamp(10px, 7vw, 30px);
    color: aqua;
    font-weight: 600;
    margin-right: 20px;
    animation: picname 3s infinite;
}
@keyframes picname {
    0% {text-shadow: 0px 0px 6px aqua;}
    100% {}
}
#infowner {
    margin-top: 20px;
}
#infowner-p{
    width: 90%;
    font-size: clamp(10px, 7vw, 20px);
    line-height: 1.5;
    border-radius: 25px;
    margin-bottom: 10px;
}
#pricehead {
    padding-bottom: 20px;
}
#pricehead h2{
    margin-bottom: 20px;
    color: aqua;
    font-size: clamp(10px, 7vw, 60px);
}
#pricehead p{
    font-size: clamp(10px, 7vw, 20px);
    line-height: 2;
    width: 90%;
}

/* LOCATION */

#parent3 {
    background-color: rgba(0, 0, 0, 0.509);
    width: 100%;
    min-height: 100vh;
}
#map {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#mapframe {
    width: 90%;
    height: 800px;
    border: 10px solid aqua;
    border-radius: 40px;
    margin-bottom: 40px;
}
iframe {
    border-radius: 30px;
}
#top3 {
    color: aqua;
    padding-left: 2vw;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: clamp(20px, 10vw, 25px);
    cursor: default;
    animation: top3 4s infinite;
}
@keyframes top3 {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
#sub3 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 30px;
    width: 100%;
    font-size: clamp(25px, 5vw, 30px);
    padding-left: 2vw;
    font-weight: 600;
    cursor: default;
    animation: sub3 1s forwards;
}
@keyframes sub3 {
    0% {transform: translateX(-90000px);}
    100% {transform: translateX(0);}
}

/* CONTACT  */

#parent4 {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.685);
    padding-left: 2vw;
    min-height: 100vh;
}
#top4{
    color: aqua;
    padding: 20px 0 20px 0;
    font-size: clamp(20px, 10vw, 60px);
    cursor: default;
    animation: top4 3s infinite;
}
@keyframes top4 {
    0% {text-shadow: rgb(126, 197, 230) 0px 0px 2px; color: rgba(0, 255, 255, 0.838);}
    20% {text-shadow: rgb(126, 197, 230) 0px 0px 4px; color: rgba(0, 255, 255, 0.868);}
    40% {text-shadow: rgb(126, 197, 230) 0px 0px 6px;color: rgba(0, 255, 255, 0.888);}
    60% {text-shadow: rgb(126, 197, 230) 0px 0px 6px;color: rgba(0, 255, 255, 0.898);}
    80% {text-shadow: rgb(126, 197, 230) 0px 0px 4px;color: rgba(0, 255, 255, 0.878);}
    100% {text-shadow: rgb(126, 197, 230) 0px 0px 2px;color: rgba(0, 255, 255, 0.828);}
}
#sub4{
    font-size: clamp(10px, 10vw, 30px);
    padding-bottom: 10px;
    padding-left: 10vw;
    cursor: default;
    animation: sub4 2s forwards;
}
@keyframes sub4 {
    0% {opacity: 0; transform: translateX(-100px);}
    100% {opacity: 1; transform: translateX(0);}
}
#info4{
    font-size: clamp(10px, 6vw, 15px);
    padding-left: 10vw;
    cursor: default;
    animation: info4 2s forwards;
}
@keyframes info4 {
    0% {opacity: 0; transform: translateX(-100px);}
    100% {opacity: 1; transform: translateX(0);}
}
#ulcontact{
    margin-top: 30px;
}
.licontact{
    font-size: clamp(10px, 6vw, 30px);
    margin-bottom: 10px;
    margin-left: 40px;
}
#socdiv {
    display: flex;
    margin-top: 20px;
}
#fbdiv {
    display: flex;
    margin-left: 50px;
    width: 40px;
    height: 40px;
    background-image: url(facebook.svg);
    background-size: 100% 100%;
    animation: fb 2s 2s infinite;
}
@keyframes fb {
    0% {transform: scale(1);}
    50% {transform: scale(1.5);}
    100% {transform: scale(1);}
}
#igdiv {
    display: flex;
    margin-left: 40px;
    width: 45px;    
    height: 45px;
    background-image: url(instagram.svg);
    background-size: 100% 100%;
    animation: ig 2s 2s infinite;
}
@keyframes ig {
    0% {transform: scale(1);}
    50% {transform: scale(1.5);}
    100% {transform: scale(1);}
}

#ffb{
    width: 100%;
    height: 100%;
    text-indent: -99999px;
    text-decoration: none;
    color: white;
}
#fig {
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: white;
    text-indent: -99999px;
}
#fbdiv:hover, #igdiv:hover {
    filter: drop-shadow(0px 0px 4px aqua);
}
#fbdiv:active, #igdiv:active {
    scale:2;    
}
/* GALLERY */

#parent5 {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.824);
    flex-wrap: wrap;
    min-height: 100vh;
}
#top5 {
    display: none;
    padding-left: 4vw;
    font-size: clamp(10px, 5vw, 40px);
    color: aqua;
    height: 100px;
    width: 100%;
    display: flex;
    align-items: center;
    animation: top5 1s ease;
    margin-bottom: 20px;
}
@keyframes top5 {
    0% {opacity: 0; transform: translateX(200px);}
    100% {opacity: 1; transform: translateX(0);}
}
#wedtop {
    font-size: clamp(10px, 5vw, 30px);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 100%;
    animation: wedtop 19s infinite;
}
@keyframes wedtop {
    0% {opacity: 0; transform: translateX(0);}
    10% {opacity: 1; transform: translateX(10vw);}
    20% {opacity: 0; transform: translateX(0);}
    30% {opacity: 1; transform: translateX(-10vw);}
    40% {opacity: 0; transform: translateX(0);}
    50% {opacity: 1; transform: translateX(12vw);}
    60% {opacity: 0; transform: translateX(0);}
    70% {opacity: 1; transform: translateX(-10vw);}
    80% {opacity: 0; transform: translateX(0);}
    90% {opacity: 1; transform: translateX(10vw);}
    100% {opacity: 0; transform: translateX(0);}
}
#wedbox {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    height: auto;
    flex-wrap: wrap;
    padding: 90px;
}
.weddiv {
    height: 350px;
    width: 350px;
    margin: 10px;
}
.wedpic:hover {
    transition: 300ms;
    border-radius: 50%;
    scale: 1.5;
    filter: drop-shadow(0px 0px 10px);
    position: relative;
    z-index: 2;
}
.wedpic {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
#cortop {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 100%;
    font-size: clamp(10px, 5vw, 30px);
    animation: cortop 19s infinite;
    position: relative;
    z-index: 1;
}
@keyframes cortop {
    0% {opacity: 0; transform: translateX(0);}
    10% {opacity: 1; transform: translateX(10vw);}
    20% {opacity: 0; transform: translateX(0);}
    30% {opacity: 1; transform: translateX(-10vw);}
    40% {opacity: 0; transform: translateX(0);}
    50% {opacity: 1; transform: translateX(12vw);}
    60% {opacity: 0; transform: translateX(0);}
    70% {opacity: 1; transform: translateX(-10vw);}
    80% {opacity: 0; transform: translateX(0);}
    90% {opacity: 1; transform: translateX(10vw);}
    100% {opacity: 0; transform: translateX(0);}
}
#corbox {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    height: auto;
    flex-wrap: wrap;
    padding: 90px;
}
.cordiv {
    height: 350px;
    width: 350px;
    margin: 10px;
}
.corpic:hover {
    transition: 300ms;
    border-radius: 50%;
    scale: 1.5;
    filter: drop-shadow(0px 0px 10px);
    position: relative;
    z-index: 2;
}
.corpic {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
#birthtop {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 100%;
    font-size: clamp(10px, 5vw, 30px);
    animation: btop 19s infinite;
    position: relative;
    z-index: 1;
}
.birthpic:hover {
    transition: 300ms;
    scale: 1.5;
    border-radius: 50%;
    filter: drop-shadow(0px 0px 10px);
    position: relative;
    z-index: 2;
}
@keyframes btop {
    0% {opacity: 0; transform: translateX(0);}
    10% {opacity: 1; transform: translateX(10vw);}
    20% {opacity: 0; transform: translateX(0);}
    30% {opacity: 1; transform: translateX(-10vw);}
    40% {opacity: 0; transform: translateX(0);}
    50% {opacity: 1; transform: translateX(12vw);}
    60% {opacity: 0; transform: translateX(0);}
    70% {opacity: 1; transform: translateX(-10vw);}
    80% {opacity: 0; transform: translateX(0);}
    90% {opacity: 1; transform: translateX(10vw);}
    100% {opacity: 0; transform: translateX(0);}
}
#birthbox {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    height: auto;
    flex-wrap: wrap;
    padding: 90px;
}
.birthdiv {
    height: 350px;
    width: 350px;
    margin: 10px;
}
.birthpic {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
#portop {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 100%;
    font-size: clamp(10px, 5vw, 30px);
    animation: portop 19s infinite;
}
@keyframes portop {
    0% {opacity: 0; transform: translateX(0);}
    10% {opacity: 1; transform: translateX(10vw);}
    20% {opacity: 0; transform: translateX(0);}
    30% {opacity: 1; transform: translateX(-10vw);}
    40% {opacity: 0; transform: translateX(0);}
    50% {opacity: 1; transform: translateX(12vw);}
    60% {opacity: 0; transform: translateX(0);}
    70% {opacity: 1; transform: translateX(-10vw);}
    80% {opacity: 0; transform: translateX(0);}
    90% {opacity: 1; transform: translateX(10vw);}
    100% {opacity: 0; transform: translateX(0);}
}
#porbox {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    height: auto;
    flex-wrap: wrap;
    padding: 90px;
}
.pordiv {
    height: 350px;
    width: 350px;
    margin: 10px;
}
.porpic:hover {
    transition: 300ms;
    border-radius: 50%;
    scale: 1.5;
    filter: drop-shadow(0px 0px 10px);
}
.porpic {
    height: 100%;
    width: 100%;
    object-fit: contain; 
}
#footer {
    cursor: default;
    height: 80px;
    background-color: #000000ec;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: small;
    line-height: 1.5;
    z-index: 1000;
}
#caramel {
    display: flex;
    justify-content: center;
    align-items: center;
    color: aqua;
}

#headbar {
    display: none;
    width: 100%;
    height: 60px;
    z-index: 700;
    position: fixed;
}
#sidebar {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    list-style-type: none;
    backdrop-filter: blur(10px);
    box-shadow: 0px 0px 8px rgba(255, 255, 255, 0.345);
    padding-left: 8px;
    animation: sidebar 9s ease;
}
@keyframes sidebar{
    0% {transform: translateY(-100px); display: none;}
    10% {transform: translateY(-100px); display: none;}
    20% {transform: translateY(-100px); display: none;}
    30% {transform: translateY(-100px); display: flex;}
    40% {transform: translateY(-100px); display: flex;}
    50% {transform: translateY(-100px); display: flex;}
    60% {transform: translateY(-100px); display: flex;}
    70% {transform: translateY(-100px); display: flex;}
    80% {transform: translateY(-100px);  display: flex;}
    90% {transform: translateY(-100px);  display: flex;}
    100% {transform: translateY(0);  display: flex;}
}

#menucss {
    margin-right: 20px;
    cursor: pointer;
}
#sides{
    position: fixed;
    background-color: rgba(0, 0, 0, 0.79);
    display: none;
    justify-content: flex-end;
    width: 100%;
    height: 100%; 
    z-index: 801;
}
#sidecontentdiv {
    padding: 0 10px 0 10px;
    display: none;
    position: fixed;
    min-height: 100vh;
    width: 80%;
    height: 100%;
    background: linear-gradient(black,black,aqua);
    z-index: 800;
}
#sidecontent {
    height: 100%;   
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: start;
    align-items: start;
}
#closediv {
    height: 50px;
    width: 50px;
    background-color: red;
    cursor: pointer;
}
#closemenucss {
    margin: 50px;
    cursor: pointer;
    height: 50px;
    width: 50px;
    list-style-type: none;
    background-color: rgba(20, 53, 218, 0.564);
}
#sidehome, #sideabout, #sideloc, #sidecontact {
    position: relative;
    height: 100px;
    width: 100%;
    margin-bottom: 20px;
    background-color: rgba(20, 53, 218, 0.194);
}
.sideside {
    font-size: clamp(20px, 10vw, 30px);
    width: 100%;
    height: 100%;
}
@media screen and (max-width: 920px) {
    .wedpic:hover {scale: 1;}
    .corpic:hover {scale: 1;}
    .porpic:hover {scale: 1;}
    .birthpic:hover {scale: 1;}  
    #headbar {
        display: flex;
    } 
    header {
        display: none;
    }
}