@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Montserrat:wght@400;600;700&family=Roboto+Slab:wght@400;700&family=Roboto:wght@400;700&display=swap');


:root {
    --title: 'Libre Baskerville', 'Roboto Slab', serif;
    --body: 'Montserrat', 'Roboto', sans-serif;
    --yellow: #EBB700;
    --blue: #00338D;
    --black: #313235;
    --green: #00AB68;
    --lightBlue: #266AA6;
    --pink: #D989A6;
}

* {
    /* border: solid 1px #000; */
    box-sizing: border-box;
}

html,
body {
    font-family: var(--body);
    line-height: 1.5;
    letter-spacing: 1px;
    padding: 0;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    /* overflow: hidden; */
}

header {
    border-bottom: 1px solid;
    display: flex;
    justify-content: space-between;
    padding: 2rem 6rem;
}
.logoBox {
    width: 15vw;
    display: flex;
    padding: 0.5rem 0;
    max-width: 160px;
    min-width: 80px;
}
#logo {
    width: 100%;
    height: auto;
}

#mainNav {
    display: flex;
    align-items: center;
    gap: 2rem;
    font-weight: 700;
}

#mainNav> a {
    color: #313235;
    font-size: clamp(1rem, 2ch, 2.5rem);
    font-weight: 600;
}

#mainNav> a:hover {
    color: var(--blue);
}

main {
    min-height: calc(100vh - 70px);
}

section {
    margin: 2rem 8rem;
}

h2,
h3,
h4,
h5 {
    font-family: var(--title);
}
h2 {
    font-size: clamp(1.5rem, 2vw, 2rem);
}
h3 {
    font-size: clamp(1.2rem, 1.5vw, 1.2rem);
}

a{
    text-decoration: none;
}
span {
    font-size: clamp(1.5rem, 4vw, 3rem);
    margin: 0 0.25rem;
}
.btnBlue {
    background: var(--lightBlue);
    box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
    border-radius: 25px;
    display: block;
    color: white;
    width: fit-content;
    padding: 0.6rem 1rem;
    text-transform: uppercase;
}

.bgRight,
.bg2 {
    position: absolute;
    z-index: -1;
    width: 94%;
    height: auto;
    max-width: fit-content;
}
.bg2 {
    right: 0;
}
#announcement,
#map,
#location,
#about,
#album,
#register {
    margin-top: 11rem;
    margin-bottom: 11rem;
}

.row > a > img {
    width: 4vw;
    height: auto;
    min-width: 40px;
    max-width: 55px;
}

ul {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0;
}

ul > li {
    padding: 0.5rem 0;
}

ul > li:hover {
    background-color: #266AA6;
    color: white;
}

ul > hr:last-child {
    display: none;
}

hr {
    margin: 0.25rem 0;
}

/* Landing */

#landing {
    position: relative;
}
.landingRight {
    position: absolute;
    top: 15%;
    right: 0;
    width: 35%;
}
.landingRight > p {
    font-size: clamp(.6rem, 1.2vw, 1.4rem);
    font-weight: 400;
}
.fa-chevron-down {
    padding-left: 0.5rem;
}

.fa-chevron-right {
    padding-left: 0.5rem;
    display: none;
}

.landingBtn {
    font-size: .8rem;
    font-weight: 700;
    display: flex;
    justify-content: flex-end;
    padding: 1rem 0;
}

/* announcement */
.content > p {
    display: none;
    font-size: 1rem;
}
.closeBtn {
    display: none;
}
#announcement {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.closeBtn,
.openBtn {
    background: none;
    border: none;
}
.arrow {
    width: 2.5vw;
    height: auto;
}
.titleTop > h3 {
    font-size: 1.1rem;
    font-weight: 400;
}
.titleTop {
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid;
}
.anGroup {
    max-width: 65ch;
    width: 40vw;
}
.imgBox {
    width: clamp(500px, 40%, 565px);
    height: auto;
}
#girlBox {
    width: 42vw;
    height: auto;
    max-width: 450px;
}
#girlAnnounce {
    width: 100%;
    height: auto;
}

