body {background-color:white;
    margin: 0;
    padding-bottom: 5vw;
    font-family: "Quicksand", sans-serif;
    position: relative;
    overflow-x: hidden; 
}
::-ms-input-placeholder { /* Edge 12-18 */
  color: blue;height:8px;
}
.neonderthaw-regular {
  font-family: "Neonderthaw", cursive;
  font-weight: 400;
  font-style: normal;
}

textarea::placeholder {
  font-size: 20px;
}
textarea{
  font-size: 20px;   
}

.tinynote{
    font-size:1.5vw;
}

.sched{
    text-align:left;
    position:absolute;
    bottom:10px;
    float:right;
    left:10px;
}
.sched1{
    text-align:right;
    position:absolute;
    bottom:10px;
    float:right;
    right:10px;
}

.schedlist{
    text-align:left;
    position:relative;
    margin-left:4vw;
    top:1vw;
    font-size:4vh;
    height:4vh;
}
.timerlist{
    text-align:left;
    position:relative;
    margin-left:4vw;
    top:1vw;
    font-size:4vw;
    color:blue;
}
#divone, #divtwo {
            display: none;
        }

 .flag{
position:fixed;
top: 3vw;
margin-top:4.5vw;
width:16.5vw;
height:11vw;
margin-left:3.5vw;
}
        
/* Prevent text cursor on hover */
.no-text-cursor:hover {
    cursor: default;
}
/* Apply this style to elements where you want to prevent the text cursor */
.no-text-cursor {
    cursor: default;
}

/* Or, if you want to apply it to all text elements */
p, span, div, a {
    cursor: default;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('img/garden.png'); /* Replace with your image URL */
    background-size: cover; /* Ensure the background image covers the viewport */
    background-position: center 10vw; /* Center the image horizontally, align top vertically */
    background-repeat: repeat-y; /* Repeat vertically */
    
    z-index: -1;
    pointer-events: none;
}



body.fullscreen-mode {
    /* Adjust for the status bar on iPad */
    padding-top: 20px; /* Adjust this value as needed */
    height: calc(100vh - 20px); /* Adjust this value as needed */
}

.moon-dance-regular {
  font-family: "Moon Dance", cursive;
  font-weight: 400;
  font-style: normal;
}
.anchor{
    color:black;
    
    font-size:5vw;
    padding-top:10vh;
      height:8vw;
  float:left;
  width:100%;
  position:relative;
margin-top:10vh;
}
.toppoff:after{
 content: "";
            display: table;
            clear: both;
}
.topper{
float:left;
width:45.75vw;
position:relative;
top:0vw;
left:4.25vw;
}

.topper2{
float:right;
width:45.75vw;
position:relative;
top:0vw;
right:4.25vw;
}

.icon1, .icon2, .icon3, .icon4 {
    position: absolute;
    top: 25%; /* This will vertically align the icons */
    transform: translateY(-25%); /* This will ensure the icons stay centered vertically */
    height: 3.1vw;
}

.icon1 {
    right: 5vw;
}

.icon2 {
    right: 15vw;
}

.icon3 {
    right: 25vw;
}

.icon4 {
    right: 35vw;
}

.iconimg {
    height: 3vw;
    width: 3vw;
    -webkit-box-reflect: below 0vw linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.6)); /* Adjusting reflection position */
}

/* Additional styles for hovering effects, shadows, etc. */
#addon, #totop, #expand, #collapse, #up, #down {
    -webkit-box-reflect: below 0vw linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0));
    transform: skewY(4deg);
}

#totop:hover, #down:hover, #up:hover, #collapse:hover, #expand:hover, #addon:hover {
    font-weight: bold;
}





html{
     font-family: "Quicksand", sans-serif; 
}


.dropbtn1, .dropbtn12, .dropbtn2, .dropbtn21, .dropbtn3 {
  background-color: #00026b;
  color: white;
 
 text-align:center;
z-index:1;
  border: none;
  position: fixed;
  width: 26vw;
  top: 0;
  height:7.2vw;
  font-family: "Quicksand", sans-serif;
  margin:auto;z-index:2;
}
.dropbtn1 {
  background-color: #00026b;
  left: 50vw; width: 16.7vw;z-index:90;
}
#btn1{
font-size: 4vw; height:0vw;position:relative;  bottom:3.4vw;
-webkit-box-reflect: below 0vw linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.1));
}
.dropbtn12 {
  background-color: #0a5400;
  left: 66.67vw; width: 16.7vw;z-index:90;
}
#btn12{
font-size: 4vw; height:0vw;position:relative;  bottom:3.4vw; 
-webkit-box-reflect: below 0vw linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.1));
}

.dropbtn3 {
  background-color: #5c0501;
  left: 83.32vw;  width: 16.7vw;z-index:90;
}
#btn3{
     
