/* is awesome gradient. use for cards, for text etc */
/* for mobile screens */
/* background: linear-gradient(20deg,#603BFC, #FF6835); */

/* .Q1 > div{
    margin-bottom: 20vh;
} */

html{
    overflow-x: hidden;
}

@media (max-width: 390px){

    #tim11{
        display: none;
    }
}

/* aside{
background: repeating-linear-gradient(
    35deg,
    hsl(343 100% 50%) 0px 2px,
    hsl(23 100% 50%) 0px 4px
  );
mix-blend-mode: multiply;
animation: none 40000ms infinite linear;
} */

sup {
    font-size: 10px;
}

div.t30 div.t31:hover{
    background-color: #90ee9081;
}

.koo1{
    max-width: 24% !important;
}

.koo2{
    max-width: 32% !important;
}

.input-field{
    position: relative;
  }
.input-field input{
width: 150px;
/* height: 60px; */
border-radius: 6px;
/* font-size: 18px; */
padding: 10px 20px !important;
margin: 15px 5px !important;
border: 2px solid rgb(250, 99, 99);
background: transparent;
color: rgb(0, 0, 0);
outline: none;
}
.input-field label{
position: absolute;
top: 50%;
left: 15px;
transform: translateY(-50%);
color: rgb(189, 60, 60);
/* font-size: 19px; */
pointer-events: none;
transition: 0.3s;
}

input:focus{
border: 2px solid #18ffff;
}

input:focus ~ label,input:valid ~ label{
top: 0;
left: 10px;
font-size: 10px;
padding: 0 2px;
/* background: #7182db; */
}



body{
    /* background-color:antiquewhite; */
    /* background-color:ghostwhite; */
    background: linear-gradient(45deg,#FAFFF8,#E4FAD1,#F3BCA8,#FAE0D7,#FEFDFD);
    user-select: none;
    -webkit-user-select: none;
}

body::before{
/* #Q2{ */
    content: "";

    background: url("../ChatGPT912.png");
    /* background: url("../Gemini1.png"); */

    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    position:fixed;
    top: 0; left: 0; bottom: 0; right: 0;
    height: 100vh; width: 100vw;
    animation: hue1 8s infinite alternate;
    background-size: 16%;
    /* -webkit-transform: translateZ(0); */
    /* transform: translateZ(0); */
    /* background-position: var(--bg-pos1); */
    background-position: 48% 99%;

    opacity: .95;
    z-index: -10;
    /* transform: rotate(25deg); */

}


div.circle1{
    background-color: salmon;
    height: 10px;
    width: 10px;
    display: inline-block;
    border-radius: 50%;
}


div#car12{
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: 20px;
    margin: 6vh 4vw 0vw 4vw;
    scrollbar-width: none;
    font-size: 16px;
    padding: 1vh;
}

div#car12::-webkit-scrollbar{
    display: none;
}

.ty1{
    /* background-color:rgb(80 223 228 / 28%); */
    display: flex;
    min-width: 50vw;
    padding: 5vw;
    margin: 1vw;
    border-radius: 10px;
    opacity: 0.5;
    transition-property: opacity, box-shadow, filter, transform;
    transition-duration: .25s;
    /* transition-delay: 50ms; */
    transition-timing-function: linear;
    filter: blur(4px);
    transform: scale(.95);
    /* letter-spacing: 5px; */
}

/* ENABLE effects for the card in focus */
.ty1.eff1{
    /* transition: opacity 1s ease-out, background-color 1s ease-out; */
    filter: blur(0px);
    /* letter-spacing: 5px; */
    /* border: 1px solid; */
    opacity: 1;
    transform: scale(1);
    /* outline: auto; */
    background-color: transparent;
    /* background-color: rgb(235 172 172 / 43%); */
    /* transform: scale(1.5); */
    /* filter: drop-shadow(1px 1px 3px black); */
    /* box-shadow: 2px 2px 10px salmon; */
    box-shadow: 4px 4px 6px #f4caf6, -2px -2px 6px;

}