/* Map */
#mapTop {
    width: 82%;
    max-width: 70ch;
}
#mapArea {
    margin-top: 5rem;
    display: flex;
}
.form-control {
    border: 1px solid #000000;
    border-radius: 18px;
    padding: 0.1rem 1rem;
    width: 18vw;
    margin: 0.3rem;
    font-size: clamp(1.2rem, 1.5vw, 1.2rem);
}

#mapRight {
    width: 100%;
    height: auto;
    position: relative;
}
#mapSVG {
    width: 100%;
    height: auto;
    position: relative;
    margin-top: 1rem;
}
#mapMask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(125 124 124 / 28%);
    display: none;
    z-index: -1;
  }
.searchForm {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.form-group {
    flex-grow: 1;
}
.form-group * {
    display: block;
    width: 100%;
}
#mapLeft {
    width: 100%;
}
#flip {
    width: 5vw;
    height: auto;
    position: absolute;
    right: 0;
    top: -84px;
    animation: rotate 2s infinite ease-in-out;
    z-index: 2;
}
@keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(45deg);
    }
    100% {
        transform: rotate(0deg);
    }
  }
.zoomed-in {
    transform: translate(0, -24px) scale(1.3);
}
.colored-border {
    fill: none;
    stroke: #fff700;
    stroke-width: 5px;
}
#info {
    display: none;
    background-color: #EFF4F8;
    border-radius: 5px;
    padding: 2rem 2rem;
    border: 4px solid var(--blue);
    width: 35vw;
    height: 25vh;
    overflow: scroll;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    box-shadow: 0px 5px 9px 8px rgb(0 0 0 / 25%);
}
#infoX {
    color: gray;
    font-size: 1.5rem;
    position: absolute;
    right: 19px;
    top: 13px;
}
#info > h2 {
    text-align: center;
    margin: 0;
}
#info > p > span,
#info > p {
    font-size: 1.2rem;
}
#boothId {
    font-weight: 600;
}

/* List */
#listTitle {
    display: flex;
    margin: 2rem 0;
    align-items: center;
    font-size: .8rem;
    cursor: pointer;
}

#listTitle > h4 {
    margin: 0;
}
.vendorList {
    /* display: flex; */
    justify-content: space-between;
    gap: 3rem;
    overflow: hidden;
}
.listBox {
    max-width: 32ch;
    width: 22vw;
    min-width: 20ch;
    height: 1000px;
    overflow: scroll;
}
.listBox > h3 {
    border: 1px solid black;
    background-color: #EFF4F8;
    padding: 0.25rem 0.5rem;
    margin-top: 0;
    margin-bottom: 0.25rem;
}
.placehold {
    text-align: center;
}
.eachVendor {
    background: #EFF4F8;
    border-radius: 5px;
    padding: 2rem 3rem;
}
.vendorTop {
    text-align: center;
    position: relative;
}
#xmark {
    position: absolute;
    font-size: 1.7rem;
    color: gray;
    top: -35px;
    right: -28px;
}
.vendorImg {
    width: 35vw;
    height: auto;
    margin: 2rem auto;
    max-width: 500px;
}
.vendorImg > img {
    width: 100%;
}
.detailBox {
    width: 60vw;
    max-width: 100ch;
    min-width: 30ch;
    margin: 0 auto;
}
.eachVendor {
    max-height: 1000px;
    overflow: scroll;
    border: 4px solid var(--blue);
}
.details {
    display: flex;
    justify-content: center;
    gap: 1rem;
}
.deInfo > td:nth-child(2),
.deInfo > td:nth-child(3) {
    margin-top: 0.2rem;
}
.blur {
    /* filter: blur(10px) brightness(0.8) contrast(0.9); */
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    background:rgba(0,0,0,0.5);
    display:none;
}
.tdLeft {
    display: flex;
    text-align: start;
    margin-right: 1rem;
    font-weight: 700;
}
td {
    padding-bottom: 1rem;
    max-width: 55ch;
}