font-size: 4vw; height:0vw;position:relative;  bottom:3.4vw; 
-webkit-box-reflect: below 0vw linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.3));
}
.drbt{
  background-color: #00026b;
  color: white;
 
 text-align:center;

  border: none;
  position: fixed;
  width: 26vw;
  top: 0;
  height:7.2vw;
  font-family: "Quicksand", sans-serif;
  z-index:2000; 
      perspective: 50px;
  background-color: transparent;
  left:0; width: 25.1vw;z-index:13;
}
.drbt2{
  background-color: #00026b;
  color: white;
 
 text-align:center;

  border: none;
  position: fixed;
  width: 26vw;
  top: 0;
  height:7.2vw;
  font-family: "Quicksand", sans-serif;
  z-index:2000; 
      perspective: 50px;
  background-color: transparent;
  left:25vw; width: 25.1vw;z-index:13;
}
.dropbtn2 {
    perspective: 50px;
  background-color: black;
  left:25vw; 
}

#btn2{
      transform-style: preserve-3d;
  transform: rotateY(-10deg);
width:25vw;position:fixed;left:0vw;font-size:3vw;height:3.1vw;top:-0.5vw;z-index:2000;color:white;
   -webkit-box-reflect: below 0.1vw linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.3));
}

.dropbtn21 {
    perspective: 50px;
  background-color: black;
  left: 0vw; 
}
#btn21{
    transform-style: preserve-3d;
  transform: rotateY(10deg);
width:25vw;position:fixed;left:0vw;font-size:3vw;height:3.1vw;top:-0.5vw;z-index:2000;color:white;
   -webkit-box-reflect: below 0.1vw linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.3));
}



.dropdown {
  position: relative;
  display: inline-block;
  font-family: "Quicksand", sans-serif;
}
.dropdown-content1 {
  font-size: 3vw;
  display: none;
  position: fixed;
  background-color: black;
  color: white;
  min-width: 25vw;
  z-index: 33300;
  top: 7.2vw;
  left: 0vw;
  width: 25vw;
  height: 80vh;
  overflow-y: auto;
}

.dropdown-content1 a {
  color: white;
  padding: 0.5vh 1vh;
  text-decoration: none;
  display: block;
}

.dropdown-content1 a:hover {
  background-color: #0703fc;
}

.dropdown-content2 {
  font-size: 3vw;
  display: none;
  position: fixed;
  background-color: black;
  color: white;
  min-width: 25vw;
  z-index: 33300;
  top: 7.2vw;
  left: 25vw;
  width: 25vw;
  height: 80vh;
  overflow-y: auto;
}

.dropdown-content2 a {
  color: white;
  padding: 0.5vh 1vh;
  text-decoration: none;
  display: block;
}

.dropdown-content2 a:hover {
  background-color: #0703fc;
}
#door{
    height:7vw;
    position:fixed;
    top:0vw;
    left:48.5vw;
    z-index:1990;
}
#lantern{
    width:3vw;
    position:fixed;
    top:0vw;
    left:48.5vw;
    z-index:10001;
}
#eiffel{
    height:5vw;
    position:fixed;
    top:.1vw;
    left:22.5vw;
    z-index:11;
    opacity:1;
}
@keyframes rotateColors {
    0% {
        background-image: conic-gradient(black, black, #00a108, black, black); /* Blue */
    }
    25% {
        background-image: conic-gradient(black, black, #018a8f, black, black); /* Yellow */
    }
    50% {
        background-image: conic-gradient(black, black, #020ef2, black, black); /* Green */
    }
    75% {
        background-image: conic-gradient(black, black, #560187, black, black); /* Neon */
    }
    100% {
        background-image: conic-gradient(black, black, #800101, black, black); /* Dark Blue */
    }
}

#div0 {
    position: fixed;  
    top: 7vw;
    text-align: center;
    width: 100vw;
    left: 0vw;
    height: 10vw;
    font-family: "Moon Dance", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 4.5vh;
    background-color: black;
    color: white;
    z-index: 1000;

    animation: rotateColors 50s infinite; /* Apply the rotating gradient */
}



#shad {
    text-align: left;
    font-family: "Moon Dance", cursive;
    font-weight: 400;
    font-style: normal;
    position: fixed;
    height: 6vw;
    color: white;
    margin: auto;
    font-size: 5vw;
    text-align: center;
    width: 25vw;
    left: 0vw;
    top: 7vw;
    color: #fff;
    -webkit-box-reflect: below 0vw linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.3));
    animation: neonRotate 50s infinite;
}


/* Keyframes for rotating neon colors */
@keyframes neonRotate {
    0% {
        text-shadow:
            0 0 7px #fff,
            0 0 10px #fff,
            0 0 21px #4deeea, /* blue */
            0 0 42px #4deeea,
            0 0 82px #4deeea,
            0 0 92px #4deeea,
            0 0 102px #4deeea,
            0 0 151px #4deeea;
    }
    25% {
        text-shadow:
            0 0 7px #fff,
            0 0 10px #fff,
            0 0 21px #74ee15, /* yellow */
            0 0 42px #74ee15,
            0 0 82px #74ee15,
            0 0 92px #74ee15,
            0 0 102px #74ee15,
            0 0 151px #74ee15;
    }
    50% {
        text-shadow:
            0 0 7px #fff,
            0 0 10px #fff,
            0 0 21px #ffe700, /* green */
            0 0 42px #ffe700,
            0 0 82px #ffe700,
            0 0 92px #ffe700,
            0 0 102px #ffe700,
            0 0 151px #ffe700;
    }
    75% {
        text-shadow:
            0 0 7px #fff,
            0 0 10px #fff,
            0 0 21px #f000ff, /* neon purple */
            0 0 42px #f000ff,
            0 0 82px #f000ff,
            0 0 92px #f000ff,
            0 0 102px #f000ff,
            0 0 151px #f000ff;
    }
    100% {
        text-shadow:
            0 0 7px #fff,
            0 0 10px #fff,
            0 0 21px #001eff, /* dark blue */
            0 0 42px #001eff,
            0 0 82px #001eff,
            0 0 92px #001eff,
            0 0 102px #001eff,
            0 0 151px #001eff;
    }
}


#fadeInImage1{
    position:fixed;
    height:auto;
    width:10vw;
    left:45vw;
    top:5vw;
    z-index:1001;
     -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0)65%, rgba(0,0,0,.3));
}

