* {
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

html{
    position: relative;
}

body{
    height: 100vh;
    position: relative;
    overflow: hidden;
    background-color: rgb(1, 50, 158);
    background-image: url("../../Backgrounds/fave2.avif"); background-repeat: no-repeat; background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


#home{
    position: fixed;
    top: 0;
    left: 0;
    height: 7%;
    width: 12%;
    border-radius: 5px;
    cursor: pointer;
    z-index: 5;
}

#home div{
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100%;
 width: 100%;
 gap: 10%;
}

#home a{
    text-decoration: none; color: white;
}

#home p{
    transition: .6s;
    font-size: 1.5dvw; font-weight: bold;
    color: blule;
}

#home img{
    width: 40%;
    height: 100%;
    border-radius: 100%;
}

#home:hover{
    background-color: white;
}
#home:hover a{
 color: blue;
}

#cover {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.377);
    backdrop-filter: blur(7px);
    height: 100vh;
    width: 100%;
    display: none;
    z-index: 5;
}

#kart{
    position: fixed;
    bottom: 0;
    left: 0;
    height: 8%;
    width: 15%;
    background-color: rgba(0, 0, 0, 0.603);
    border-radius: 0 30px 0 0;
    cursor: pointer;
    z-index: 5;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
#kartImg{
    height: 90%;
    width: 50%;
}
#kartImg img{
    height: 100%;
    width: 100%;
}

#Thanksforshopping{
    height: 85%; background-color: whitesmoke; overflow: auto;
    width: 5%;
    position: fixed;
    left: 0;
    top: 7%;
    opacity: .9;
    display: grid;
    place-items: center;
    z-index: 4;
}
#Thanksforshopping::-webkit-scrollbar{
    display: none;
}

#Thanksforshopping p{
    color: blue;
    text-shadow: 3px 3px 5px black;
    padding: .1em .5em;
    position: relative;
    top: 7%;
    font-size: 2dvh;
    font-weight: bold;
}

.main {
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
}

.content {
    position: absolute; top: 5%; height: 90%; width: 100%; background: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, .5), rgba(221, 217, 217, 0.514), rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)); position: relative; overflow: hidden;
    display: grid; place-items: center; backdrop-filter: blur(5px); z-index: 3;
}

#CArt{
    position: fixed; bottom: 0; left: 0; height: 8%; width: 15%; background-color: rgba(0, 0, 0, 0.603); z-index: 5; display: flex; justify-content: center; align-items: center; gap: 5%; border-radius: 0 20px 0 0; backdrop-filter: blur(10px); cursor: pointer;
}

#GalleryCart{
 height: 70%; width: 35%; background-color: rgba(255, 255, 255, 0.7); position: fixed; left: -50%; z-index: 6; border-right: 5px solid red; backdrop-filter: blur(10px); transition: .4s; display: flex; justify-content: center; align-items: center; flex-direction: column;
}

#GalleryCartContainer{
    height: 85%; width: 90%; position: relative; top: -4%; overflow: auto;
}

/* #clearGalleryCart{
    display: none;
} */
.GalleryCartItems{
    height: 35%; width: 100%; position: relative; background-color: rgba(0, 0, 0, 0.9); display: flex; justify-content: center; align-items: center; margin-bottom: 1em;
}
.GalleryCartItems .GCIimg{
    height: 80%; width: 35%; position: absolute; left: 5%; border: 1px solid white;
}
.GalleryCartItems .GCInumberofCart{
    background-color: red; color: white; padding: .5em; font-size: 1.5rem; position: absolute; left: 50%;
}
.GalleryCartItems p{
    color: yellow; font-weight: bold; position: absolute; right: 3%; font-size: 1.2rem; width: 35%;
}

#bar{
    height: 14%; width: 40%; position: absolute; right: 0; bottom: -14%; display: flex; justify-content: center; align-items: center; 
}
#AddtoCart{
    height: 90%; width: 46%; position: absolute; right: 0; display: flex; justify-content: center; align-items: center; cursor: pointer; border-radius: 10px; color: white; font-size: .97rem; background-color: rgba(0, 0, 0, .8);
}
#notes {
    height: 90%; width: 46%; position: absolute; left: 0; display: flex; justify-content: center; align-items: center; gap: 5%; cursor: pointer; border-radius: 10px; color: white; background-color: rgba(0, 0, 0, .8);
}
#notes:hover{
    color: yellow;
}