/* location  */
#location {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
}
.locationRight {
    width: 38vw;
    max-width: 70ch;
}
#googleMap {
    width: 33vw;
    height: auto;
}
iframe {
    width: 100%;
    height: 31vh;
}

/* about */
#about {
    display: flex;
    position: relative;
}
.aboutImg {
    position: absolute;
    bottom: -12%;
    left: 51%;
}
.aboutImg > img {
    width: 42vw;
    height: auto;
    max-width: 700px;
}
#aboutLeft {
    width: 57%;
    min-width: 40ch;
    max-width: 73ch;
}

/* photo */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.photoBox {
    width: 100%; 
    height: 0;
    padding-bottom: 100%;
    overflow: hidden;
    position: relative;
}
.galleryPhoto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#morePhoto {
    z-index: 2;
    position: absolute;
    bottom: 6px;
    right: 10px;
    font-size: 1.5rem;
    background-color: #ffffffbd;
    padding: 0.25rem 1rem;
    border-radius: 50px;
}
.grid > .photoBox:nth-child(6)::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.3);
    z-index: 1;
}

/* carousel */
#album {
   margin-bottom: 0;
}

.grid .photoBox:last-of-type:hover {
    opacity: 0.5;
    cursor: pointer;
}

.hidden {
    display: none !important;
}

.flex {
    display: flex;
}

#closeLightBox {
    right: 15px;
    position: absolute;
    top: 10px;
    font-size: 1.5rem;
    z-index: 4;
}

#lightBox {
    background-color: rgba(0, 0, 0, 0.5);
    width: 100vw;
    height: 100vh;
    position: absolute;
    bottom: 12%;
    left: 0;
    /* display: flex; */
    align-items: center;
    justify-content: center;
    z-index: 3;
}

.carousel {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;

}

.carousel-inner {
    display: flex;
    align-items: center;
}

.carousel-inner .imgBox {
    width: 100vw;
    /* max-width: 100ch; */
}

.carousel-inner .imgBox img {
    height: 100%;
    width: auto;
    max-height: 60vh;
    margin: 0 auto;
}

/* moble-photo */
#point {
    position: relative;
    display: none;
}
.point {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: block;
    margin:15px auto;
    position: relative;
    background: rgb(115 115 115);
    box-sizing: border-box;
    /* animation: shadowExpandX 2s linear infinite alternate; */
    position: absolute;
    bottom: 125px;
    left: 6px;
    right: 0;
    margin: auto;
  }
  .point1 {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: block;
    margin:15px auto;
    position: relative;
    background: rgba(154, 154, 154, 0.8);
    box-sizing: border-box;
    /* animation: shadowExpandX 2s linear infinite alternate; */
    position: absolute;
    bottom: 125px;
    left: -43px;
    right: 0;
    margin: auto;
  }
  .point2 {
    left: 57px;
  }
  
  @keyframes shadowExpandX {
    0% {
      box-shadow: 0 0, 0 0;
      color: rgba(255, 255, 255, 0.2);
    }
    100% {
      box-shadow: -24px 0, 24px 0;
      color: rgba(154, 154, 154, 0.8);
    }
  }
.container {
    display: none;
    position: relative;
}
.section {
    display:flex;
    white-space: nowrap;
    overflow-x: auto;
    scroll-snap-type: x;
    width:100vw;
    gap: 1rem;
    /* position: absolute; */
    /* left: -130px; */
    margin-top: 0;
    margin-inline: -7rem;
}
.section__item {
    scroll-snap-align: center;
    scroll-snap-stop: normal;
    min-width: 300px;
    height: 200px;
}
.section__item > img {
    width: 100%;
    height: auto;
    
}


/* register */
#register {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 2rem;
}
.vendorRight {
    width: 44vw;
    max-width: 70ch;
    height: auto;
}
.vendorImgBox > img {
    width: 100%;
    height: auto;

}