#fadeInImage {
    position: fixed;
    height: 7vw;
    width: auto;
    left: 44vw;
    top: 7vw;
     -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0)20%, rgba(0,0,0,.3));
}



/* Initially hide the image */
.fade-in-image {
    opacity: 0;
    transition: opacity 8s ease-in; /* 15 seconds fade-in effect */
}

/* Add this class to trigger the fade-in */
.fade-in-image.visible {
    opacity: 1;
}
/* Initially hide the image */
.fade-in-image1 {
    opacity: 0;
    transition: opacity 15s ease-in; /* 15 seconds fade-in effect */
}

/* Add this class to trigger the fade-in */
.fade-in-image1.visible {
    opacity: 1;
}
#totop{
    position:fixed;
    height:3vw;
    width:3vw;
    right:5vw;
    top:10vw;
      -webkit-box-reflect: below 0.1vw linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.6));
}
#expand{
    position:fixed;
    height:3vw;
    width:3vw;
    right:15vw;
    top:10vw;
      -webkit-box-reflect: below 0.1vw linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.6));
}
#collapse{
    display:none;
    position:fixed;
    height:3vw;
    width:3vw;
    right:15vw;
    top:10vw;
      -webkit-box-reflect: below 0.1vw linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.6));
}

#up{
    position:fixed;
    height:3vw;
    width:3vw;
    right:25vw;
    top:10vw;
      -webkit-box-reflect: below 0.1vw linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.6));
}

#down{
    display:none;
    position:fixed;
    height:3vw;
    width:3vw;
    right:25vw;
    top:10vw;
      -webkit-box-reflect: below 0.1vw linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.6));
}
#addon{
    position:fixed;
    height:3vw;
    width:3vw;
    right:35vw;
    top:10vw;
      -webkit-box-reflect: below 0.1vw linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.6));
}



.hidei {
  display: none;position:fixed;top:15vw;text-align:center;z-index:1400;font-size:1.5vw;width:15vw;right:0vw;font-family: "Quicksand", sans-serif;
}
.myDivi:hover + .hidei {
  display: block;
  color: white;
}


.hideii {
  display: none;position:fixed;top: 15vw;text-align:center;z-index:1400;font-size:1.5vw;width:15vw;right:10vw;font-family: "Quicksand", sans-serif;
}
.myDivii:hover + .hideii {
  display: block;
  color: white;
}


.hideiii {
  display: none;position:fixed;top:15vw;text-align:center;z-index:1400;font-size:1.5vw;width:15vw;right:20vw;font-family: "Quicksand", sans-serif;
}
.myDiviii:hover + .hideiii {
  display: block;
  color: white;
}

#flashon{
    position:relative;
    margin-top:-2vh;
padding-top:2vh;
}

.hideiiii {
  display: none;position:fixed;top:15vw;text-align:center;z-index:1400;font-size:1.5vw;width:15vw;right:30vw;font-family: "Quicksand", sans-serif;
}
.myDiviiii:hover + .hideiiii {
  display: block;
  color: white;
}

#console {
    display: flex; /* Ensure initial display is flex */
    z-index: 100;
    font-size: 4vw;
    width: 100vw;
   min-height:15vw;
    background-color: white;
    opacity: 1;
    position: fixed;
    top: 17vw;
    padding-bottom: 0vw;
    padding-left:25vw;
    background-image: url('img/garden.png'); /* Replace with your image URL */
    background-size: cover; /* Ensure the background image covers the viewport */
    background-position: center -7vw; /* Center the image horizontally, align top vertically */
    background-repeat: repeat-y; /* Repeat vertically */
    padding-top:0vw; /* Use vh for padding */
    box-sizing: border-box; /* Ensure padding is included in the height calculation */
    justify-content: space-between; /* Distribute space between items */
    align-items: flex-start; /* Align items to the start of the container */
}





