body{
    width: 100vw;
    height: 100vh;
    position: relative;
    display: grid;
    justify-items:center;
    overflow-x: hidden;
    margin: 0;
}

.container{
    display:grid;
    position: relative;
    place-content:center;
    width:100vw;
    height:100vh;
    overflow-x:hidden;
    font-size: 3.5vh;
}

.fdbutton01{
    position: absolute;
    width: 104px;
    height: 56PX;
    opacity: .001;
}

#home{
    left: 74px;
    top: 21px;
}


#login, #enter{
    left: 614px;
    top: 519px;
}

.fdbutton01:hover{
    border-radius: 13PX;
    opacity: 1;
    background: transparent;
    color: transparent;
    cursor: pointer;
}

.fdbutton01:hover{
    border: yellow solid 3px;  
}

.fdbutton01.fdhome:hover {
    border: brown solid 3px;
}

.fdbutton10{
    position: absolute;
    width: 25px;
    height: 70px;
    opacity: .001;
    left: 290px;
    top: 152px;
}

#theWineCollection{
    position: absolute;
    top: 452px;
    left: 71px;
    width: 250px;
    height: 50px;
}

.fdmenu0{
    background: khaki;
}





.data-sheet{
    width: inherit;
    max-width: 100vh;
    font-size: 3.5vh;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 15% auto 10%;
}

.bottle{
    grid-area:b;
    height: 100vh;
}

.map{
    grid-area:b;
    height: 50vh;
}

.banner{
    grid-area:h;
    display:grid;
    grid-template-columns: 18vh 10vh 10vh auto 10vh;
    align-items:start;
    height: 13vh;
}

.banner img{
    height: 8vh;
}

.banner button{
    background: transparent;
    border: 0;
}

.bottleNumber{
    font-size: 7vh;
    margin: 0;
    border:0;
    border-radius:15px;
    width: 9vh;
    background: red;
    color:white;
    text-align:center;
    font-weight:900;
}

.data{
    grid-area: d;
    font-family: special gothic;
}

.data h1{
    margin: 0em 0 0 0em;
    text-align:left;
    font-size: 130%;
    font-family: special gothic;
    /* font-size: xxx-large; */
}

.data h2{
    text-align:left;
    font-size: 110%;
    font-family: special gothic;
    margin: -0.1em 0em 0;
}


.links{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    grid-area:l;
    margin-top: 4vh;
    justify-items: center;
}

.links > *{  
    font-size:xx-large;
}

.links button, .container button{
    font-size: 83%;
    width: 18vh;
    height: 4vh;
    border-radius: 10px;
}
.details{
    display:grid;
    grid-template-columns:1fr 3fr;
    font-size: 90%;
}

#Vintage{
    justify-self: right;
    margin-right: 1rem;
}

.subject{
    text-align:right;
    font-style:italic;
    font-size:90%;
    font-weight:lighter;
    margin-right: 1rem;
    margin-top: 0;
    margin-bottom: 0;
}

.value{
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 0;
}


#bottle{
    overflow: hidden;
    height: 80vh;
}

#bottle img{
    /* object-fit:contain; */
    height: inherit;
}

#map{
    overflow: hidden;
    height: 50vh;
}

#map img{
    /* object-fit:contain; */
    height: inherit;
}

#Header{
    display:grid;
    grid-template-columns: auto auto;
    justify-content: center;
}

#Header.mobile{
    grid-template-columns: auto;
    justify-items: center;
}

#Header.mobile #Vintage{
    justify-self: center;
}

#Header.mobile .value{
    margin-top: -0.3rem;
    text-align: center;
    line-height: 3.9vh;
}

#Header.mobile .subject{
    margin: 0;
    margin-top: 0.3rem;
    margin-bottom: 0.1rem;
}

#Header.mobile #Names *{
    text-align:center;
}

dialog {
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out,
    overlay 0.5s ease-in-out allow-discrete,
    display 0.5s ease-in-out allow-discrete;

  opacity: 0;
  transform: translateY(10vh);
}

#tastingText{
    width: 70vh;
    font-size: 3.5vh;
    max-width: 90vw;
}

dialog{
  
  &::backdrop {
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete,
      background-color .5s;
    background-color: hsl(0 0 0 / 0);
    }

  &[open]::backdrop {
    background-color: hsl(0 0 0 / 20%);
  }
}

dialog[open]{
  opacity: 1;
  transform: translateY(0);
}

@starting-style {
  dialog[open] {
    opacity: 0;
    transform: translateY(-10vh);
  }

  dialog[open]::backdrop {
    /* opacity: 0; */
    background-color: hsl(0 0 0 / 0);
  }
}