/* footer */
#footerTop {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 4rem;
    border-top: 1px solid black;
    padding: 3rem;
}
.footerGroup > h4 {
    border-bottom: 1px solid;
    border-top: 1px solid;
    text-align: center;
    font-size: 2rem;
}
.footerGroup {
    max-width: 30ch;
}
.footer-items {
    margin-bottom: 2rem;
}
h5 {
    margin-bottom: .25rem;
}
.footerGroup > a {
    color: #000000;
    text-decoration: underline;
}
.footerGroup > a:hover {
    color: var(--yellow);
}
.footerContact {
    text-decoration: underline;
}
#footerBottom {
    background-color: #B9B2B2;
    padding: 2rem 1rem;
    display: flex;
    justify-content: space-evenly;
}
#footerBottom > small {
    font-size: 1rem;
    font-weight: 600;
}
.row {
    display: flex;
    justify-content: center;
    gap: 1rem;
}



/* responsive */
@media (max-width: 1500px) {
    #info > h2 {
        font-size: 1.5rem;
    }
    #info > p > span, #info > p {
        font-size: 1rem;
    }
}

@media (max-width: 1280px) {
    .form-control {
        font-size: .8rem;
    }
    .footerGroup {
        max-width: unset;
    }
    #footerTop {
        padding: 3rem 8rem;
    }
    .socialsIcon {
        width: 5vw;
        height: auto;
    }
    #footerBottom > small {
        font-size: 1rem;
    }
    #mainNav> a {
        font-size: 1rem;
    }
    #info {
        padding: 1.2rem 2rem;
        height: 21vh;
        width: 40vw;
    }
    #info > p > span, #info > p {
        font-size: .9rem;
    }
    #info > h2 {
        font-size: 1.2rem;
    }
}

@media (max-width: 1100px) {
    .landingRight {
        width: 44%;
    }
    .landingRight > h2 {
        font-size: 1.3rem;
    }
}

@media (max-width: 1000px) {
    .vendorTop {
        text-align: start;
    }
    .details {
        display: unset;
    }
    .deTilte {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    
    .deInfo {
        padding: 0.6rem 0;
        display: flex;
        flex-direction: column;
        min-width: 15ch;
        max-width: 65ch;
    }
    #info {
        width: 46vw;
        height: 24vh;
    }
    #info > p > span, #info > p {
        font-size: .8rem;
    }
}

@media (max-width: 900px) {
    section {
        margin: 2rem 4rem;
    }
    #mainNav> a {
        font-size: .9rem;
    }
    #lightBox {
        margin: -2rem -4rem;
    }
}