/* word clouds and pseudo word clouds */
.cloud2 li{
    background-color: beige;
    display: inline;
    padding: 15px;
    margin: 10px;
    border: solid 1px;
}

.cloud2 li:nth-child(odd){
    background-color: rgba(251,154,154,1);
}

.cloud, .cloud2{
    display: flex;
    flex-wrap: wrap;
    padding: 0vw 3vw;
    margin: 3vw 4vw;
    list-style: none;
    align-items: center;
    justify-content: center;
}


div#cont1 #wc11{
    text-align: center;
    background-color: rgba(255,247,237,.85);
    padding: 5vw;
    border-radius: 10px;
    margin: 0vw 2vw 7vw 2vw;
    box-shadow: 0px 0px 17px 3px;
}

.cloud li{
    /* background-color: beige; */
    display: inline;
    padding: 15px;
    /* margin: 10px; */
    /* border: solid 1px; */
}

.goog1{
    /* height: 85px !important; */
    /* height: 9vh !important; */
    opacity: 1;
}

div#alkj1{
    /* clip-path: polygon(24% 0%, 24% 52%, 75% 52%, 75% 100%, 0 100%, 0 0); */
    /* background: linear-gradient(20deg,#603bfcab, #ff6835a8);  */
    background-color: rgba(255,182,193,.91);
    color: black;
    text-shadow: #18ffff;
    /* display: inline-block; */
    /* max-width: 65vw; */
    padding: 3vw;
    /* margin: 4vw !important; */
    border-radius: 5px;
    text-align: center;
    box-shadow: 0px 0px 68px -15px black;
    letter-spacing: 4px;
    word-spacing: 23px;
}

div#cont1 p#alkj2{
    background-color:thistle;
    opacity: .9;
    /* display: inline-block; */
    /* max-width: 55vw; */
    /* padding: 3vw; */
    margin: 14vh 5vw 5vw 5vw !important;
    border-radius: 5px;
    /* text-align: center; */
}


.stac1{
    text-align: left;
    border: 1px solid;
    padding: 2vw;
    margin: 2vw 2vw 6vh 2vw;
    border-radius: 5px;
    position: relative;
    z-index: 5;
    transition-property: transform, z-index, opacity, box-shadow, filter, background-color;
    transition-timing-function: linear;
    transition-duration: 200ms;
    min-width: 60vw;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    /* opacity: .7; */
    font-size: 16px;
    background-color: #faebd7;
    opacity: .9;
    filter: blur(4px);

}

/* .stac1:not(:first-child){
    margin-left: -58vw;
} */


/* .stac1:not(.bluu2):active,.stac1:not(.bluu2):hover{ */

@media (any-pointer:fine){
.stac1:active,.stac1:hover{
    opacity: 1 !important;
    transform: scale(1.05) !important;
    z-index: 9 !important;
    box-shadow: 2px 2px 2px 2px !important;
    /* filter: brightness(1); */
    filter: blur(0px) !important;
    /* background-color: aquamarine; */
    background-color: rgba(160, 225, 255, 0.91) !important;
}
}

.bluu1{
    opacity: 1;
    transform: scale(1.05);
    z-index: 9;
    box-shadow: 2px 2px 2px 2px;
    /* filter: brightness(1); */
    filter: blur(0px);
    /* background-color: aquamarine; */
    background-color: rgba(160, 225, 255, 0.91);

}

.bluu2{
    background-color: #faebd7 !important;
    opacity: .9 !important;
    filter: blur(4px) !important;
    transform: scale(1) !important;
    box-shadow: none !important;

    /* opacity: 1;
    transform: scale(1.05);
    z-index: 9;
    box-shadow: 2px 2px 2px 2px;
    filter: blur(0px);
    background-color: rgba(160, 225, 255, 0.91); */
}




#carr1{
    margin-bottom: 1px;
    color: blue;
    font-weight: 900;


    display: block;
    white-space: nowrap;
    margin-bottom: 0vw;
    overflow-x: scroll;
}

