*, *::before, *::after{box-sizing:border-box;margin: 0;padding: 0; font-family: "Arial", sans-serif;}


html{
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    width: 100%;
     min-height: 100vh;
     /* border: 4px solid red; */
} 

body {
    display: flex;
    justify-content: flex-start;align-items: flex-start;flex-direction: column;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(45deg, rgba(4, 200, 254, 0.8), rgba(46, 4, 254, 0.8), rgba(4, 4, 254, 0.8), rgba(4, 200, 254, 0.8));  
    padding: 0;
    margin:0;
    background-size: cover; 
    background-position: center;  
    background-repeat: no-repeat; 
    overflow-x: hidden;
    width: 100%;
    min-height: 100vh;
    scroll-behavior: smooth;
/* border: 4px solid black;  */
}





/* HAMBURGER MENU START */ /* HAMBURGER MENU START */  /* HAMBURGER MENU START */

 #menu { /*BURGER DROPDOWN MENU BTUTTON MAIN WRAPPER*/
      display:flex;justify-content: flex-end;align-items: center; 
      /* position: fixed; */
      color: white;
       cursor: pointer;
       margin-top: 0%;
       width:auto;height:auto;
       margin-left: 0vw;
       /* border:4px solid green; */
    } 

#menu .theme-btn {/*BTUTTON SECOND WRAPPER*/
        display:flex;justify-content: center;flex-wrap: nowrap;
        /* border:6px solid red; */
    }

.first__element_embed {/*BTUTTON THIRD CLASS WRAPPER*/
display: flex;justify-content:center;flex-direction:row;align-self:baseline;
    position:fixed;/*;*//*absolute;*/
    width:7%;height: auto;
    top: 0.3rem;
    right:0.5rem;
    z-index: 6000;
    color: red;
    transition: 1s;
    /* box-shadow: 1px 1px 4px 4px rgb(224, 2, 248), 1px 1px 4px 4px rgb(224, 2, 248); */
    box-shadow: 1px 1px 4px 4px rgb(2, 248, 47), 1px 1px 4px 4px rgb(2, 248, 47);
    border:4px solid red;
}

.first__element_embed:hover {
/* box-shadow: 1px 1px 4px 4px red, 1px 1px 4px 4px red; */
box-shadow: 1px 1px 9px 9px red;
 border:4px solid lime;
}

.dropbtn svg {
    display: flex;justify-content: center;align-items: center;
    width: 28px;
    height: 28px;
    cursor: pointer;
    background: blue;
    color: white;
    font-weight: bold;
    outline: none;
    }

/* START MAIN BACKGROUND LAYER */

.overlay2 {
  display: none;
  justify-content: center;
  align-items: flex-start;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  margin: 0;
  right: 0;
  padding: 0;
  background-color: rgba(0, 0, 255, 1);
  opacity: 0;
  transition: opacity 1s ease-in-out;
  /* border: 6px solid black; */
}

/* Visible state */
.overlay2.show {
  display: flex;
  opacity: 1;
  /* z-index: 3000; */
}

/* Hidden fade-out (optional if you want smoother closing) */
.overlay2.hide {
  opacity: 0;
}

.overlay-content2 {
  display:flex;justify-content:flex-start;flex-direction:row;
  align-items:flex-start;flex-wrap: wrap;
  position:fixed;
  overflow-y: auto;
  width:100%;
  height:auto;
  margin:0;
  /* border: 4px solid red; */
}

/* END MAIN BACKGROUND LAYER */

.overlay-content2 .closebtn2 {
  display: flex;justify-content:space-between;align-items: center;
  position: relative;width:100%;height:auto;margin-top: 0px;
  padding: 0px;
  margin-bottom: 0.5em;
  padding-left: 4px;
  padding-right: 4px;
  text-decoration: none;
  z-index: 20;
  border:2px solid transparent;
   /* border: 4px solid red; */
}

 #drop__down-times2 {
  display: flex;justify-content:center;align-items: center;text-align: center;
  position: relative;
  width: 10px;height: 10px;
  font-size: 20px;
  /* color:black; */
  margin-top: 0.5em;
  margin-right: 0.5em;
  margin-left: 0.5em;
  /* border:2px solid orange; */
}

 #drop__down-items2 {
  display: flex;justify-content:center;align-items: center;text-align: center;
  width: auto;height: auto;padding-top: 2px;
  font-size: clamp(1.3rem, 2vw, 1.5rem);color:blue;font-weight: bold;
  /* border:2px solid orange; */
}
/* START OF ALL ITEM BUTTONS HAMBURGER MENU */
.list-group-wrap {
    display: flex;justify-content: flex-start;align-items: flex-start; flex-direction: row;flex-wrap: wrap;
    top: 0;
    width: 100%;
    height: auto;
    /* border: 3px solid maroon; */
}

