nav{
    position: fixed;
    top: 0;
    width: 100%;
    display:grid;
    grid-template-columns: auto 1fr repeat(1,auto);
    align-items: center;
    gap: 0.45rem;
    padding: 0 1rem;
    height: 25px;
    background-color: #B2B2E1;
    z-index: 999;
}
nav a:first-child{
    font-weight: bold;
    text-transform: uppercase;
    grid-column: 1;
}

nav a:not(:first-child){
    justify-self:end;
}
nav a
a:link,
a:visited{
  color: darkblue;
  transition: color 0.5s;
}
a:hover,
a:focus{
    color:  white;
    transition: color 0.5s;
}

header{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    width: 100%;
    overflow: hidden;
    text-align:center;
}

header h1{
    grid-column: 1;
    grid-row: 1;
    z-index: 1;
    width: 100%;
    transform: translateY(2rem);
    opacity: 0;
    animation: fadeInUp 0.2s ease-out forwards;
    animation-delay: 0.6s;

}
#gallery figure:hover img{
 transform: scale(1.1);
}
#gallery figure:hover figcaption{
 transform: scale(1.1);
}
dialog{
    display: none;
    opacity: 0;
    transform: scale(0.9) translateY(20px);
    border: none;
    margin: auto;
    padding: 0;
    transition: all 0.4s ease-out allow-discrete;
    place-items: center;

}
dialog[open] {
    display: grid;
    opacity: 1;
    transform: scale(1) translateY(0);
}
@starting-style{
    dialog[open] {
        opacity: 0;
        transform: scale(1) translateY(20px);
    }
}

dialog::backdrop{
    background-color: rgb( 0 0 0 / 0);
    transition: all 0.4s ease-out, display 0.4s allow-discrete, overlay 0.4s allow-discrete;

}
@starting-style{
 dialog[open]::backdrop{
    background-color: rgb( 0 0 0 / 0); ;
}
}
dialog[open]::backdrop{
    background-color: rgb(0 0 0 / 0.8);
}
dialog button{
    background: none;
    border: 2px solid darkorchid;
    color: darkorchid;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s ease;
    padding: 0.482rem;
}

dialog form{
    width: 100%;
    text-align: center;
    padding: 0 1.2 0.6rem;
}
dialog button:hover{
    background-color: darkorchid;
    color:white
}

dialog button:active{
    transform:scale(0.95);
}

dialog button:focus{
    outline: none;
    border-color: darkorchid;
}

@keyframes fadeInUp {
0%{
    opacity: 0%;
    transform: translateY(2.44rem); 
}
100%{
    opacity:1;
    transform: translateY(0);
}
}