#recc-product{
    background-color: rgb(255, 0, 55);
    position: absolute;
    top: 0;
    left: 0;
    height: fit-content;
    width: fit-content;
    flex: 0 0 fit-content;
    border-radius: 10px 0 12px 0;
    padding: .2em;
}

#recc-product p{
    color: white;
    font-size: 1.3dvw;
    font-weight: bold;
}

#more-prods{
    background-color: rgb(255, 0, 55); position: sticky; right: 0; top: 0; height: 5%; width: fit-content; display: grid; place-items: center; border-radius: 0 0 10px 0; z-index: 2; padding: .5em;
}

#more-prods p{
    color: white;
    font-size: 1.3dvw;
    font-weight: bold;
    text-align: center;
}

.related-products {
    height: 93%;
    width: 35%;
    position: fixed;
    right: -20%;
    overflow: auto;
    transition: .5s;
    z-index: 3;
    backdrop-filter: blur(9px);
    background-color: rgba(255, 255, 255, .8);
    border-radius: 20px;
}

.related-products:hover{
    right: 0;
    background-color: rgba(0, 0, 0, .8);
}

#relatedProductsContainer{
    height: 75%; width: 100%; overflow: auto; position: absolute; top: 9%;
}

#relatedProductsContainer a{
 text-decoration: none; color: white;
}

#relatedProductsContainer a:hover{
    text-decoration: none; color: white; outline: 1px solid red;
}
   

.rel-prod{
    height: 46%;
    width: 92%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1em;
    transition: .5s;
    position: relative; font-size: 1rem; font-family: 'Courier New', Courier, monospace; color: white; line-height: 1.5em; word-spacing: 2px;
}

.rel-prod:hover{
    cursor: pointer;
    outline: 1px solid red;
}
.rel-prod:hover span{
    height: 100%;
}

.rel-prod p{
    background-color: yellow; color: black; font-weight: bold; padding: .1em; opacity: .2; font-size: 1.4dvw; position: absolute; top: 0; right: 5%;
}

.rel-prod ul{
    position: absolute; right: 1%; bottom: 1%; height: 80%; width: 45%; overflow: auto; opacity: .1; list-style-type: square; list-style-position: inside; font-family: 'Courier New', Courier, monospace;
}
.rel-prod ul li{
    font-size: 1rem; font-family: 'Courier New', Courier, monospace; color: white; line-height: 1.2em; word-spacing: 1px;
}
.rel-prod:hover p{
    opacity: 1;
}
.rel-prod:hover ul{
    opacity: 1;
}
.rel-prod span{
    height: 90%;
    width: 50%;
    position: absolute;
    left: 0;
    background-color: white;
}

.rel-prod span img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin: 0;
}


#addonsPapi{
    height: 40%;
    width: 50%;
    position: absolute;
    bottom: -20%;
    background-color: rgba(255, 255, 255, .8);
    display: grid;
    place-items: center;
    backdrop-filter: blur(5px);
    transition: .5s;
    border-radius: 20px;
    z-index: 1;
}

#addons{
    height: 90%;
    width: 100%;
    display: flex;
    justify-content: center safe;
    gap: 2%;
    align-items: center;
    overflow: auto;
    z-index: 2;
}

#addonsPapi:hover{
    bottom: -1%;
    background-color: rgba(0, 0, 0, .8);
}

.adds{
    height: 75%;
    width: 20%;
    flex: 0 0 27%;
    position: relative;
    left: 5%;
    top: 4%;
    cursor: pointer;
    transition: 1s;
    display: flex;
    justify-content: center;
    overflow: auto;
}

.adds:last-child{
    margin-right: 5rem;
}

.ad1{
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    position: absolute;
    left: 0;
}
.ad1 img{
    height: 90%; width: 63%;
    object-fit: contain;
    border-radius: 100%;
}

.adds img{
    height: 70%;
    background-color: white;
    object-fit: contain;  
}

