/*--------LANDSCAPE MODE---------------------------------------------------*/

@media screen and (max-width:1200px) and (orientation: landscape){
    
    html{

        font-family: 'Comic Neue';
        font-size: 22px;
        overflow-x: hidden;
        width:  100%;
        height: 100%; 
        margin: 0;

    }
    body{

        margin: 0;
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: black;
        width: auto!important;
        height: auto!important;
        overflow-x: hidden!important

    }
    div{

       display:none;
       
    }
    #orientation{

        height:100vh;
        width:100vw;
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-style:solid;
        border-color: black;
        border-width: 15px;
        background: #2980B9;  /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #FFFFFF, #6DD5FA, #2980B9);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to bottom, #FFFFFF, #6DD5FA, #2980B9); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        border-radius: 10%; 

    }
    #orientation p{

        text-align: center;
        font-size: 1.5rem;

    }
   
}

/*--------MOBILE ITERATION-----------------------------------------------------------*/

@media screen and (max-width: 480px) and (orientation: portrait){
    html{

        font-family: 'Comic Neue';
        font-size: 22px;
        overflow-x: hidden;
        width:  100%;
        height: 100%; 
        margin: 0;

    }
    body{

        margin: 0;
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: black;
        width: auto!important;
        height: auto!important;
        overflow-x: hidden!important

    }
    header{

        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center; 
        margin-top: 10%;
        margin-right: 1%;  

    }
    #heading{
        
        width:100vw;
        margin:2%;  
       
    }
    #sub-heading{

        width:70%

    }
    #P-INTRO{    

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        border-style:solid;
        border-color: black;
        border-width: 15px;
        height:100vh;
        width:100vw;
        margin-left:2%;
        margin-right:2%;
        background: #2980B9;  /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #FFFFFF, #6DD5FA, #2980B9);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to bottom, #FFFFFF, #6DD5FA, #2980B9); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        border-radius: 10%; 
     

    }
    #intro-penguin{

        margin-top: 20%;

    }
    .story{

        display: none;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center; 
        border-style:solid;
        border-color: black;
        border-width: 15px;
        height:100vh;
        width:100vw;
        background: #2980B9;  /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #FFFFFF, #6DD5FA, #2980B9);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to bottom, #FFFFFF, #6DD5FA, #2980B9); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        border-radius: 10%; 
    
    }
    .img-div{

        margin-top: -2%;
        margin-left:2%;  
        width:90%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center; 

    }
    .intro-img-div{

        margin-top: -10%;
        width:100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center; 

    }
    .penguin{

        height:150px;
        width:250px;
        border-radius: 10%;
        border:solid;
        border-color: black;
        border-width:10px;
        box-shadow: 2px 2px grey;

    }
    ol{

        margin-right:5%;

    }
    .story-text{

        margin-top: -15%;
        display: flex;
        flex-direction: column;
        align-items: center; 
       
    }
    h2{

        font-size: 1.2rem;
        text-align: center;
    }
 
    li{

        font-size: 0.7rem;
        list-style:circle;
        font-weight: bold;

    }
    .button-div{

        width:100%;
        display: flex;
        flex-direction: row;
        align-items: baseline;
        justify-content: space-evenly;
        margin-top: -15%;
          
    }
    .btn-style{

        border-radius: 15%;
        padding:10px;
        height: 50px;
        width:20%;
        background: #bdc3c7;  /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #2c3e50, #bdc3c7);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #2c3e50, #bdc3c7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        font-size: 0.6rem;
        font-weight: bolder;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-shadow: 2px 2px grey;
        border-width:5px;
        
    }
    #P-1btn{

        border-radius: 15%;
        padding:10px;
        width:20%;
        background-color:  #FFFFFF;;

    }
    strong{

        height:50px;
        background: #bdc3c7;  /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #bdc3c7, white);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #bdc3c7, white); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        width:60%;
        border-style: solid;
        border-color: black;
        border-radius: 10px;
        border-width:5px;
        font-size: 1rem;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;

    }
    .bullet-points{

        display: flex;
        flex-direction: row;
        justify-content: space-between;

    }
    .points-div{

        margin-top: 2%;
        width:100%;
        display: flex;
        flex-direction: column;
        align-items: center; 
        
          
    }
    #div-puzzle1{

        display: flex;
        flex-direction: column;
        align-items: center;
        width: 80%;
        background: #bdc3c7;  /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #bdc3c7, white);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #bdc3c7, white); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        border-radius: 10%;
        margin-top:2%;
        margin-bottom: 2%;
        padding:5%;
        border-style:solid;
        border-width:10px;
        box-shadow: 2px 2px grey;

    }
    .quiz-p{

        text-align: center;
        font-size: 0.8rem;
        font-weight: bold;
        margin:1%;

    }
    .quiz-input{

        width:60%;
        border-radius:10%;
        margin-bottom:1%;
        
    }
    span{

        font-size: 0.8rem;

    }
    strong{

        font-size: 0.8rem;
        box-shadow: 2px 2px grey;

    }
    .canvas-div{

        margin-top:10%;

    }
    canvas{

        border-style: solid;
        border-color: black;
        border-width: 10px;
        border-radius:10%;
        display:none;
        box-shadow: 2px 2px grey;
  
    }
    #start-button{

       margin-top:5%;
      
    }
    .hidden-btn{

        display: none;
        
    }
    .hidden-elem{

        display:none;

    }
    .shown-elem{

        display:flex;
  
    }
    #canvas-win{

        border-style: solid;
        border-color: black;
        border-width: 10px;
        border-radius:10%;
        padding: 5%;
        margin:5%;
        font-size:0.8rem;
        display:none;
        box-shadow: 2px 2px grey;

    }
    #canvas-intro{
        
        border-style: solid;
        border-color: black;
        border-width: 10px;
        border-radius:10%;
        display:none;
        padding: 5%;
        margin:5%;
        font-size:0.8rem;
        box-shadow: 2px 2px grey;

    }
    #sad-face{

        width: 150px;

    }
    .btn-cnv{
        
        width:35%;
        background-color: grey;
    
    }
    .canvas-div{

        margin-bottom: 10%;

    }
    #text-div{       
      
        margin-bottom: 10%;

    }
    .face{
       
        background: #bdc3c7;  /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #bdc3c7, white);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #bdc3c7, white); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }
    #P6gameDiv{
        margin-bottom: -15%;
        padding: bottom 15%;
        height:80vh
    }
    .tickncross{

        height:18px;
        width:18px;
        
    }
    #orientation{
        
        display:none;
        
    }
    #large-screen{

        display: none;

    }
    .end-Image{

        width:60px;
        height:60px;
        border-width: 5px;
        margin-top: -15%;

    }
    #P-END .button-div{
        margin-top: 1%;
    }
}