#wave1{
    position: fixed;
    top: 1%;
    z-index: -10;
    /* left: 0; */
    width: 97%;
    overflow: hidden;
    line-height: 0;
    filter: blur(10px);
    transition: height 1s linear;
}

svg{
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 140px;
    fill: lightblue
}


:root{
    --my-var1:1s;
    --common-color:rgb(245,245,195)
}

.iujh1{
    background: linear-gradient(20deg,#603BFC, #FF6835);
    /* background: linear-gradient(20deg,rgba(96,59,252,83%), rgba(255,104,53,82%)); */
    
    -webkit-background-clip: text;
    color: transparent;
    font-size: xx-large;
    transition: transform 200ms ease-in;
    padding-top: 8vh !important;
}

div#cont1 p.iujh1:first-of-type{
    margin-top: 8vh !important;
}

div#cont1 p.iujh1, div#cont1 div.t30{
margin-bottom: 8vh !important;
}

.iujh1:hover{
    transform: scale(1.05);
    z-index: 7;
}

#iujh2{
    background: aquamarine;

}

.fold-corner-card {
    /* background:
      linear-gradient(225deg, lightblue 50%, #C9CCD4 50%),
      linear-gradient(45deg, #FFF, #FFF),
      linear-gradient(135deg, #FFF, #FFF); */




    /* background: linear-gradient(225deg, lightblue 54%, antiquewhite 50%); */




    /* box-shadow: 5px 9px 12px 4px; */

      /* linear-gradient(225deg, transparent 25px, #FFF 10px); */
  }

.fold-corner-card {
    /* background-size: 35px 35px, 0 0, 0 0, 100% 100%;
    background-position: 100% 0, 0 0, 100% 100%, 100% 0;
    background-repeat: no-repeat; */

    /* enable below */
    background-size: 7% 7%;
    background-position: 100% 0px;
    background-repeat: no-repeat;
}

#iiuy1{
    /* filter: hue-rotate(0deg); */
    /* transition: all .8s; */
    animation: hue1 8s infinite alternate;
    /* animation: hue2 2s infinite alternate; */
    display: block;
    margin-left: auto;
    margin-right: auto;
    transform: rotate(25deg);
}

.iiuy2{
    /* transition: all .8s; */
    animation: hue1 16s infinite alternate;
    box-shadow: none !important;
    filter: drop-shadow(2px 3px 4px);
}


@keyframes hue1 {
    0%{filter: hue-rotate(0deg) }
    100%{filter:hue-rotate(360deg) }
}

#l2{
    padding: 3vw !important;
    transition-duration: .4s;
    overflow: hidden;
    text-decoration: double;
    position: relative;
    background-color: burlywood;
    border: none;
    box-shadow: 3px 3px 10px;
    text-underline-offset: 6px;
    border-radius: 5px;
}
#l2::after{
    content: '';
    background: #90EE90;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px;
    margin-top: -120%;
    opacity: 0;
    transition: all 0.8s
}
#l2:active:after{
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
}

#l1{
    /* background-image: linear-gradient(to right, #ff6e7f 0%, #bfe9ff  51%, #ff6e7f  100%); */
    box-shadow: 1px 1px 23px -2px;
    border-radius: 50%;
    /* border: 2px solid salmon; */
    border: none;
    background-color: rgba(250, 128, 114,.5);
    width: fit-content;
    padding: 3vw;

    color: rgb(0, 0, 0);
    transform: translateZ(0);
    -webkit-text-fill-color: rgb(0, 0, 0) !important;
    filter: drop-shadow(2px 3px 10px salmon);
    /* background-color: linen; */
    box-shadow: 3px 3px 16px 0px rgba(250, 128, 114,.17);
    animation: float22 6s ease-in-out infinite;
    -webkit-tap-highlight-color: transparent;
}
    
@keyframes float22 {
	0% {
		/* box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); */
		transform: translatey(0px);
	}
	50% {
		/* box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2); */
		transform: translatey(-20px);
	}
	100% {
		/* box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); */
		transform: translatey(0px);
	}
}