.ad1 p{
    color: white;
    background-color: rgba(0, 0, 0, .4);
    font-weight: bold;
    font-size: 1rem;
    text-align: center;
    width: fit-content;
    padding: .3em 1em;
    position: absolute;
    bottom: 3%;
    border-radius: 5px;
}

.ad1:hover p{
    background-color: rgb(255, 0, 55); color: white;
}

.addsPrev{
    height: 100%;
    width: 50%;
    color: white;
    background-color: rgba(0, 0, 0, 0.74);
    position: absolute;
    right: 0;
    top: 0;
    overflow: auto;
    opacity: 0;
    text-align: center;
}

.adds:hover{
    background-color: black;
    transition: .1s ease-out;
    outline: 1px solid red;
}

/* .adds:hover p{
    background-color: red;
} */

#desktopRelatedProdButton {
    background-color: rgb(7, 199, 135);
    font-size: 2rem; text-align: center;
    height: 13%;
    width: 50%;
    border-radius: 100px;
    position: absolute; bottom: 1%;
    left: 26%;
    display: grid;
    place-items: center;
}

#desktopRelatedProdButton a{
    text-decoration: none;
    color: white;
    text-shadow: 2px 2px 2px black;
    width: 90%;
    height: 90%;
    text-align: center;
    display: grid;
    place-items: center;
}

#galleryParent{
    position: absolute;
    top: 0;
    width: 55%;
    height: 60%;
}
#gallery{
    height: 100%;
    width: 100%;
    display: flex;
    overflow-x: auto;
    background: linear-gradient(to right, rgba(0, 0, 0, .8) , rgba(0, 0, 0, .8) ,rgba(0, 0, 0, .6), rgba(0, 0, 0, 0.8) , rgba(0, 0, 0, 0.8));
    border-radius: 0 0 0 20px;
    backdrop-filter: blur(5px);
}
#gallery::-webkit-scrollbar-thumb{
    background-color: rgba(0, 0, 0, 0);
    cursor: grab;
    border-right: 2px solid aqua;
    border-left: 2px solid aqua;
    border-bottom: 1px solid aqua;
}
#gallery::-webkit-scrollbar-thumb:hover{
 background-color: aqua;
}

#g-tag{
    position: sticky;
    top: 2%;
    left: 2%;
    color: white;
    font-size: 1.9dvw;
    font-weight: bold;
}

#g-btag{
    position: absolute;
    bottom: 6%;
    left: 4%;
    color: white;
    font-weight: bold;
    font-size: 1.4dvw;
    letter-spacing: 3px;
}

#gallery::-webkit-scrollbar{
    opacity: .1;
}

#gallery-btn{
    height: 12%;
    width: 30%;
    position: absolute;
    bottom: -12%;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10%;
    background-color: rgba(0, 0, 0, 0.637);
    border-radius: 0 0 20px 20px;
}

#gallery-btn button{
    height: 90%;
    width: 20%;
    cursor: pointer;
    border-radius: 100%;
    background-color: rgba(0, 0, 0, 0.199);
}

#gallery-btn button img{
    height: 90%;
    width: 90%;
}

video {
    height: 100%;
    width: 100%;
    flex: 0 0 100%;
    border-radius: 10px;
}

.gals{
    height: 80%;
    width: 60%;
    flex: 0 0 60%;
    border-radius: 10px;
    position: relative;
    top: 7%;
    margin-left: 5em;
    margin-right: 9em;
    transition: .5s;
}

#gimage{
    margin-left: 5em;
    height: 80%;
    flex: 0 0 58%;
    background-color: white;
}
.gals img{
    height: 100%;
    width: 100%;
    border-radius: 5px;
}

.gals p{
    position: absolute;
    top: 38%;
    left: -23%;
    font-size: 2.5dvw;
    color: white;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background-color: rgb(255, 0, 55);
    padding: .5em;
    border-radius: 0 50px 50px 0;
}
#g-ThreeD{
    border-right: 1px solid pink;
    border-left: 1px solid pink;
}
#gvideo{
    height: 90%;
    top: 2%;
}