/*--------LOW RESOLUTION TABLETS & IPADS-----------------------------------------------------*/

@media only screen and (min-width: 481px) and (max-width:767px) and (orientation: portrait){
    
    html{

        font-family: 'Comic Neue';
        font-size: 22px;
        overflow-x: hidden;
        width:  100%;
        height: 100%;
         margin: 0;

    }
    body{

        margin: 0;
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: black;
        width: auto!important;
        height: auto!important;
        overflow-x: hidden!important

    }
    header{

        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center; 
        margin-top: 10%;
        margin-right: 1%;  

    }
    #heading{
        
        width:95vw;
        margin:1%;  
       
    }
    #sub-heading{

        width:70%

    }
    #P-INTRO{    

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        border-style:solid;
        border-color: black;
        border-width: 15px;
        height:100vh;
        width:100vw;
        margin-left:2%;
        margin-right:2%;
        background: #2980B9;  /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #FFFFFF, #6DD5FA, #2980B9);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to bottom, #FFFFFF, #6DD5FA, #2980B9); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        border-radius: 10%; 
        display:block;

    }
    
    .story{

        display: none;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center; 
        border-style:solid;
        border-color: black;
        border-width: 15px;
        height:100vh;
        width:100vw;
        background: #2980B9;  /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #FFFFFF, #6DD5FA, #2980B9);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to bottom, #FFFFFF, #6DD5FA, #2980B9); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        border-radius: 10%; 
    
    }
    .img-div{

        margin-top: -2%;
        margin-left:2%;  
        width:90%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center; 

    }
    .intro-img-div{

        margin-top: -10%;
        width:100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center; 

    }
    .penguin{

        height:25vh;
        width:350px;
        border-radius: 10%;
        border:solid;
        border-color: black;
        border-width:10px;
        box-shadow: 2px 2px grey;

    }
    #intro-penguin{

        margin-top: 20%;
        width:300px;
        height:20vh;

    }
   
    ol{

        margin-right:5%;

    }
    .story-text{
      
        margin-top: -15%;
        display: flex;
        flex-direction: column;
        align-items: center; 
       
    }
    h2{

        font-size: 1.2rem;
        text-align: center;
    }
 
    li{
        
        padding-right: 10%;
        font-size: 0.7rem;
        list-style:circle;
        font-weight: bold;

    }
    .button-div{

        width:100%;
        display: flex;
        flex-direction: row;
        align-items: baseline;
        justify-content: space-evenly;
        margin-top: -15%;
          
    }
    .btn-style{

        border-radius: 15%;
        padding:10px;
        height: 70px;
        width:20%;
        background: #bdc3c7;  /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #2c3e50, #bdc3c7);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #2c3e50, #bdc3c7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        font-size: 0.8rem;
        font-weight: bolder;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-shadow: 2px 2px grey;
        border-width:5px;
        
    }
    #P-1btn{

        border-radius: 15%;
        padding:10px;
        width:30%;
        background-color:  #FFFFFF;;
        margin-top: 10%;

    }
    strong{

        height:60px;
        background: #bdc3c7;  /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #bdc3c7, white);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #bdc3c7, white); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        width:55%;
        border-style: solid;
        border-color: black;
        border-radius: 10px;
        border-width:5px;
        font-size: 1.2rem;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;

    }
    .bullet-points{

        display: flex;
        flex-direction: row;
        justify-content: space-between;

    }
    .points-div{

        width:100%;
        display: flex;
        flex-direction: column;
        align-items: center; 
        
          
    }
    #div-puzzle1{

        display: flex;
        flex-direction: column;
        align-items: center;
        width: 80%;
        background: #bdc3c7;  /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #bdc3c7, white);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #bdc3c7, white); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        border-radius: 10%;
        margin-top:2%;
        margin-bottom: 2%;
        padding:5%;
        border-style:solid;
        border-width:10px;
        box-shadow: 2px 2px grey;

    }
    .quiz-p{

        text-align: center;
        font-size: 0.9rem;
        font-weight: bold;
        margin:1%;

    }
    .quiz-input{
        height:25px;
        width:60%;
        border-radius:10%;
        margin-bottom:1%;
        
    }
    span{

        font-size: 1rem;

    }
    strong{
    
        box-shadow: 2px 2px grey;

    }
    .canvas-div{

        margin-top:10%;

    }
    canvas{

        border-style: solid;
        border-color: black;
        border-width: 10px;
        border-radius:10%;
        display:none;
        box-shadow: 2px 2px grey;
  
    }
    #start-button{

       margin-top:5%;
      
    }
    .hidden-btn{

        display: none;
        
    }
    .hidden-elem{

        display:none;

    }
    .shown-elem{

        display:flex;
  
    }
    #canvas-win{

        border-style: solid;
        border-color: black;
        border-width: 10px;
        border-radius:10%;
        padding: 5%;
        margin:5%;
        font-size:0.8rem;
        display:none;
        box-shadow: 2px 2px grey;

    }
    #canvas-intro{
        
        border-style: solid;
        border-color: black;
        border-width: 10px;
        border-radius:10%;
        display:none;
        padding: 5%;
        margin:5%;
        font-size:0.8rem;
        box-shadow: 2px 2px grey;

    }
    #sad-face{

        width: 150px;

    }
    .btn-cnv{
        
        width:35%;
        background-color: grey;
    
    }
    .canvas-div{

        margin-bottom: 10%;

    }
    #text-div{

        margin-top:5%;
        margin-bottom: 10%;

    }
    .face{
       
        background: #bdc3c7;  /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #bdc3c7, white);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #bdc3c7, white); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }
    #P6gameDiv{
        margin-bottom: -15%;
        padding: bottom 15%;
        height:80vh
    }
    .tickncross{

        height:18px;
        width:18px;
        
    }
    #orientation{
        
        display:none;

    }
    #large-screen{

        display: none;

    }
    .end-Image{

        width:100px;
        height:100px;
        border-width: 7.5;
        margin-top: -10%;

    }
    #P-END .button-div{
        margin-top: 1%;
    }
    
}

