.stop-scrolling { 
    height: 100%; 
    overflow: hidden; 
} 


:root {
	--text-color: #C38D9E;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	box-sizing: inherit;
}

body {
	width: 100%;
/*	min-height: 100vh;*/
	height: auto;
	overflow-x: hidden;
}


.parent {
	width: 100%;
	min-height: 100vh;
	background: lightblue;
	padding: 10px;
/*	position: absolute;*/
	transition: all .5s;

}

/*
.pos {
	top: 0;
	left: 0;
}

.sop {
	top: 0;
	left: 0;
}
*/


.back {
	left: 100%;
}

.heading {
	width: 100%;
	text-align: center;
	color: #222;
}

.block-parent {
	margin: 0 auto;
	width: 70%;
	height: auto;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.block-child {
	margin: 5px;
	width: 100px;
	height: 100px;
	background: white;
	padding: 10px;
}

.block-child > img {
	width: 100%;
	height: 100%;
	transition: all .2s;

}

.block-child:hover > img {
	transform: scale(1.07);
}

.picture {
	width: 90%;
	margin: 0 auto;
	position: relative;
}

.picture > img {
	width: 100%;
	height: 100%;
}

.drop {
	/*
	width: 120px;
	height: 120px;
*/
	width: 10%;
	height: 20%;
	position: absolute;
	top: 0;
	left: 0;
}

.showres{
	position: absolute;
	top:50%;
	left:88%;
	font-size: 40px;
}

.ashowres{
	position: absolute;
	top:47.5%;
	left:88%;
	font-size: 40px;
}

.btna{
	position: absolute;
	top:15.556%;
	left:3%;
}

.abtna{
	position: absolute;
	top:19%;
	left:7%;
}

.btnb{
	position: absolute;
	top:27.5%;
	left:3%;
}

.abtnb{
	position: absolute;
	top:44%;
	left:9%;
}


.btnc{
	position: absolute;
	top:87%;
	left:3%;
}

.abtnc{
	position: absolute;
	top:75%;
	left:9%;
}

.btnd{
	position: absolute;
	top:32%;
	left:93%;
}

.abtnd{
	position: absolute;
	top:30%;
	left:93%;
}


.ainpcheckbtn{
	position: absolute;
	left:50%;
	top:74%;
  	background-color: #4CAF50; /* Green */
  	border: none;
  	color: white;
  	padding: 15px 32px;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	font-size: 16px;
	border-radius: 10px;
}

.ainpcheckbtn:active { 
            transform: scale(0.98); 
            /* Scaling button to 0.98 to its original size */ 
            box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24); 
            /* Lowering the shadow */ 
        } 

#truthtable {
position:absolute;
height:5%;
width:10%;
text-align:center;
background:yellow;
left:75%;
top:53%;

}


.inpcheckbtn{
	position: absolute;
	left:55%;
	top:80%;
  	background-color: #4CAF50; /* Green */
  	border: none;
  	color: white;
  	padding: 15px 32px;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	font-size: 16px;
	border-radius: 10px;
}

.inpcheckbtn:active { 
            transform: scale(0.98); 
            /* Scaling button to 0.98 to its original size */ 
            box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24); 
            /* Lowering the shadow */ 
        } 


.atab {
	
	width: 18%;
	color: white;
	position: absolute;
	top: 60%;
	right: 10%;
	background: red;
}
.atab > table{
	width: 100%;
	border-collapse: collapse;
	background: #E8A87C;
}


.tab {
	
	width: 18%;
	color: white;
	position: absolute;
	top: 60%;
	right: 10%;
	background: red;
}
.tab > table{
	width: 100%;
	border-collapse: collapse;
	background: #C38D9E;
}


table,th,td{
	
	border:1px solid white;
}


#info{
	background-color:yellow;
	position: absolute;
	width: 40%;
	text-align: center;
	right:0;
	top:0;
	font-size: 30px;
	font-family: sans-serif;
	border-bottom-left-radius: 10px;
}

@media only screen and (max-width: 1100px) {
	#info {
		font-size: 28px;
	}
}

@media only screen and (max-width: 780px) {
	#info {
		font-size: 20px;
	}
}


#userinfo{
	background-color:red;
	position: absolute;
	width: 40%;
	text-align: center;
	right:0;
	top:10%;
	font-size: 30px;
	font-family: sans-serif;
	border-bottom-left-radius: 10px;
}

@media only screen and (max-width: 1100px) {
	#userinfo {
		font-size: 28px;
	}
}