@media (max-width: 850px) {
    .arrow {
        width: 4vw;
    }
    .form-control {
        font-size: .6rem;
    }
    #footerBottom > small {
        font-size: .8rem;
    }
   
}
@media (max-width: 750px) {
    h1 {
        margin: 0;
    }
    header {
        padding: 0 2.5rem;
        border-bottom: unset;
    }
    #mainNav {
        display: none; 
    }
    #menuToggle {
        display: flex;
        align-items: center;
    }
    label[for=toggle] {
        position: unset;
    }
    #landingSVG {
        width: 200%;
        position: relative;
        left: 68%;
        transform: translateX(-50%);
        margin-top: 3rem;
      }
    #landingSVG > g {
        transform: translateX(40%); 
    }
    section {
        margin: 2rem 6rem;
        overflow: hidden;
    }
    #landing {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
    }
    h2 {
        font-size: 1.7rem;
    }
    #annH2 {
        text-align: center;
    }
    span {
        font-size: 2.5rem;
    }
    .landingRight {
        position: unset;
        width: 100%;
    }
    .landingRight > p {
        font-size: 1rem;
    }
    #girlBox {
        margin: 0 auto;
        max-width: fit-content;
        width: clamp(500px, 40%, 565px);
    }
    .anGroup {
        max-width: fit-content;
        width: unset;
    }
    .bg1 {
        top:1210px;
    }
    h3 {
        font-size: 1.2rem;
    }
    #location {
        flex-direction: column-reverse;
    }
    .locationRight,
    iframe,
    .vendorRight,
    .vendorImgBox
    {
        width: unset;
    }
    #googleMap {
        display: contents;
        text-align: center;
    }
    #aboutLeft {
        max-width: unset;
        min-width: unset;
        width: auto;
    }
    .aboutImg {
        position: unset;
    }
    .aboutImg > img {
        width: 65vw;
        margin: 2rem 0;
        max-width: fit-content;

    }
    #about {
        flex-direction: column;
    }
    #register {
        flex-direction: column;
    }
    .socialsIcon {
        width: 12vw;
        height: auto;
        margin-right: 0.25rem;
    }
    #footerTop {
        display: flex;
        flex-direction: column;
        border: none;
        padding: 3rem;
    }
    .footerGroup > h4 {
        text-align: center;
    }
    .footerGroup {
        width: 100%;
    }
    #socials {
        text-align: center;
    }
    #footerBottom {
        flex-direction: column;
        text-align: center;
    }
    .grid {
        display: none;
    }
    .slide {
        display: block;
    }
    .container {
        display: block;
        width:100vw;
        border-radius:1.5rem;
        -webkit-overflow-scrolling: touch;
        /* height: 25vh; */
    }
    .vendorList {
        flex-direction: column;
    }
    .vendorTop {
        position: unset;
    }
    .listBox,
    .detailBox {
        max-width: unset;
        width: unset;
        min-width: unset;
    }
    .detailBox {
        position: absolute;
        z-index: 3;
        max-width: 70ch;
        width: 100vw;
        right: 0;
    }
    .vendorImg {
        width: 70vw;
    }
    #xmark {
        top: 2%;
        right: 4%;
    }
    .eachVendor {
        max-height: 886px;
        overflow: scroll;
    }
    #point {
        display: block;
    }
    .placehold {
        display: none;
    }
    .form-group * {
        width: 97%;
    }
    #info {
        top: 16px;
        height: 16ch;
    }
  }
@media (max-width: 680px) {
    #flip {
        top: -133px;
    }
}

@media (max-width: 640px) {
    .section {
        margin-inline: -4.5rem;
    }
    #flip {
        top: -115px;
    }
}

@media (max-width: 600px) {
    section {
        margin: 2rem 3.5rem;
    }
    .arrow {
        width: 5vw;
    }
    .section {
        margin-inline: -3rem;
    }
    .searchForm {
        display: none;
    }
    #flip {
        width: 18vw;
        position: absolute;
        right: 0;
        left: 0;
        margin: 0 auto;
        top: 40%;
    }
    #mapMask {
        display: block;
        z-index: 1;
    }
    #mapSVG {
        margin-top: 0;
    }
    #info {
        display: none;
    }
}

@media (max-width: 500px) {
    .section {
        margin-inline: -1rem;
    }
    .point {
        left: -5px;
    }
    .point1 {
        left: -55px;
    }
    .point2 {
        left: 45px;
    }
    .deTilte > p {
        font-size: .9rem;
    }
    .vendorTop > h2 {
        font-size: 1.4rem;
    }
}

@media (max-width: 440px) {
    h2 {
        font-size: 1.5rem;
    }
    .bg1 {
        top:950px;
    }
    .vendorTop > h2 {
        font-size: 1.4rem;
    }
}

@media (max-width: 400px) {
    .footerGroup > a {
        font-size: .8rem;
    }
    .deTilte > p {
        font-size: .8rem;
    }
}
  
/* desk */
@media (min-width: 750px) {
    #mainNav {
      display: flex;
    }
  
    #menuToggle {
      display: none; 
    }
    #flip {
        display: none;
    }
  }