/*--------TABLET IPADS POTRAIT MODE---------------------------------------------------*/

@media only screen and (min-width: 768px) and (max-width:1023px)and (orientation: portrait){

    html{

        font-family: 'Comic Neue';
        font-size: 22px;
        overflow-x: hidden;
        width:  100%;
        height: 100%;
         margin: 0;

    }
    body{

        margin: 0;
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: black;
        width: auto!important;
        height: auto!important;
        overflow-x: hidden!important

    }
    header{

        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center; 
        margin-top: 5%;
        margin-right: 1%;  

    }
    #heading{
        
        width:100vw;
        margin:2%;  
       
    }
    #sub-heading{

        width:70%

    }
    #P-INTRO{    

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        border-style:solid;
        border-color: black;
        border-width: 15px;
        height:100vh;
        width:100vw;
        margin-left:2%;
        margin-right:2%;
        background: #2980B9;  /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #FFFFFF, #6DD5FA, #2980B9);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to bottom, #FFFFFF, #6DD5FA, #2980B9); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        border-radius: 10%; 
        display:block;

    }
    
    .story{

        display:none;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center; 
        border-style:solid;
        border-color: black;
        border-width: 15px;
        height:100vh;
        width:100vw;
        background: #2980B9;  /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #FFFFFF, #6DD5FA, #2980B9);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to bottom, #FFFFFF, #6DD5FA, #2980B9); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        border-radius: 10%; 
    
    }
    .img-div{

        margin-top: -2%;
        margin-left:2%;  
        width:90%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center; 

    }
    .intro-img-div{

        margin-top: -10%;
        width:100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center; 

    }
    .penguin{

        height:30vh;
        width:500px;
        border-radius: 10%;
        border:solid;
        border-color: black;
        border-width:10px;
        box-shadow: 2px 2px grey;
        margin-bottom: -10%;

    }
    #intro-penguin{

        margin-top: 20%;
        width:500px;
        height:30vh;
        margin-bottom:0;

    }
   
    ol{

        margin-right:5%;

    }
    .story-text{
      
        margin-top: -15%;
        display: flex;
        flex-direction: column;
        align-items: center; 
       
    }
    h2{

        font-size: 1.5rem;
        text-align: center;
    }
 
    li{

        margin-left: 5%;
        line-height: 1.5;
        padding-right: 10%;
        font-size: 0.9rem;
        list-style:circle;
        font-weight: bold;

    }
    #P-INTRO li{

        margin-left:25%;
    }
    .button-div{

        width:100%;
        display: flex;
        flex-direction: row;
        align-items: baseline;
        justify-content: space-evenly;
        margin-top: -15%;
          
    }
    .btn-style{

        border-radius: 15%;
        padding:10px;
        height: 80px;
        width:20%;
        background: #bdc3c7;  /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #2c3e50, #bdc3c7);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #2c3e50, #bdc3c7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        font-size: 0.8rem;
        font-weight: bolder;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-shadow: 2px 2px grey;
        border-width:5px;
        
    }
    #P-1btn{

        border-radius: 15%;
        padding:10px;
        width:30%;
        background-color:  #FFFFFF;;
        margin-top: 10%;

    }
    strong{

        height:70px;
        background: #bdc3c7;  /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #bdc3c7, white);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #bdc3c7, white); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        width:60%;
        border-style: solid;
        border-color: black;
        border-radius: 10px;
        border-width:5px;
        font-size: 1.2rem;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;

    }
    .bullet-points{

        display: flex;
        flex-direction: row;
        justify-content: space-between;

    }
    .points-div{

        margin-top: 2% ;
        width:100%;
        display: flex;
        flex-direction: column;
        align-items: center; 
        
          
    }
    #div-puzzle1{

        display: flex;
        flex-direction: column;
        align-items: center;
        width: 80%;
        background: #bdc3c7;  /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #bdc3c7, white);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #bdc3c7, white); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        border-radius: 10%;
        margin-top:2%;
        margin-bottom: -10%;
        padding:5%;
        border-style:solid;
        border-width:10px;
        box-shadow: 2px 2px grey;

    }
    .quiz-p{

        text-align: center;
        font-size: 1rem;
        font-weight: bold;
        margin:1%;

    }
    .quiz-input{

        font-size: 0.9rem;
        height:30px;
        width:60%;
        border-radius:10%;
        margin-bottom:1%;
        
    }
    span{

        font-size: 1rem;

    }
    strong{
    
        box-shadow: 2px 2px grey;

    }
    .canvas-div{

        margin-top:10%;

    }
    canvas{

        border-style: solid;
        border-color: black;
        border-width: 10px;
        border-radius:10%;
        display:none;
        box-shadow: 2px 2px grey;
  
    }
    #start-button{

       margin-top:5%;
      
    }
    .hidden-btn{

        display: none;
        
    }
    .hidden-elem{

        display:none;

    }
    .shown-elem{

        display:flex;
  
    }
    #canvas-win{

        border-style: solid;
        border-color: black;
        border-width: 10px;
        border-radius:10%;
        padding: 5%;
        margin:5%;
        font-size:1.2rem;
        display:none;
        box-shadow: 2px 2px grey;

    }
    #canvas-intro{
        
        border-style: solid;
        border-color: black;
        border-width: 10px;
        border-radius:10%;
        display:none;
        padding: 5%;
        margin:5%;
        font-size:1.2rem;
        box-shadow: 2px 2px grey;

    }
    #sad-face{

        width: 150px;

    }
    .btn-cnv{
        
        width:35%;
        background-color: grey;
    
    }
    .canvas-div{

        margin-bottom: 10%;

    }
    #text-div{

        margin-top:5%;
        margin-bottom: 10%;

    }
    .face{
       
        background: #bdc3c7;  /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #bdc3c7, white);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #bdc3c7, white); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }
    #P6gameDiv{
        margin-bottom: -15%;
        padding: bottom 15%;
        height:80vh
    }
    .tickncross{

        height:18px;
        width:18px;
        
    }
    #orientation{
        
        display:none;
        
    }
    #large-screen{

        display: none;

    }
    .end-Image{

        width:150px;
        height:150px;
        margin-top: -20%;

    }
    #P-END .button-div{
        margin-top: 5%;
    }

}

/*--------MEDIUM AND LARGE SCREEN---------------------------------------------------*/

@media only screen and (min-width:1201px) {

    body{

        display: none;

    }
    html{

        font-family: 'Comic Neue';
        font-size: 22px;
        overflow-x: hidden;
        width:  100%;
        height: 100%; 
        margin: 0;

    }
    body{

        margin: 0;
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: black;
        width: auto!important;
        height: auto!important;
        overflow-x: hidden!important

    }
    div{

       display:none;
       
    }
    #large-screen{

        height:100vh;
        width:100vw;
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-style:solid;
        border-color: black;
        border-width: 15px;
        background: #2980B9;  /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #FFFFFF, #6DD5FA, #2980B9);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to bottom, #FFFFFF, #6DD5FA, #2980B9); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        border-radius: 10%; 

    }
    #large-screen p{

        text-align: center;
        font-size: 2rem;

    }
    #orientation{
        
        display:none;
        
    }
    #large-screen{

        display: flex;

    }
   
}