textarea{
    background-color: aliceblue;
    border-radius: 5px;
    height: 4vh;
    width: 18vw;
    transition: width 1s ease-in-out, height 1s ease-in-out;
}

textarea:focus{
    width: 80%;
    height: 6vh;
}
#tt3{
    display: none;
}
div#cont2 p, div#cont2 input, div#cont2 textarea, div#cont2 button,#tt3{
    margin: 1vw;
    padding: 1vw;

}

div#cont2 input{
    padding: 1vw;
    margin: 1vw;
    border-radius: 5px;
    /* box-shadow: 1px 1px aliceblue; */
    background-color: aliceblue;
    border: none;
}

div#cont2 input:focus, textarea:focus{
    background-color: aquamarine;
    /* border: none; */
}

.t30{
    display: grid;
    grid-template-areas: "overlay1";
    /* outline: auto; */
    perspective: 10000px;

    -webkit-perspective: 10000px;

    /* place-items: center; */
    background-color: transparent !important;
    margin: 8vw 4vw !important;
}
div.t30 div.t31{
    /* position: absolute; */
    grid-area: overlay1;
    text-align: center; 
    backface-visibility: hidden;

    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transform-style: preserve-3d;

    margin: -1vw !important;
    /* outline: auto; */
    padding: 4vw !important;
    padding-bottom: 0vw;
    transform-style: preserve-3d;
    border-top-left-radius: 20px !important;
    /* height: 100%; */
    /* width: 100%; */
    box-shadow: -10px 3px 15px -3px;
    /* background-color: #f4caf6; */
    /* background: #f4caf6; */

}

/* .t31:active{
    transform:translateY(4px);
} */

div.t30 div.t32{
    transform: rotateY(180deg);
    grid-area: overlay1;
    /* position:absolute; */
    text-align: center; 
    backface-visibility: hidden;
    
    -webkit-transform: rotateY(180deg);
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transform-style: preserve-3d;
    
    margin: -1vw !important;
    /* outline: auto; */
    transform-style: preserve-3d;

    /* background-color: lightblue !important; */
    /* background-color: rgba(224, 255, 255, 0.91) !important; */
    background-color: rgba(228, 255, 224, 0.91) !important;
    /* background: #18ffff !important; */
    text-align: left !important;
    padding: 8vw !important;
    padding-bottom: 0vw;
    color: black;
    /* height: 100%; */
    /* width: 100%; */
    box-shadow: 5px 9px 12px 4px;
    font-size: 18px;
    border-top-right-radius: 60px !important;
}
.animate{
    animation: slide1 1s ease forwards;

}
@keyframes slide1 {
    0% {transform: rotateY(0deg)}
    100% {transform: rotateY(180deg)}    
}
.animate2{
    animation: slide2 1s ease forwards;
}

@keyframes slide2 {
    0% {transform: rotateY(180deg)}
    100% {transform: rotateY(0deg)}    
}


/* div#cont2 p:first-of-type{ */
p#tt1{
    /* background-color: aliceblue; */
    display: block;
    text-align: center;
}

body{
    /* background-color:antiquewhite; */

/* background: hsla(216, 96%, 56%, 1); */
/* background: radial-gradient(circle, hsla(216, 96%, 56%, 1) 0%, hsla(178, 64%, 65%, 1) 100%); */
/* background: -moz-radial-gradient(circle, hsla(216, 96%, 56%, 1) 0%, hsla(178, 64%, 65%, 1) 100%); */
/* background: -webkit-radial-gradient(circle, hsla(216, 96%, 56%, 1) 0%, hsla(178, 64%, 65%, 1) 100%); */
}

.koo3{
    max-width: 45% !important;
}
.koo4{
    max-width: 35% !important;
}


.shoo2{
    opacity: .2;
    transition: opacity 1s linear;
}

.shoo1{
    /* animation: slide33 1s ease-out forwards; */
    transition: opacity 1s linear;
    opacity: 1;
}