#divx, #div1, #div2, #div3 {
        transform: scale(0.75); /* Scale the radio buttons down */
    transform-origin: center; /* Ensure scaling happens from the center */
    margin-right: 0.5em; /* Adjust margin if needed */
    position:fixed;
    width: 25vw;
    font-size: 2.5vw;
    z-index: 4;
    font-family: "Quicksand", sans-serif;
    padding-bottom: 0vw;
    padding-top: 0vh;
    height: auto;
     padding-left:0vw;
}
#divx{
    left:0vw;width: 25vw;
}
#div1{
    left:25vw;width: 25vw;
}
#div2{
    left:50vw;width: 25vw;
}
#div3{
    left:75vw;width: 25vw;
}

.imgs{
    display:none;
}
.nouns
{
    font-size:2vw;
}

.divhead{
    background-color:#109401;
    text-align:center;
    font-size:1.5vw;
    font-weight:bold;
    width:100%;
    color:#eee;
}
a{
    text-decoration:none;
    color:black;
}

#myList {
    list-style-type: none; /* Remove bullets */
    padding: 0;
    margin: 0;
    white-space: normal; /* Allow wrapping */
}

#myList li {
    display: inline-block; /* Display items inline but allow wrapping */
    margin-right: 1em; /* Add some spacing between items */
    white-space: nowrap; /* Prevent line breaks within items */
}





ul {
    list-style-type: none; /* Removes bullets */
    padding: 0; /* Removes default padding */
    margin: 0; /* Removes default margin */
}

        
        
#txtHint{
  transition: margin-top 0.5s ease;
    font-size:4vw;top:0vh;
}

.div-list{
width:91vw;
    top:0vh;
    margin-left:4.5vw;
    
}
#quotebox{
position:relative;
top:50vh;
width:92vw;
left:4vw; 
font-size:3vw;
font-weight:bold;
text-align:center;
z-index:3;
  text-align: justify;
  text-justify: inter-word;
}

.audi{
    background-color:yellow;
    padding: .5vw 1vw;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  top:-2vw;
  font-weight:bold;
 
  z-index:999999999;
}
.audi1{
    background-color:lime;
    padding: .5vw 1vw;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  top:-2vw;
  font-weight:bold;

    z-index:999999999;
}



.audio{
  display:none;
}

audio{
  display:none;
}

.grow:hover{
      
    height:40vw;
    z-index:6;
    padding:5px;
}
.flipimg{
   width: 14.9vw;
  height: 14.9vw;
}
.cam{
    position:absolute;
    right:5%;
    bottom:5%;
    width:2vw;
    height:auto;
}
.flip-card {
  background-color: transparent;
  width: 14.9vw;
  margin-top:2vw;
  margin-right:4.25vw;
  margin-bottom:2.25vh;
  height: 14.9vw;
  perspective: 1000px;
  position:relative;
  float:left;
  word-wrap: normal;text-align: center;
  left:4.25vw;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  word-wrap: normal;
   text-align: center;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  word-wrap: normal;
  text-align: center;
}


.flip-card-front {
  background-color: #200138;
  color: white;
  font-size:2vw;
word-wrap: normal;
  text-align:center;

}

.flip-card-back {
  background-color: #014505;
  color: white;
  transform: rotateY(180deg);
    font-size:2vw;
word-wrap: normal;
  text-align:center;
}

.flip-card-front:text{
    top:50px;
    text-align: center;
}

.flip-card-back:text{
    top:50px;
    text-align: center;
}


.timer{
    font-size:1.5vw;position:absolute;top:1vw;width:100%;text-align:center;margin-left:-10px;color:white;z-index:0;
}

.flip-card2 {
    position:relative;
  background-color: transparent;
  width: 21.25vw;
  margin-top: 2vw;
  margin-right: 3vw;
  margin-bottom: 1vh;
  height:21.25vw;
  perspective: 1000px;
  position: relative;
  float: left;
  word-wrap: normal;
  text-align: center;
  left: 3vw;
  box-sizing: border-box;
}

.flip-card2-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  word-wrap: normal;
  text-align: center;
  box-sizing: border-box;
}

.flip-card2:hover .flip-card2-inner {
  transform: rotateY(180deg);
}

.flip-card2-front, .flip-card2-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  word-wrap: normal;
  text-align: center;
  padding: 10px; /* Adjust padding as needed */
  box-sizing: border-box;
}

.flip-card2-front {
  background-color: #200138;
  color: white;
  font-size: .55em;
}