/* START OF MAIN ITEM BUTTONS HAMBURGER MENU */

.list-group-subwrap {
    display: flex;justify-content: flex-start;align-items:baseline;flex-direction: row;flex-wrap: wrap;
    gap: 3px;
    width: 100%;
    max-height: 17vh;
    /* height: auto; */
    overflow-y: auto;
    border: 3px solid transparent;
}

.list-group-item {
    display: flex;justify-content:center;align-items: baseline;flex-direction: row;flex-wrap: wrap;
    width: auto;
   /* border: 3px solid violet; */

}

.list-group-item a {
    display: block;
    width: 100%;
    height: 100%;
    color: red;  
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 18px;
    font-weight: bold;
    transition: 0.6s ease-in-out;      
    text-decoration: none; 
    background: linear-gradient(45deg,  rgb(163, 250, 2), rgb(254, 187, 4),  rgb(254, 187, 4));
    border: 3px solid white; 
    border-radius: 20px;
    }

.list-group-item a:hover {
    background-color: #06f239; 
    color: blue;
    cursor: pointer;
    border: 3px solid lime; 
}

/* ENF OF MAIN ITEM BUTTONS HAMBURGER MENU */


/* START OF SUB ITEM BUTTONS HAMBURGER MENU */
.list-group-subitem {
    display: flex;justify-content:flex-start;align-items: baseline;  flex-direction: row;flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    min-height: auto;
    max-height: 80vh;
    overflow-y: auto;
    padding: 4px;
    border-top: 4px solid lime;
    border-bottom: 4px solid lime;
    /* border:4px solid red; */
}

.list-group-underitem {
    display: flex;justify-content:space-between;align-items: baseline;  flex-direction: row;flex-wrap: wrap;
    width: auto;
    text-decoration: none; 
    list-style: none; 
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 1px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 4px;
    padding-bottom: 4px;
    color: blue;
    transition: 1s;
    background: linear-gradient(45deg, rgb(254, 187, 4),  rgb(254, 187, 4), rgb(163, 250, 2));
    border: 3px solid white; 
    border-radius: 20px;
    }

.list-group-underitem:hover {
  cursor: pointer;
    color: rgb(252, 4, 198);
     transition: 1s;
    background: linear-gradient(45deg,  rgb(2, 151, 250), rgb(27, 243, 3),  rgb(27, 243, 3));
    /* border:3px solid red; */
}

.dropdown-float-right {
    padding: 4px;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    margin-left: 0.3em;
    color: red;
    /* border-bottom:3px solid red; */
    box-shadow: 1px 1px 4px 5px rgb(43, 0, 255);
    border-radius: 10px;
}

/* END OF SUB ITEM BUTTONS HAMBURGER MENU */

.add-photo-wrap {
    display: flex;justify-content: space-around;align-items: baseline;flex-direction: row;flex-wrap: wrap;
    width: 100%;
    /* border: 2px solid red; */
}

.list-group-add {
    margin-top: 0.4em;
    box-shadow: 1px 1px 8px 8px rgb(252, 250, 252), 1px 1px 6px 6px rgb(246, 245, 247);
}

.list-group-add {
    display: flex;justify-content: center;
    font-size: 23px;
    text-decoration: none; 
    padding: 6px;
    font-weight: bold;
    color: blue;
    transition: 0.6s ease-in-out;
    background: #32eb0d;
    border: 2px solid red; border-radius: 10px;
}

.list-group-add:hover {
    color: red;
    background: #7ff509;
}

/* HAMBURGER MENU END */ /* HAMBURGER MENU END */ /* HAMBURGER MENU END */

@media (max-width: 900px) {
   .list-group-subitem {
    max-height: 45vh;
}

}

@media (max-width: 600px) {
   .list-group-subitem {
    max-height: 72vh;
}

}