@media only screen and (max-width: 780px) {
	#userinfo {
		font-size: 20px;
	}
}


#auserinfo{
	background-color:red;
	position: absolute;
	width: 35%;
	text-align: center;
	right:0;
	top:10%;
	font-size: 30px;
	font-family: sans-serif;
	border-bottom-left-radius: 10px;
}

@media only screen and (max-width: 1100px) {
	#auserinfo {
		font-size: 28px;
	}
}

@media only screen and (max-width: 780px) {
	#auserinfo {
		font-size: 20px;
	}
}




#ainfo{
	position: absolute;
	right:0;
	top:0;
	top: -8px;
}

.drop::after {
	content: 'Drop Here!';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	color: #999;
	font-size: 14px;
	display: flex;
	justify-content: center;
	align-items: center;
	user-select: none;
	z-index: -123;
}

.drop1 {
	left: 45%;
	top: 24%;
	transform: translate(-50%, -50%);
	background: white;
}

.drop > img {
	width: 100%;
	height: 100%;
	margin: 0 auto;
}



.drop2 {
	left: 78%;
	top: 40.5%;
	transform: translate(-50%, -50%);
	background: white;
}

.drop3 {
	left: 30%;
	top: 58%;
	transform: translate(-50%, -50%);
	background: white;
}

.drop4 {
	left: 55%;
	top: 63.5%;
	transform: translate(-50%, -50%);
	background: white;
}


/*
#sopheading{
	position: absolute;
	left: 50%;
	top: 0%;
	transform: translateX(-50%);
	
}
*/

.btn {
	border: none;
	border-radius: 5px;
	border: 2px solid var(--text-color);
	background: #fff;
	color: var(--text-color);
	position: relative;
	margin: 10px;
	padding: 10px 25px;
	font-weight: 700;
/*	font-size: 20px;*/
	z-index: 0;
	overflow: hidden;
}


.btn:hover {
	color: #fff;
}

.btn1 {
	position: absolute;
	left: 0;
	top: -8px;
/*	width:20%;*/
}

.btn::after {
	content: '';
	width: 0%;
	height: 120%;
	background: var(--text-color);
	position: absolute;
	left: -5%;
	top: 0;
	z-index: -1;
	transition: all .2s ease-in-out;
	transform: skewX(10deg);
}

.btn:hover:after {
	width: 120%;
}

.quiz {
	margin: 20px auto 0px;
	width: 80%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	/*	min-height: 50vh;*/
	background: #fff;
}

.quiz__head {
	font-size: 30px;
	font-weight: 600;
	color: #222;
	width: 100%;
	text-align: center;
}

.blank {
	width: 200px;
	height: 200px;
	background: #ffff00;
}

@media only screen and (max-width: 700px) {
	.block-parent {
		width: 85%;
	}
}

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




.pos{
	background-color: #E8A87C; 
}

.adrop1 {
	left: 57%;
	top: 21.8%;
	transform: translate(-50%, -50%);
	background: white;
}

.drop > img {
	width: 100%;
	height: 100%;
	margin: 0 auto;
}



.adrop2 {
	left: 80%;
	top: 37%;
	transform: translate(-50%, -50%);
	background: white;
	
}

.adrop3 {
	left: 25%;
	top: 42%;
	transform: translate(-50%, -50%);
	background: white;
}

.adrop4 {
	left: 58%;
	top: 59%;
	transform: translate(-50%, -50%);
	background: white;
}


.sp{
	position: absolute;
	text-align: center;
	font-size:20px;
}

.sp1{
	top:18%;
	left:52%;
}

.sp2{
	top:34%;
	left:84%;
}

.sp3{
	top:51%;
	left:37%;
}

.sp4{
	top:57%;
	left:62%;
}

.asp1{
	top:16%;
	left:63%;
	
}

.asp2{
	top:32%;
	left:86%;
}

.asp3{
	top:43%;
	left:32%;
}

.asp4{
	top:60%;
	left:65%;
}


/*
input {
    -webkit-writing-mode: horizontal-tb !important;
    text-rendering: auto;
    color: -internal-light-dark(black, white);
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    appearance: textfield;
    background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59));
    -webkit-rtl-ordering: logical;
    cursor: text;
    margin: 0em;
    font: 400 13.3333px Arial;
    padding: 1px 2px;
    border-width: 2px;
    border-style: inset;
    border-color: -internal-light-dark(rgb(118, 118, 118), rgb(195, 195, 195));
    border-image: initial;
}
*/