@keyframes slide33 {
    0% {opacity: .2;}
    /* 1% {opacity: 0;display: block;} */
    100% {opacity: 1;}    
}



.sho1{
animation: slide3 .5s linear forwards;
}
.hid1{
animation: slide4 .5s linear forwards;
}
    
@keyframes slide3 {
    0% {opacity: 0;visibility: hidden;}
    /* 1% {opacity: 0;display: block;} */
    100% {opacity: 1; visibility: visible;}    
}

@keyframes slide4 {
    0% {opacity: 1;visibility: visible;}
    /* 1% {opacity: 0;display: block;} */
    99% {opacity: 0; visibility: visible;}    
    100% {opacity: 0; visibility: hidden;}    
}

div#cont2{
    display: none;
    position: fixed;
    opacity: 0;
    visibility: hidden;
    /* background-color: burlywood; */
    /* background: radial-gradient(
      ellipse at right top,
      #00458f8f 0%,
      #151419 45%,
      #151419 100%
    ); */
    padding: 10px;
    position: fixed;
    bottom: 3%;
    /* left: 20vw; */
    /* margin-left: auto; */
    /* margin-right: auto; */
    z-index: 12;
    border-radius: 10px;
    max-width: 50vw;
    min-width: 350px;
}

@media (max-width: 400px){
    div#cont2{
        min-width: 75vw;
    }

    textarea#lk12{
        width: 75%;
    }
    div.input-field input{
        width: unset;
    }
    #l21{
        font-size: 14px;
        transform: translateY(15%);

    }
    #dbdb1{
        padding: 3vw !important;
    }
    #dbdb2{
        background-color: transparent;
    }
    div#dbdb1 span{
        margin: 4vw !important;
        /* background-color: rgba(250, 128, 114,.17); */
        font-size: 12px;
        filter: drop-shadow(1px 1px 11px);
        /* border-right: 1px solid; */
        /* border-left: 1px solid; */
    }
}


/* unused now */
div#cont3{
    display: none;
    /* opacity: 0; */
    /* visibility: hidden; */
    height: 100vh;
    width: 100vw;
    background-color: rgb(244,222,222);
    position: fixed;
    top: 0vh;
    left: 0vw;
    z-index: 1;
}

div#cont2 p{
display: inline-block; padding-right: 10px;
border-bottom: 1px solid;
}



div#header1 p{
    text-align: center;
    font-size: medium;
}

div#cont1>p{
    /* background-color:rgba(219, 248, 246,.7); */
    /* border: 1px solid lightblue; */
    box-shadow: 0px 0px 10px 8px lightslategrey;;
    margin: 8vw 4vw !important;
    padding: 5vw;
    text-align: center;
    border-radius: 10px;
    /* border: 1px solid lavender; */
    margin: 4vw;
}

div#cont1 div p{
    display: block;
    margin-top: 1vw;
}

div#cont1 div{
    /* background-color:rgba(219, 248, 246,.91); */
    padding: 1vw;
    text-align: center;
    border-radius: 10px;
    margin: 4vw;
}

div#cont1 div img{
    display: block;
    /* box-shadow: 4px 5px; */
    max-width: 20%;
    margin: auto;
    border-radius: 10px;
}



#header1{
    position:sticky;
    top:0vh;
    /* height: 15vh; */
    /* min-height: 6vh; */
    display: block;

    /* background-color:rgba(245,245,220,.55); */
    background-color:rgba(74,237,189,.1);

    /* width: 95%; */
    font-size: 3vh;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 10px;
    padding-left: 10px;
    /* margin-right: 5px; */
    /* margin-top: -2vh; */
    opacity: 1;
    z-index: 35;
    /* box-shadow: 5px 5px; */
    backdrop-filter: blur(15px);    
    -webkit-backdrop-filter: blur(15px);
    /* mix-blend-mode: color-burn; */
    border-radius: 0px 0px 20px 20px;
    transition: height 1s ease-out,opacity 1s ease-out;

}