@media (min-width: 1700px) {
    h3,
    .titleTop > h3 {
        font-size: clamp(1rem, 1.4vw, 1.6rem);
    }
    p,
    .content > p,
    ul > li,
    .deTilte > td > h4 {
        font-size: clamp(.6rem, 1.2vw, 1.4rem);
    }
    section {
        margin: 2rem auto;
        max-width: 150ch;
    }
    #mainNav> a {
        font-size: clamp(1rem, 3ch, 2.5rem);
    }
    .locationRight {
        width: 24vw;
        min-width: 50ch;
    }
    #googleMap {
        max-width: 74ch;
        min-width: 70ch;
    }
}

/* scroll bar */
/* width */
.listBox::-webkit-scrollbar,
.eachVendor::-webkit-scrollbar,
#info::-webkit-scrollbar {
    border-radius: 10px;
    width: 10px;
}
  
  /* Track */
.listBox::-webkit-scrollbar-track {
    box-shadow: inset 0 0 10px transparent; 
    border-radius: 10px;
}

.eachVendor::-webkit-scrollbar-track,
#info::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}
   
  /* Handle */
.listBox::-webkit-scrollbar-thumb {
    background: gray; 
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
.eachVendor::-webkit-scrollbar-thumb,
#info::-webkit-scrollbar-thumb {
    background: rgb(177, 177, 177); 
    border-radius: 10px;
}
  
  /* Handle on hover */
.listBox::-webkit-scrollbar-thumb:hover,
.eachVendor::-webkit-scrollbar-thumb:hover,
#info::-webkit-scrollbar-thumb:hover {
    background: #808080; 
}




/* Landing animation */
#r1,
#r2,
#r4 {
    animation-name: slideRight;
    animation-duration: 30s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
  }
  
  @keyframes slideRight {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(100%);
    }
  }

#r3,
#b1 {
    animation-name: slideRight;
    animation-duration: 60s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
  }
  
  @keyframes slideRight {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(100%);
    }
  }


/* header toggle*/
#navigation {
    display: none;
    position: absolute;
    padding-top: 6.2rem;
    right: -100vw;
    top: 0;
    width: 100%;
    z-index: 1;
    background-color: var(--blue);
    height: 100vh;
    transition: all 300ms cubic-bezier(0.18, 0.05, 0.03, 0.95);
}

#navigation ul {
    padding: 2rem;
}

#navigation ul li {
    margin: 1.8rem 0;
    list-style: none;
    font-size: xx-large;
    padding: 0 1rem .5rem;
    font-family: var(--title);
    text-align: center;
}
#navigation ul li > a {
    text-decoration: none;
    color: white
}

/* #navigation toggle */
label[for=toggle] {
    position: absolute;
    right: 18px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    top: 9px;
    max-width: 2rem;
}

label[for=toggle] span {
    background-color: black;
    z-index: 3;
    width: 2rem;
    height: .15rem;
    display: block;
    margin: 0;
    transition: all 300ms cubic-bezier(0.18, 0.05, 0.03, 0.95);
}

/* hamburger toggle */
.togglelogo {
    width: 13vw;
    position: absolute;
    top: 10px;
    left: 19px;
}
label[for=toggle] span:first-child {
    transform-origin: 0% 0%;
}

label[for=toggle] span:nth-last-child(2) {
    transform-origin: 0% 100%;
}

#toggle {
    appearance: none;
    display: none;
    cursor: pointer;
}

#toggle+label {
    cursor: pointer;
    height: 2em;
    color: black;
    text-align: center;
    transition: all 350ms ease;
}

#toggle:checked~#navigation {
    display: block;
    right: 0;
}

#toggle:checked~aside {
    right: -40rem;
}

#toggle:checked~label[for=toggle] span {
    opacity: 1;
    transform: rotate(45deg) translate(-.3rem, -.4rem);
    background-color: white;
    
}

#toggle:checked~label[for=toggle] span:nth-last-child(2) {
    transform: rotate(-45deg) translate(-.3rem, .85rem);
}

#toggle:checked~label[for=toggle] span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}