/* ----------------------------------------GLOBAL SETTINGS----------------------------------------- */
body{
    height: 100vh !important;
    width: 100vw !important;
    max-height: 100vh !important;
    max-width: 100vw !important;
    margin: 0px !important;
    font-size: 100% ;
    left: 0 !important;
    border-style: none;
	font-family: 'Baloo Thambi', cursive;
	text-shadow : 1px 1px powderblue;
	background-color: skyblue;
	-webkit-background-size: 100% 100%!important;
	-moz-background-size: 100% 100%!important;
	-o-background-size: 100% 100%!important;
	background-size: 100% 100%!important;
    background-repeat: no-repeat;
	overflow: hidden;
}

/* Secret shortcut to QnA */
#next
{
	position: absolute;
	right: 100px;
	bottom: 58px;
	width: 20px;
	height: 10px;
	font-family: serif;
	font-size: .2em;
	color: navy;
	cursor: pointer;
}

#nar1, #nar2, #nar3, #nar4{
    /* background-color: whitesmoke; */
    width: 85vw ;
    margin-top: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 5vh !important;
    text-align: center !important;
    padding: 1vh !important;
    border-radius: 5px !important;
}



#scren6-1{
    display: none;
}

#results{
    display:none;
}

#yesbutton, #nobutton{
    width: 60% ;
    padding: 0.1vh !important;
    background-color: rgba(255, 255, 255, 0.2);
    margin: auto !important;
    text-align: center !important;
    border-radius: 5px !important;
    cursor: pointer;
}

#displayinit{
    background-color: rgba(255, 255, 255, 0.14);
    /* border-radius: 5px; */
    text-align: center;
}

#question{
    background-color: rgba(255, 255, 255, 0.2);
    width: 80vw !important;
    margin-top: 2vh !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 3vh !important;
    padding: 1vh !important;
    border-radius: 5px !important;
}

#results{
    background-color: rgba(255, 255, 255, 0.2);
    width: 90vw !important;
    margin-top: 2vh !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: auto !important;
    border-radius: 5px !important;
    padding: 1vh !important;
}

#replay{
    color:rgba(255, 255, 255, 0.44);
    background-color: rgba(0, 128, 0, 0.77);
    padding: 1vh !important;
    border-radius: 5px !important;
    text-align: center;
    width: 20vw !important;
    margin: auto !important;
    cursor: pointer;
}

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

#result3, #link3, #credits p, #credits{
    margin: auto !important;
}

#link0, #link1{
    margin: auto !important;
    text-align: center;
}

#link0 a, #link1 a{
    margin: auto !important;
    text-align: center;
}

#result1{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

#result2{
    margin-bottom: 0 !important;
}


@media (min-width: 200px) and (orientation: portrait){
    #displayinit{
        text-align: center;
        font-size: 30%;
    }
    #line1a ,#line2a, #line3a, #line4a{
        font-size: 160% !important;
    }
    #yesbutton, #nobutton{
        font-size: 100% !important;
        width: 40% !important;
    }
}

@media (min-width: 400px) and (orientation: portrait){
    #displayinit{
        text-align: center;
        font-size: 70%;
    }
}

@media (orientation: landscape){
    #displayinit{
        text-align: center;
        font-size: 70%;
    }
    #line1a ,#line2a, #line3a, #line4a{
        font-size: 160% !important;
    }
    #yesbutton, #nobutton{
        font-size: 100% !important;
        width: 30% !important;
    }
}

/* -------------------------------------------VIEWPORT-1------------------------------------------ */
/* ---------------------------------------320x480------------------------------------------------ */
/* ORIENTATION: PORTRAIT */
/* MIN. HEIGHT: 480px            MIN.WIDTH: 320px            */
/* MAX. HEIGHT: 639px            MAX.WIDTH: 359px            */
@media (max-height:639px) and (max-width: 359px){
   #displayinit{
       text-align: center;
       font-size: 30% !important;
   }
}

/* ORIENTATION: LANDSCAPE*/
/* MIN. HEIGHT: 320px            MIN.WIDTH: 480px            */
/* MAX. HEIGHT: 359px            MAX.WIDTH: 639px            */
@media (max-height:359px) and (max-width: 639px){
    #question{
        width : 90vw !important;
    }
    #displayinit{
        text-align: center;
        font-size: 70% !important;
    }
    #result2{
        margin-top: 0 !important;
    }
    #result3, #link0, #link1{
        font-size: 80% !important;
    }
    #link3{
        font-size: 70% !important;
    }
    #credits{
        font-size: 40% !important;
    }
}