/* ADDITIONAL LAYER. DISABLE FREELY. PLAY around with background color more freely now as long as mixblendmode is colorburn */
#header1{
    /* background: repeating-linear-gradient( 35deg, hsl(343 94% 23%) 0px 2px, hsl(23 78% 30%) 0px 4px ); */
    /* animation: none 40000ms infinite linear; */
    box-shadow: 3px 4px 10px 0px;
    /* color: wheat; */
    /* border-radius: 10px; */
    /* box-shadow: 1px 1px 10px 1px salmon; */
}



.Q1{
    display: block;
    text-align:left;
    margin-top: 10px;
    /* margin-bottom: 1000px; */
    /* position:absolute; */
    /* top:12vh; */
    width: 100%;
    font-size: 3vh;
    padding-top: 5vh;
    overflow-x: hidden;
}










#meo31:hover{
    background-color: var(--common-color) !important;
}

#meo31{
    background-color: var(--common-color) !important;
    /* box-shadow: 6px 4px 10px #f4caf6, -4px -4px 6px lightblue; */
}

#meo5{
    /* margin-top: 16vh !important; */
    /* padding: 0vw; */
    left: -27vw !important;
    position: relative;

}

#meo4{
    /* margin-left: 0vw !important; */
    /* margin-top: 12vh !important; */
    padding: 0vw;
}

#meo3{
    padding: 0vw !important;
    margin: 0vw !important;
    background-color: var(--common-color) !important;
    /* background-color: transparent !important; */
    /* background-color: rgba(228, 255, 224, 0.91) !important; */
    /* box-shadow: 6px 4px 10px #f4caf6, -4px -4px 6px lightblue; */
}

#goo6{
    overflow-x: hidden;
}

#meo22{
    margin-top: 4vh;
    overflow-x: hidden;
    padding: 2vw;
}

#meo2{
    justify-content: center;
    background-color: transparent !important;
    padding: 0vw !important;
    margin: 0vw !important;
    margin-top: 6vh !important;
    width: 90vw;
}
#meo2 > div{
    background-color: transparent !important;
}

#meo1{
    text-align: left;
    /* line-height: 38px; */
    padding-left: 2vh;
    font-size: min(25px,2.5vh);

    /* background-color: transparent; */
}

#aiyee1{
    /* display: flex; */
    margin-top: 7vh !important;
    padding: 4vw !important;
    border-top: 4px solid lightcoral;
}

/* now, in this stylesheet, this is the zoomed in class. hover zooms you out */
.bv22{
    position: relative;
    max-width: 60% !important;
    padding: 2vw;
    /* display: inline-block !important; */
    transform: scale(1);
    opacity: 1;
    z-index: 50;
    /* filter: brightness(60%) contrast(60%) grayscale(60%) hue-rotate(18deg) invert(100%); */
    filter: brightness(100%);
    box-shadow: 0px 0px 25px 4px salmon;
    border: 1px solid salmon;

    /* transition: transform 1s linear, opacity 1s linear, box-shadow 1s linear, border 1s linear, z-index 1s linear;   */
    transition-property: transform, opacity, box-shadow, z-index, filter, border, brightness;
    transition-duration: .5s;
    transition-timing-function: linear;
}

/* IMP. this stylesheet reverses the hover to expand image effect. on mobile, to prevent overflow etc, the default is both images displayed at max-width, we use transform to scale down */

.hover1{
    transform: translateX(20%) scale(.6) !important;

    opacity: .25;
    /* filter: brightness(100%) contrast(100%) grayscale(0) hue-rotate(0) invert(0); */
    filter: brightness(80%);
    border: none;
    box-shadow: none;
    /* filter: drop-shadow(0px 0px 10px salmon); */
    z-index: 5;
}

#car12 > :first-child{
    letter-spacing: 3px;
    text-shadow: 1px 1px lightcyan;
    background: linear-gradient(45deg, #f4caf6, transparent);
}

#aha3{
    /* display: block; */
    padding: 1vw;
    margin-left: -2vw;
    border-radius: 5px;
    background-color: yellowgreen;
    /* position: absolute; */
    /* left: 7vw; */
    /* top: 49vh; */
}