.flip-card2-back {
  background-color: #014505;
  color: white;
  transform: rotateY(180deg);
  font-size: .55em;
}

.flip-card2-frontp, .flip-card2-backp {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  word-wrap: normal;
  text-align: center;
  padding-top:10px;
  padding: 10px; /* Adjust padding as needed */
  padding-top:20px;
  box-sizing: border-box;
}

.flip-card2-frontp {
  background-color: #200138;
  color: white;
  font-size: .4em;
}

.flip-card2-backp {
  background-color: #014505;
  color: white;
  transform: rotateY(180deg);
  font-size: .4em;
}

.container {
  background-color: transparent;
  width: 10vw;
  margin-right:4vw;
  margin-bottom:4vw;
  height: 10vw;
  perspective: 1000px;
  position:relative;
  float:left;
}

.imaget {
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
    top: -3vw;
  bottom: 0;
  left: 0;
  right: 0;

    background-color: #200138;
  color: white;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #014505;
  color: white;
}

.container:hover .overlay {
  opacity: 1;
}



@media only screen and (max-device-width: 1170px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
    body {
        font-size: 5vw;
    }
.flip-card {
  background-color: transparent;
  width: 27.6vw;
  margin-top:5vw;
  margin-right:4.25vw;
  margin-bottom:2.25vh;
  height: 27.6vw;
  perspective: 1000px;
  position:relative;
  float:left;
  word-wrap: normal;text-align: center;
  left:4.25vw;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  word-wrap: normal;
   text-align: center;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  word-wrap: normal;
  text-align: center;
}


.flip-card-front {
  background-color: #200138;
  color: white;
  font-size:.8em;
word-wrap: normal;
  text-align:center;

}

.flip-card-back {
  background-color: #014505;
  color: white;
  transform: rotateY(180deg);
    font-size:.8em;
word-wrap: normal;
  text-align:center;
}

.flip-card-front:text{
    top:50px;
    text-align: center;
}

.flip-card-back:text{
    top:50px;
    text-align: center;
}
.timer{
    font-size:3vw;
    position:absolute;
    top:1vw;
    width:100%;
    text-align:center;
    margin-left:-10px;
    color:white;
}
.flip-card2 {
    position:relative;
  background-color: transparent;
  width: 45.5vw;
  margin-top: 3vw;
  margin-right: 3vw;
  margin-bottom: 1vh;
  height:45.5vw;
  perspective: 1000px;
  position: relative;
  float: left;
  word-wrap: normal;
  text-align: center;
  left: 3vw;
  box-sizing: border-box;
}

.flip-card2-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  word-wrap: normal;
  text-align: center;
  box-sizing: border-box;
}

.flip-card2:hover .flip-card2-inner {
  transform: rotateY(180deg);
}

.flip-card2-front, .flip-card2-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  word-wrap: normal;
  text-align: center;
  padding: 10px; /* Adjust padding as needed */
  box-sizing: border-box;
}

.flip-card2-front {
  background-color: #200138;
  color: white;
  font-size: 1em;
}

.flip-card2-back {
  background-color: #014505;
  color: white;
  transform: rotateY(180deg);
  font-size: 1em;
}

.flip-card2-frontp, .flip-card2-backp {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  word-wrap: normal;
  text-align: center;
  padding: 10px; /* Adjust padding as needed */
  box-sizing: border-box;
}

.flip-card2-frontp {
  background-color: #200138;
  color: white;
  font-size: .8em;
}

.flip-card2-backp {
  background-color: #014505;
  color: white;
  transform: rotateY(180deg);
  font-size: .8em;
}
}



.anchor{
    color:black;
    margin-left:4.25vw;
    font-size:5vw;
    padding-top:4vh;
    position:relative;
    float:left;
    justify-content:start;
    margin-top:.1vh;
  margin-bottom:.1vw;
}
.headline{
    text-transform: capitalize;
padding-bottom:3vh;
  font-size: 4vw;
  height:0vw;
  float:left;
  width:100%;
font-weight:bold;
top:0vw;
  position:relative;

  text-align:center;
}
.headlinecog{
    text-transform: capitalize;
padding-top:0vh;
  font-size: 4vw;
  height:4vh;
  float:left;
  width:100%;
font-weight:bold;

  position:relative;
  justify-content:start;
  margin-top:4vh;
  margin-bottom:0vw;
}
.headlinor{
    
font-weight:bold;
  font-size: 2vw;
  height:auto;
  margin-top:2vw;
  float:left;
  width:90%;
  left:4.25vw;
  position:relative;
  justify-content:start;
}
.headliner{
    text-transform: capitalize;
padding-top:0vh;
  font-size: 4vw;
  height:4vw;
  float:left;
  width:100%;
font-weight:bold;

  position:relative;
  left:4vw;
  justify-content:start;
  margin-top:4vw;
  margin-bottom:2vw;
}
.headlinee{
   font-weight:bold;
  font-size: 2vw;
  height:auto;
  margin-bottom:2vw;
  color:blue;
  float:left;
  width:100%;
  left:0vw;
  position:relative;
  justify-content:start; 
}