/* -------------------------------------------VIEWPORT-2------------------------------------------ */
/* ---------------------------------------360x640------------------------------------------------ */
/* ORIENTATION: PORTRAIT */
/* MIN. HEIGHT: 640px            MIN.WIDTH: 360px            */
/* MAX. HEIGHT: 959px            MAX.WIDTH: 539px            */
@media (min-height:640px) and (min-width:360px) and (max-height:959px) and (max-width: 539px){
    #displayinit{
        text-align: center;
        font-size: 50% !important;
    }
    #line1a ,#line2a, #line3a, #line4a{
        font-size: 150% !important;
    }
    #yesbutton, #nobutton{
        font-size: 100% !important;
        width: 50% !important;
    }
}



/* ORIENTATION: LANDSCAPE*/
/* MIN. HEIGHT: 360px            MIN.WIDTH: 640px            */
/* MAX. HEIGHT: 539px            MAX.WIDTH: 959px            */
@media (min-height:360px) and (min-width:640px) and (max-height:539px) and (max-width: 959px){
    #line1a ,#line2a, #line3a, #line4a{
        font-size: 140% !important;
    }
    #yesbutton, #nobutton{
        font-size: 100% !important;
        width: 30% !important;
    }
    #question{
        width : 90vw !important;
    }
    #displayinit{
        text-align: center;
        font-size: 70% !important;
    }
    #result2{
        margin-top: 0 !important;
    }
    #result3, #link0, #link1{
        font-size: 80% !important;
    }
    #link3{
        font-size: 70% !important;
    }
    #credits{
        font-size: 40% !important;
    }
}

/* -------------------------------------------VIEWPORT-3------------------------------------------ */
/* ------------------------------------------540x960------------------------------------------------ */
/* ORIENTATION: PORTRAIT */
/* MIN. HEIGHT: 960px             MIN.WIDTH: 540px           */
/* MAX. HEIGHT: 1023px            MAX.WIDTH: 575px            */
@media (min-height:960px) and (min-width:540px) and (max-height:1023px) and (max-width: 575px){
    #line1a ,#line2a, #line3a, #line4a{
        font-size: 200% !important;
    }
    #yesbutton, #nobutton{
        font-size: 120% !important;
        width: 40% !important;
    }
    #displayinit{
        text-align: center;
        font-size: 50% !important;
    }
}

/* ORIENTATION: LANDSCAPE */
/* MIN. HEIGHT: 540px             MIN.WIDTH: 960px           */
/* MAX. HEIGHT: 575px            MAX.WIDTH: 1023px            */
@media (min-height:540px) and (min-width:960px) and (max-height:575px) and (max-width: 1023px){
    #line1a ,#line2a, #line3a, #line4a{
        font-size: 200% !important;
    }
    #yesbutton, #nobutton{
        font-size: 100% !important;
        width: 25% !important;
    }
    #question{
        width : 90vw !important;
    }
    #displayinit{
        text-align: center;
        font-size: 80% !important;
    }
    #result2{
        margin-top: 0 !important;
    }
    #result3, #link0, #link1{
        font-size: 80% !important;
    }
    #link3{
        font-size: 80% !important;
    }
    #credits{
        font-size: 50% !important;
    }
}

/* -------------------------------------------VIEWPORT-4------------------------------------------ */
/* ------------------------------------------1024x576------------------------------------------------ */
/* ORIENTATION: PORTRAIT */
/* MIN. HEIGHT: 1024px             MIN.WIDTH: 576px           */
/* MAX. HEIGHT: 1279px            MAX.WIDTH: 719px            */
@media (min-height:1024px) and (min-width:576px) {
    #displayinit{
        text-align: center;
        font-size: 100%;
    }
    #line1a ,#line2a, #line3a, #line4a{
        font-size: 200% !important;
    }
    #yesbutton, #nobutton{
        font-size: 120% !important;
        width: 40% !important;
    }
    #question{
        font-size: 140% !important;
    }
    #results{
        font-size: 150% !important;
    }
}


/* ORIENTATION: LANDSCAPE */
/* MIN. HEIGHT: 576px             MIN.WIDTH: 1024px           */
/* MAX. HEIGHT: 719px            MAX.WIDTH: 1279px            */
@media (min-height:576px) and (min-width:1024px) {
    #displayinit{
        text-align: center;
        font-size: 100%;
    }
    #line1a ,#line2a, #line3a, #line4a{
        font-size: 200% !important;
    }
    #yesbutton, #nobutton{
        font-size: 120% !important;
        width: 20% !important;
    }
    #question{
        font-size: 140% !important;
    }
    #results{
        font-size: 150% !important;
    }
}