dialog{
    position: absolute; margin: auto;
    height: 90%;
    width: 50%;
    margin-left: auto; margin-right: auto;
    background-color: rgba(255, 255, 255, 0.863);
    backdrop-filter: blur(10px);
    color: white; border-style: none;
}
dialog::-webkit-scrollbar{
    display: none;
}
dialog#Notes #NotesContent::-webkit-scrollbar-thumb{
    display: none;
}
dialog#Notes #NotesContent{
    height: 90%; width: 100%; display: flex; flex-direction: column; justify-content: center safe; align-items: center; padding-top: 3em; overflow: auto;
}
dialog #NotesContent ul{
    width: 90%; font-family: sans-serif; font-size: 1.5rem; line-height: 1.5em; color: black;
}
dialog #NotesContent ul li{
    font-family: sans-serif; font-size: 1.5rem; line-height: 1.5em;
}
dialog #NotesContent ol{
    height: 70%; width: 90%; font-family: sans-serif; font-size: 1.5rem; line-height: 1.5em;
}
dialog #NotesContent ol li{
    display: flex; justify-content: center; align-items: center; gap: 15%; height: 50%; margin-bottom: 1em; width: 99%; border: 1px dotted white;
}
dialog #NotesContent ol li p{
    font-size: 1.3rem; font-weight: bold; background-color: black; padding: .5em; color: white; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; letter-spacing: 3px;
}
dialog #NotesContent ol li span{
    height: 100%; width: 50%;
}

dialog button{
    position: absolute;
    right: 0;
    top: 0;
    color: white;
    padding: .2em;
    background-color: red;
    height: 8%;
    width: 12%;
    font-size: 1.5dvw;
    cursor: pointer;
}

dialog::backdrop{
    background-color: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(1px);
}

#mobileHome{
    display: none;
}
#mobileSearch{
    display: none;
}
#searchBox{
    display: none;
}
#mContent{
    display: none;
}

#mobileBar{
    display: none;
}

#mobileProductTitle{
    display: none;
}

#Mrelated_prods{
    display: none;
}
#mobileRelated{
    display: none;
}
#mobileAddons{
    display: none;
}
#mBar{
    display: none;
}
#mobileGalleryCart{
    display: none;
}
#mobileAddedCart{
    display: none;
}
 
#gBtn{
    display: none;
}
::-webkit-scrollbar{
    background-color: rgba(0, 0, 0, .2);
}

::-webkit-scrollbar-thumb {
    background-color: aqua;
    border-radius: 30px;
}