.langflash{
    position:fixed;
    width:100vw;
    height:100vh;
     background-image: conic-gradient( black,black,blue, black,black);
  border-radius: 00%;
  
  color: white;
  font-size:5vw;
  text-align:center;
  margin-top:0vh;
  
  top:0vw;z-index:1;
}
#ldiv{
    width:20vw;
    position:absolute;
    top:30.5vh;
    text-align:center;
    left:0vw;
    font-weight:bold;
    color:yellow;
    font-size:7vh;
    z-index:101;
    height:5vh;
}

#mdiv{
     width:60vw;
    position:absolute;
    top:32vh;
    text-align:center;
    left:20vw;
    font-weight:bold;
    color:#02f7d3;
    font-size:2.5vh;
    z-index:101;
    height:5vh;
}
#mmdiv{
     width:60vw;
    position:absolute;
    top:36vh;
    text-align:center;
    left:20vw;
    font-weight:bold;
    color:#02f7d3;
    font-size:2.5vh;
    z-index:101;
    height:5vh;
}
#rdiv{
    width:20vw;
    position:absolute;
    top:31vh;
    text-align:center;
    left:80vw;
    font-weight:bold;
    color:lime;
    font-size:7vh;
    z-index:101;
    height:5vh;
}
#pure{
     width:100vw;
    position:absolute;
    top:35vh;
    text-align:center;
    left:0vw;
    font-weight:bold;
    color:white;
    font-size:8vh;
    z-index:101;
    height:0vh;
}


nav{
    padding-top:4vh;
}

#displayflash {
    
    position: absolute;
    top: 52vh; /* Adjust this value as needed */
    left: 0;
    right: 0;
    font-size:3.5vw;
    text-align: center; /* Center horizontally */
    /* Additional styling */
}


.hiden {
  display: none;position:fixed;top:5.2vw;text-align:center;z-index:1400;font-size:1.5vw;width:25vw;left:12.5vw;
}
.drbt:hover + .hiden {z-index:2000;
  display: block;
  color: white;
}
.glowi {
  animation: glowi 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glowi {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
  }
  
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
  }
}
.hidel {
  display: none;position:fixed;top:5.2vw;text-align:center;z-index:1400;font-size:1.5vw;width:25vw;left:12.5vw;
}
.drbt2:hover + .hidel {
  display: block;
  color: white;z-index:2000;
}
.hidex {
  display: none;position:fixed;top:5.2vw;text-align:center;z-index:1400;font-size:1.5vw;width:16.67vw;left:83.33vw;
}
.myDivx:hover + .hidex {
  display: block;
  color: white;
}
.hide {
  display: none;position:fixed;top:5.2vw;text-align:center;z-index:1400;font-size:1.5vw;width:16.67vw;left:50vw;
}
.myDiv:hover + .hide {
  display: block;
  color: white;
}
.hide2 {
  display: none;position:fixed;top:5.2vw;text-align:center;z-index:1400;font-size:1.5vw;width:16.67vw;left:66.67vw;
}
.myDiv2:hover + .hide2 {
  display: block;
  color: white;
}

/* Popup container */
.popup {
    display: none;
    position: fixed;
    z-index: 100000;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
    padding-top: 1vh;
}

/* Popup content */
.popup-content {
    background-color: #fefefe;
    background-image: url('img/ship1.png'); /* Add your background image here */
    background-size: cover; /* Adjust the background image to cover the entire popup */
    background-position: center; /* Center the background image */
    margin: 5vw auto;
    padding: 20px;
    border: 1px solid #888;
    width: 90vw;
    display: flex;
    flex-direction: column-reverse; /* Stack the bottom part on top and the top part on bottom */
}

/* Close button */
.popup .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.popup .close:hover,
.popup .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Popup top and bottom parts */
.popup-top,
.popup-bottom {
    width: 100%;
    padding: 10px;
}

.popup-bottom {
    border-bottom: 1px solid #888; /* Optional: Add a border between the parts */
    padding-bottom: 10px; /* reduced padding */
}

.popup-top {
    padding-top: 10px; /* reduced padding */
}


.form-group {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 1vw;
}

.form-group .checkbox-container {
    width: 56vw;
    text-align: left;
    font-size: 3vw; /* Enlarged text */
}

.form-group .file-upload-container {
    width: 24vw;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px; /* Space between the file input and the button */
    font-size: 0.9rem;
    text-align:right;
}

.form-group .upload-button {
    width: 10vw;
    text-align: right;
}

.form-actions {
    margin-top: 10px;
    display: flex;
    gap: 10px;
}

.open-button {
    background-color: darkblue;
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size:18px;
}

.open-button:hover {
    background-color: blue;
}
    .category-section {
        display: none;
    }
    .category-section2{
        display: none;
    }