div#aha1.aha2 p{
    background-color: transparent !important;
}

#aha1{
    padding: 2vw;text-align: right;
    /* box-shadow: 0px 0px 24px 12px; */
    max-width: 73vw;
    background-color: transparent;
    border-radius: 15px 15px;
    font-size: 20px;
    margin-left: 15vw;
}

.aha2{
    margin-bottom: 8vh;
    /* opacity: .9; */
    display: inline-block;
    max-width: 1000px;
    backdrop-filter: blur(25px);
    /* -webkit-backdrop-filter: blur(25px); */
    margin-top: 14vh;
    /* background-color: antiquewhite; */
    border-radius: 20px 20px 20px 20px;
    /* border: 1px solid; */
}

#aha23,#aha24{
    /* top: -4vw;  */
    /* position: relative; */
    /* color: blue; */
    /* font-weight: 900; */
    font-size: 20px;    
    /* left: 2vw; */
    /* white-space: nowrap; */
}

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

#mnb1{
    height: 47vh;    
    overflow-y: auto;
    height: 47vh;
    background-color: #add8e6ed;
    border-radius: 10px;
    padding: 2vw;border-bottom: 1px solid;
    border-left: 1px solid;
    box-shadow: 2px 2px;
    scrollbar-width: none;
}

#bhyu1{
    position: absolute;
    top: 7%;
    right: -2%;
    border-radius: 10px 10px;
}

.lqas1{
    /* content: 'Edited'; */
    background-color: transparent;

}

.lqas2{
    /* content: 'Original'; */
    background-color: #ffc7c7;;
    font-weight: 900;

}

#dbdb2{
-webkit-mask-image: linear-gradient(
    to right,
    transparent 0px,
    black 20px,
    black calc(100% - 20px),
    transparent 100%
);

    /* width: 80%; */
    overflow: hidden;
    display: flex;
    margin: 0 auto;
    /* background-color: antiquewhite; */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
    
div#dbdb1 span{
    /* outline: auto; */
    border-bottom: 1px solid !important;
    padding: 2vw;
    margin: 2vw;
    /* filter: drop-shadow(1px 1px 11px); */

}
    
#dbdb1{
    /* display: flex; */
    /* overflow: hidden; */
    
    white-space: nowrap;
    padding: 2vw;
    font-size: 2vh;
    width:fit-content;
    /* transform-style: preserve-3d; */
    /* will-change: transform; */

}

.contc{
    position: absolute;
    margin-left: 2vw !important;
    top: -5vh;
    /* width: 28vw; */
    white-space: normal;
    font-size: 16px;
}

.cont{
    border-radius: 50% !important;
    /* width: 2px; */
    /* height: 2px; */
    /* border: 2px solid; */
    background-color: transparent !important;
    /* left: -5vw; */
    position: relative;
    /* margin-left: 25vw !important; */
    margin-top: 48px !important;
    flex: 1;
}

#tim11{
    right: 3vw !important;
    bottom: 1vw;

    /* margin-top:12px;  */
    text-align: right; 
    font-size: x-small;
    /* position: absolute; */
    /* right: 1vw; */
    /* transform: translateY(-15%); */
    margin-left: auto;
}

#tim12{
    overflow-x: scroll;
    white-space: nowrap;

    /* margin-bottom: 5px; */
    /* margin-top:8px; */
    /* flex: 1; */
    /* text-align: center; */
    position: relative;
    font-size: small;
    left: 50%;
    transform: translateX(-50%);
}
.tim1{
    height: 10px;
    width: 150vh;
    border: 1px solid;
    margin: 0 auto;
    /* background-color: aqua; */
    background: linear-gradient(45deg, #f4caf6, transparent);
    position: relative;
    border-radius: 30px !important;
    display: flex;
    margin-top: 0vh !important;
}

#alol1{
    text-align: left;
    /* display: inline-block; */
    /* width: 55%; */
    /* position: absolute; */
    /* right: 0vw; */
    /* flex: 2; */
    margin-top: 6vh;
    padding-top: 0vh !important;
    /* font-size: 2vh; */
}