@media(orientation: portrait){
    *{
        font-size: 5dvw;
    }
    
    #CArt{
        display: none;
    }
    body{
        background-image: url("../../Backgrounds/fave.avif");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    #mobileHome{
       display: flex; justify-content: center; align-items: center;
       height: 8%;
       width: 39%;
       position: fixed;
       top: 1%;
       left: 32%;
       border-radius: 10px;
       z-index: 6; box-shadow: 1px 1px 1px red;
    }
    
    #mobileHome a{
         height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; gap: 5%;  text-decoration: none; border-radius: 15px;
    }

    #mobileHome a div{
       height: 80%;
       width: 35%;
    }
    
    #mobileHome a div img{
       width: 100%;
       height: 100%;
       border-radius: 30px;
    }

    #mobileHome a p{
        font-size: 1.4rem; color: blue; letter-spacing: 2px; font-weight: bold;
    }

    #mobileSearch{
       display: initial;  position: fixed; top: 1%; right: 3%; height: 8%; width: 18%; background-color: silver; border-radius: 10px; z-index: 5;
    }
    #mobileSearch img{
        height: 100%; width: 100%; border-radius: 10px;
    }

    #searchBox{
        display: initial; position: fixed; top: -25%; height: 20%; width: 90%; border-bottom: 3px solid white; display: flex; justify-content: center; align-items: center; gap: 5%; background-color: rgba(255, 255, 255, 0.692); backdrop-filter: blur(10px); transition: .4s; z-index: 7;
    }
    #searchBox input{
        background-color: rgb(4, 4, 112); color: white; padding: .9em;  width: 60%; font-size: 1rem;
    }
    #searchBox button{
        background-color: red; color: white; padding: .5em; font-size: 1rem;
    }


    #home{
    display: none;
    }

   #Thanksforshopping{
     display: none;
   }

  .related-products{
    display: none;
   }

  .main{
    display: none;
  }


 #mContent{
    height: 99%;
    width: 99%;
    overflow: auto;
    display: block; position: relative;
 }

 #mContent::-webkit-scrollbar{
    display: none;
 }

 #mContent #mContentGallery{
    height: 53%; width: 100%; position: relative; top: 10%; display: flex; justify-content: center safe; align-items: center; overflow: auto;
 }
  #mContentGallery::-webkit-scrollbar{
    display: none;
 }

   .mGals{
    height: 85%; flex: 0 0 75%; border-radius: 10px; background-color: rgba(0, 0, 0, .5); backdrop-filter: blur(5px); transition: .4s; margin-left: 7%; position: relative;
  }

  .mGals:last-child{
     margin-right: 10%;
  }

  .mGals img{
    height: 100%; width: 100%; border-radius: 10px;
  }

  .mGals video{
    height: 100%; width: 100%; z-index: 2;
  }

   #mContent h1{
     background-color: yellow; color: black; position: relative; top: 12%; left: 5%; padding: .3em; width: fit-content;
   }

   #mContentSpecification{
     position: relative; height: 55%; width: 97%; top: 15%; border-radius: 0 40px 40px 0; background-color: rgba(0, 0, 0, .6); overflow: auto;
    }
    #mContentSpecification::-webkit-scrollbar-thumb{
        background-color: silver;
    }

   #mContentSpecification #mobileProductSpecs{
     height: 100%; width: 96%;  color: white; font-size: 1rem; padding: .6em 0 0 .4em; line-height: 1.9em;
   }

   #relatedProductsButton{
     height: 48%; width: 100%; position: relative; top: 11%; display: flex; justify-content: center; align-items: center;
   }

   #relatedProductsButton span{
     height: 100%; width: 100%;  display: flex; justify-content: center safe; align-items: center; gap: 5%; overflow: auto;
   }

   #relatedProductsButton span .relatedIMG{
      height: 80%; flex: 0 0 62%; background-color: white; position: relative; border-radius: 10px; border: 1px solid white;
   }

   .relatedIMG a{
     height: 100%; width: 100%; position: absolute;
   }

   .relatedIMG:first-child{
     margin-left: .9em;
   }

   .relatedIMG:last-child{
     margin-right: .9em;
   }

   .relatedIMG a img{
     height: 90%; width: 100%; border-radius: 10px;
   }

   .relatedIMG a p{
       position: absolute; bottom: 0; font-size: 1rem; background-color: rgba(0, 0, 0, 0.938); color: white; width: 100%; border-radius: 0 0 10px 10px; padding: .2em 0; text-align: center;
   }

   /* #relatedProductsButton p{
     position: absolute; top: 0; left: 0; font-size: 1.2rem; background-color: rgba(0, 0, 0, .7); color: yellow; padding: .2em; border-radius: 5px 0 0 5px; 
   } */

   #mobileAddons{
      position: relative; top: 10%; width: 100%; height: 80%; transition: .4s; display: flex; justify-content: center safe; align-items: center; background-color: rgba(0, 0, 0, 0.6);
   }

  #mobileAddons::-webkit-scrollbar{
     display: none;
   }

  #mobileAdsContainer{
    height: 100%; width: 100%; display: flex; flex-wrap: wrap; gap: 0; overflow: auto; position: relative; z-index: 1;
  }
  #mobileAdsContainer::-webkit-scrollbar{
    display: none;
  }

  #mobileAddons #recc-productMobile{
     position: absolute; top: -6%; left: 0; background-color: yellow; color: black; padding: .2em .5em; border-radius: 0 10px 10px 0; z-index: 2;
  }
  .mobileAds{
    height: 40%; flex: 0 0 50%; position: relative; background-color: white; margin: 0; outline: 1px solid black;
  }

  .mobileAds a{
    padding: 0; margin: 0; height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;
  }

  .mobileAds img{
    height: 75%; width: 98%; position: absolute; top: 0;
  }

  .mobileAds p{
    position: absolute; bottom: 0; background-color: white; color: black; border-radius: 5px; padding: .1em .3em; font-weight: bold; font-size: 1rem;
  }

  #mobileAddedCart{
    position: fixed; bottom: 2%; right: 2%; background-color: green; border-radius: 5px; z-index: 3; padding: .5em; box-shadow: 2px 2px 2px black; width: 50%; height: 10%; display: flex; justify-content: center; align-items: center;
  }

  #mobileAddedCart #mobileAddedCartPrice{
    height: 110%; width: 100%; position: absolute; top: -110%; background-color: rgba(255, 0, 0, 0.705); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6%;
  }

  #mobileAddedCartIMG{
    position: absolute; top: 0; left: 2%; height: 100%; width: 40%; display: flex; justify-content: center; align-items: center;
  }
  #mobileAddedCartIMG img{
    height: 90%; width: 100%;
  }

  #mobileAddedCart p{
    position: absolute; right: 1%; color: white;
  }


  #mobileRelated{
    display: initial; position: fixed; top: 10%; right: -80%; height: 80%; width: 75%; background-color: rgba(202, 0, 0, 0.788); transition: .4s; z-index: 7; overflow: auto; align-content: center; outline: 1px solid white;
   }

   #mobileRelated::-webkit-scrollbar{
       display: none;
    }

    #mobileRelatedContainer{
        height: 85%; width: 100%; overflow: auto; position: relative; top: -6%;
    }

    #mobileRelatedContainer::-webkit-scrollbar-thumb{
        background-color: white;
    }

    #mobileRelatedContainer .mobileRels a{
       height: 100%; text-decoration: none; display: flex; flex-direction: column; justify-content: center; align-items: center;
    }
    #mobileRelatedContainer .mobileRels{
        position: relative; left: 6%; width: 87%; height: 47%; border-radius: 5px; border: 1px solid yellow; margin-bottom: 1em; backdrop-filter: blur(10px); overflow: clip; 
   }
   .mobileRels a span{
        height: 80%; width: 100%; position: absolute; top: 0;
   }
   .mobileRels span img{
        height: 100%; width: 100%;
   }
   .mobileRels p{
        position: absolute; bottom: 0; background-color: black; padding: .2em; color: white; z-index: 2; height: 15%; width: 98%; overflow: clip; font-size: .8rem; text-align: center;
   }
   #mobileRelated button{
     background-color: green; color: white; padding: .3em; position: absolute; left: 35%; bottom: 1%; border-radius: 10px; font-size: 1.5rem;
      display: grid; place-items: center;
   }
  #mobileCover{
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, .4);
    backdrop-filter: blur(3px);
    z-index: 6;
    display: none;
  }

  /* #mobileGalleryCart{
   display: initial; position: fixed; left: -60%; bottom: 5%; height: 50%; width: 60%; background-color: rgba(255, 255, 255, 0.7); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 7%; transition: .4s; z-index: 5;
  }

  #mobileGalleryCart button{
    background-color: green; color: white; padding: .1em;
  }
  dialog{
    height: 80%; width: 95%; top: 10%; left: 5%; border-style: unset;
 }
 dialog::-webkit-scrollbar{
    display: none;
 }
 dialog #MobileNotesContent{
    height: 99%; position: relative; overflow: auto; 
 }
 #MobileNotesContent::-webkit-scrollbar{
    display: none;
 }
 dialog #MobileNotesContent ul{
    width: 90%; font-size: 1.2rem; line-height: 1.5em; padding-left: .5em;
}
dialog #MobileNotesContent ul li{
    font-family: 'Courier New', Courier, monospace; font-size: 1.2rem; line-height: 1.3em;
}
dialog #MobileNotesContent ol{
    height: 70%; width: 100%;
}
dialog #MobileNotesContent ol li{
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 15%; height: 70%; margin-bottom: 1em; width: 99%; border: 1px dotted white; position: relative;
}
dialog #MobileNotesContent ol li p{
    font-size: 1.3rem; font-weight: bold; background-color: black; padding: .5em; color: white; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; letter-spacing: 3px; position: absolute; top: 1%; left: 0;
}
 dialog #MobileNotesContent ol li span{
    height: 70%; width: 60%; position: absolute; right: 1%; bottom: 0;
 }

 dialog button{
    position: absolute;
    top: 0;
    right: 0;
    font-size: 2rem;
    height: 10%;
    width: 13%;
    z-index: 2;
 }
 */

}