.suppress-button {
    background-color: darkred;
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
        display: inline-block; /* Ensures buttons are inline elements */
}

.kill-button:hover {
    background-color: white;
    color:black;
}
.kill-button {
    background-color: black;
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
        display: inline-block; /* Ensures buttons are inline elements */
}

.suppress-button:hover {
    background-color: red;
}
.unsuppress-button {
    background-color: blue;
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
        display: inline-block; /* Ensures buttons are inline elements */
}

.unsuppress-button:hover {
    background-color: lime;
    color:black;
}

/* Ensure the parts are displayed correctly */
.popup-top {
    display: block;
}

.popup-bottom {
    display: block;
}
.note{
    font-size:2vw;
}

/* Basic styling for the popup */
/* Basic styling for the popup */
.popup1 {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #ccc;
    padding: 20px;
    background: #fff;
    background-image: url('img/ship2.png'); /* Add your background image here */
    background-size: cover; /* Adjust the background image to cover the entire popup */
    background-position: center; /* Center the background image */
    z-index: 1000;
    font-size: 2vw;
}
ul.nobreak {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}

ul.nobreak li {
    margin-right: 4vw; /* Adjust spacing as needed */
    white-space: nowrap; /* Prevent breaking inside the list items */
}


.popup-overlay1 {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    font-size: 2vw;
}

.closeout{
    
    
    
    position:relative;
    float:right;
}


        #loadMore {
            background-color: darkblue;
            color: white;
            border: none;
            padding: 10px 15px;
            cursor: pointer;
            font-size: 18px;
            left: 4.25vw;
            margin-top:4.25vh;
            margin-bottom:4.25vh;
            position:relative;
         
        }

        #loadMore:hover {
            background-color: blue;
        }
        






.custom-dropdown  {
    padding-top: 1vw;
    padding-bottom:1vw;
    position: fixed;
    width: 25vw;
    text-align: center;
    height: 2.2vw;
    background-color: #00026b;

    color: white;
    font-weight:bold;
  
    font-size: 2vw;
    text-transform: capitalize;
    cursor: pointer;
    left: 0vw;
    top: 17vw;
    z-index: 6000;
}

.dropdown-selected {
    background-color: inherit;
    color: inherit;
    
    border-radius: inherit;
    text-transform: capitalize;
    cursor: pointer;
}

.dropdown-content {
    display: block; /* Changed to block */
    position: absolute;
    background-color: black;
    color: white;

    width: 25vw;
    top: 100%;
    left: 0;
    z-index: 1000;
    font-size: 1.3vw;
    max-height: 30vw;
    overflow-y: auto;
    margin-bottom: 0;
    padding-bottom: 0em;
    opacity: 0; /* Initially hidden */
    transition: opacity 1s ease; /* Transition effect for opacity */
    pointer-events: none; /* Prevent interaction when hidden */
  
}

.dropdown-item {
    padding: 0.3em;
    border-bottom: 1px solid #00509e;
    text-transform: capitalize;
    background-color: black;
    color: white;
    font-size: 2vw;
}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-item:hover {
    background-color: blue;
    cursor: pointer;
}

.custom-dropdown:hover .dropdown-content {
    opacity: 1; /* Show the dropdown content after 1 second */
    pointer-events: auto; /* Enable interaction after showing */
}










/* Container for the string of lights */
.string-of-lights {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2.5vw; /* Adjust based on desired size */
    display: flex;
    justify-content: space-around; /* Evenly distribute lights */
    align-items: center;
    z-index: 11000;
    pointer-events: none; /* Ensure it doesn't block clicks */
}

/* Individual light bulbs */
.light {
    width: 0.3vw; /* Adjust bulb size */
    height: .6vw;
    background-color: yellow;
    border-radius: 50%;
    box-shadow: 0 0 1.5vw rgba(252, 250, 179, 1);
    animation: glow 1.5s infinite alternate;
    opacity: 1;
    z-index:100;
}

/* Glowing animation */
@keyframes glow {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/* Alternate light colors */
.light:nth-child(2n) {
    background-color: yellow;
    box-shadow: 0 0 1.5vw rgba(252, 250, 179, 1);
}

.light:nth-child(2n+1) {
    background-color: yellow;
    box-shadow: 0 0 1.5vw rgba(252, 250, 179, 0.8);
}
.lower-light {
   position:relative; top:0.6vw;
}
/* Target the middle light */
.middle-light {
    position:relative;
    width: .5vw; /* Increase size for the middle light */
    height: .7vw;
    top:1.65vw;left:0vw;
    background-color: yellow; /* Change color to yellow */
    box-shadow: 0 0 7.0vw rgba(250, 137, 0, 1); /* Adjust glow color */
     /* Move it up */
    z-index: 11201; /* Ensure it is above other lights */
}


@media only screen and (max-width: 430px) and (orientation: portrait) {
    /* Your CSS rules here */
    
#displayflash {
    
    position: absolute;
    top: 55vh; /* Adjust this value as needed */
    left: 0;
    right: 0;
    font-size:5vw;
    text-align: center; /* Center horizontally */
    /* Additional styling */
}
#ldiv{
    width:20vw;
    position:absolute;
    top:20.5vh;
    text-align:center;
    left:0vw;
    font-weight:bold;
    color:yellow;
    font-size:7vh;
    z-index:101;
    height:5vh;
}