#alol1 > span{
    margin-bottom: 4vh;
    display: block;
    font-size: 20px;
    margin-top: 7vh;
}

div.contc p {
    text-align: left;
}

div.contc p:has(strong) ::before{
    /* background-color: #603BFC; */
    content: "\2022";
    left: -2vw;
    position: absolute;
}

#uyy1{
    scrollbar-width: none;
    padding: 1vw 1vw 8vw 1vw !important;
    white-space: nowrap;
    overflow-x: scroll;
    height: 30vh;
    margin-left: 0vw !important;
    margin-top: 8vh !important;
    /* display: inline-block; */
    /* width: 50%; */
    /* left: 0vw; */
    /* position: absolute; */
    flex: 2;
    /* padding-bottom: 6vh !important; */

}

.tim1 > :first-child{
    margin-left: 0vw !important;
}

.tim1 > :not(:first-child){
    margin-left: 0vw !important;
}

#carr1::-webkit-scrollbar,#uyy1::-webkit-scrollbar,#tim11::-webkit-scrollbar, #tim12::-webkit-scrollbar {
    display: none;
}

#carr1,#tim11,#tim12{
scrollbar-width: none;
}

#meo1 ul{
    border-left: double 2px solid #18ffff;
    padding-left: 1vh;
}

div.t30 > *{
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* -webkit-transform: translate3d(0,0,0);
    -webkit-transform-style: preserve-3d;
    transform: translate3d(0,0,0); */
}

div.t30 div.t31 > *{
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* transform: rotateY(180deg); */
    /* -webkit-transform: rotateY(180deg); */
    -webkit-transform: translate3d(0,0,0);
    -webkit-transform-style: preserve-3d;
    transform: translate3d(0,0,0);
}

div.t30 div.t32 > *{
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -webkit-transform: translate3d(0,0,0);
    -webkit-transform-style: preserve-3d;
    transform: translate3d(0,0,0);
}

#jji1 p{
    background-color: #add8e6b3;;
    padding: 2vw;
    display: inline-block;
    max-width: 55vw;
    margin: 1vw;
    border-radius: 10px;
    margin-right: 10px;
}

#jji1{
position: fixed;
right: 1vw;
bottom: 18vh;
text-align: right;
max-width: 55vw;
z-index: 38;
}

.disp1{
display: none;
}

#l112{
    /* background-image: linear-gradient(to right, #ff6e7f 0%, #bfe9ff 51%, #ff6e7f 100%); */
    /* box-shadow: 4px 6px 36px 16px; */

    /* border: 2px solid salmon; */
    border: none;

    /* background-color: salmon; */
    width: fit-content;
    padding: 2vw;
    display: inline-block;
    /* background-color: transparent; */
    filter: drop-shadow(2px 3px 10px salmon);
    background-color: rgba(250, 128, 114,.5);
    /* border-radius: 50%; */
    border-radius: 0px 45px;
    /* box-shadow: 3px 3px 3px; */
    box-shadow: 3px 3px 16px 0px rgba(250, 128, 114,.17);
    animation: float22 6s ease-in-out infinite;
    transition: background-color 1s linear;
    -webkit-tap-highlight-color: transparent;

}

#l112 > button:first-child{
    transform: rotate(90deg);
    border: none;
    /* background-color: lightblue; */
    background-color: transparent;
    transition: transform 1s linear;
    outline: none;
    color: black;
    -webkit-tap-highlight-color: transparent;
}

/* #l112 > button:first-child:active,#l112 > button:first-child:focus{
    background-color: lightblue;
} */

hr{
    height: 2px;
    border: none;
    background-color: lightcoral;
}

.bhy1{
    opacity: 1;
    visibility: visible;
    transition: opacity 500ms linear, visibility 500ms linear;
}

.bhy2{
    opacity: 0;
    visibility: hidden;
}