#mdiv{
     width:60vw;
    position:absolute;
    top:22vh;
    text-align:center;
    left:20vw;
    font-weight:bold;
    color:#02f7d3;
    font-size:2.5vh;
    z-index:101;
    height:5vh;
}
#mmdiv{
     width:60vw;
    position:absolute;
    top:26vh;
    text-align:center;
    left:20vw;
    font-weight:bold;
    color:#02f7d3;
    font-size:2.5vh;
    z-index:101;
    height:5vh;
}
#rdiv{
    width:20vw;
    position:absolute;
    top:21vh;
    text-align:center;
    left:80vw;
    font-weight:bold;
    color:lime;
    font-size:7vh;
    z-index:101;
    height:5vh;
}
#pure{
     width:100vw;
    position:absolute;
    top:25vh;
    text-align:center;
    left:0vw;
    font-weight:bold;
    color:white;
    font-size:8vh;
    z-index:101;
    height:0vh;
}
#console {
    display: flex;
    z-index: 100;
    font-size: 4vw;
    width: 100vw;
    min-height:25vw;
    background-color: white;
    position: fixed;
    top: 17vw; /* Distance from the top of the page */
    padding-left: 25vw;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: flex-start;

    background-image: url('img/garden.png');
    background-size: cover; /* Ensure the image covers the entire width of the div */
    background-position: center calc(1-vw); /* Offset the image vertically by the same amount as the top position */
    background-repeat: no-repeat; /* Prevent repeating */
}

#divx, #div1, #div2, #div3 {
        transform: scale(0.75); /* Scale the radio buttons down */
    transform-origin: center; /* Ensure scaling happens from the center */
    margin-right: 0.5em; /* Adjust margin if needed */
    position:fixed;
    width: 25vw;
    font-size: 3.5vw;
    z-index: 4;
    font-family: "Quicksand", sans-serif;
    padding-bottom: 0vw;
    padding-top: 0vh;
    height: auto;
     padding-left:0vw;
}


.custom-dropdown  {
    padding-top: 2vw;
    padding-bottom:2vw;
    position: fixed;
    width: 25vw;
    text-align: center;
    height: 2.2vw;
    background-color: #00026b;
font-weight:bold;
    color: white;
    font-weight:bold;
  
    font-size: 2.5vw;
    text-transform: capitalize;
    cursor: pointer;
    left: 0vw;
    top: 17vw;
    z-index: 6000;
}

.dropdown-selected {
    background-color: inherit;
    color: inherit;
    
    border-radius: inherit;
    text-transform: capitalize;
    cursor: pointer;
}

.dropdown-content {
    display: block; /* Changed to block */
    position: absolute;
    background-color: black;
    color: white;

    width: 25vw;
    top: 100%;
    left: 0;
    z-index: 1000;
    font-size: 2.5vw;
    max-height: 30vw;
    overflow-y: auto;
    margin-bottom: 0;
    padding-bottom: 0em;
    opacity: 0; /* Initially hidden */
    transition: opacity 1s ease; /* Transition effect for opacity */
    pointer-events: none; /* Prevent interaction when hidden */
  
}

.dropdown-item {
    padding: 0.3em;
    border-bottom: 1px solid #00509e;
    text-transform: capitalize;
    background-color: black;
    color: white;
    font-size: 3vw;
}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-item:hover {
    background-color: blue;
    cursor: pointer;
}

.custom-dropdown:hover .dropdown-content {
    opacity: 1; /* Show the dropdown content after 1 second */
    pointer-events: auto; /* Enable interaction after showing */
}

 .flag{
position:fixed;
top: 3vw;
margin-top:6.5vw;
width:20.5vw;
height:15vw;
margin-left:3.5vw;
}
}
/* styles.css */

/* Styling for the popup */
.popupin {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;

    background-image: url('img/ship1.png');
    background-size: cover;
    background-color: white;
    border: 1px solid #ccc;
    z-index: 10000;
}


/* Popup background overlay */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none;  /* Hidden by default */
}


/* Container for each form element */
.form-group {
    font-size:3vh;
    margin-bottom: 1.5vh;
    overflow: hidden;  /* Clear floating elements */
}

/* Labels (float left) */
.form-group label {
    float: left;
    width: 150px;  /* Adjust this to fit your layout */
    text-align: left;
    margin-right: 1vh;
}

/* Inputs (float right) */
.form-group input {
    float: right;
    width: 20vw;  /* Adjust width for the input field */
}