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

	.f-nav {height: 80px;}
    .f-btgN {font-size: 180%; margin-left: 10px;}
    .f-btgF {font-size: 130%; margin-right: 10px;}


	.btgN {
		min-height: 90px; 
		padding: 10px 0 5px 10px; 
		font-size: 240%;
	}
	.playNow {
		min-height: 90px; 
	}
	
	.btn:link, 
	.btn:visited{
		font-weight: 400;
		margin-top: 20px;
		font-size: 150%;
	}
	.btgF {
	    min-height: 90px; font-size: 150%;
	}
	.btgM {
		min-height: 90px;
	}
	.link1 {font: 700 22px 'Oswald', sans-serif;}
	
	.h31 {font-size: 180%; margin: 20px 0 35px 0;}
    .h32 {font-size: 180%; margin: 10px 0 30px 0;}
	
	.boxy {width: 30%; min-width: 490px;}
	
	.pnar {font-size: 130%; margin-bottom: 20px;}
	
	.container {padding-left: 50px; margin-bottom: 24px;}
	.containersub {padding-left: 50px; margin-bottom: 16px;}
    .containertop {padding-left: 50px;  margin-left: -30px; margin-bottom: 24px; font-size: 140%;}
	
	label {font-size: 144%;}
	
	/* green box */
	.checkmark {height: 31px; width: 31px;} 
	/* checkmark */
	.container .checkmark:after {
		  left: 7px;
		  top: 0px;
		  width: 12px;
		  height: 21px;
		  border-width: 0 6px 6px 0;
	}
	.containersub .checkmark:after {
		  left: 7px;
		  top: 0px;
		  width: 12px;
		  height: 21px;
		  border-width: 0 6px 6px 0;
	}
    
	.points {font-size: 120%;}
	
	input[type=text] {font-size: 130%;}
	
	.naro, .aslinko {
		font-size: 130%;
        line-height: 146%;
		width: 44%;
		margin-left: 28%; /* half of 30 to move the p to center */   
	}
	
	.btn:link, 
	.btn:visited,
	input[type=submit] {padding: 12px 35px; font-size: 130%; font-weight: 700;}
	
	.ot {float: left; margin-left: 1%; background-color: pink;}
	.nt {float: right; margin-right: 1%; background-color: #cecec3;}
    
    .choosebooks { /*container*/
        justify-content: center;
        gap: 170px;
    }
    .flname {gap: 30px;}
    .hr1 {top: -12px; left: -30px;}
    .flnoms {padding: 18px 20px 0 0; font-size: 110%;}
    .flnoms2 {padding: 18px 0px 0 0; color:#333;}
    #playername {width: 170px;}
    .reqd {font-size: 120%;}
}


@media only screen and (max-width: 1601px){ /* my laptop's screen. ---> When the page is less than this #, apply these rules */
	.f-nav {height: 60px;}
    .f-btgN {font-size: 150%; margin-left: 10px;}
    .f-btgF {font-size: 100%; margin-right: 10px;}
    
    .btgN {
		min-height: 80px; 
		padding: 10px 0 5px 10px; 
		font-size: 180%;
	}
	.playNow {
		min-height: 80px; 
	}
	
	.btn:link, 
	.btn:visited{
		font-weight: 400;
		margin-top: 12px;
		font-size: 130%;
	}
	.btgF {
	    min-height: 80px; font-size: 130%;
	}
	.btgM {
		min-height: 80px;
	}
	.link1 {font: 700 18px 'Oswald', sans-serif;}
    
    
    .h31 {font-size: 160%; margin: 20px 0 25px 0;}
    .h32 {font-size: 160%; margin: 7px 0 25px 0;}
    
    .pnar {font-size: 130%; margin-bottom: 20px;}
    
    .boxy {width: 40%; min-width: 512px;}
    
    .containertop {padding-left: 35px;  margin-left: -30px; margin-bottom: 24px; font-size: 115%;}
    .container {padding-left: 40px; margin-bottom: 24px;}
    .containersub {padding-left: 40px; margin-bottom: 16px;}
    
    label {font-size: 110%;}    
    
	/* green box */
	.checkmark {height: 28px; width: 28px;} 
	/* checkmark */
	.container .checkmark:after {
		  left: 7px;
		  top: 0px;
		  width: 9px;
		  height: 18px;
		  border-width: 0 5px 5px 0;
	}
	.containersub .checkmark:after {
		  left: 7px;
		  top: 0px;
		  width: 9px;
		  height: 18px;
		  border-width: 0 5px 5px 0;
	}
    
    .containertop .checkmark:after {
		  left: 7px;
		  top: 0px;
		  width: 9px;
		  height: 18px;
		  border-width: 0 5px 5px 0;
	}
		
	.points {font-size: 100%;}
	
	input[type=text] {font-size: 110%;}
    
    .naro, .aslinko {
		font-size: 110%;
		width: 40%;
		margin-left: 30%; /* half of 30 to move the p to center */   
	}
    
    .row {padding: 0 2%;}
    
    .ot {float: left; margin-left: 7%; background-color:orange;}
	.nt {float: right; margin-right: 7%; background-color: #cecec3;}
    
    .choosebooks { /*container*/
        justify-content: center;
        gap: 130px;
    }
    .hr1 {top: -15px; left: -30px;}
    .flname {gap: 20px;}
    .fl1 {margin-top: 10px;}
    .flnoms {padding: 7px 20px 0 0; font-size: 110%; color:#444;}
    .flnoms2 {padding: 3px 0px 0 0; color:#333;}
    #playername {width: 144px;}
    .reqd {font-size: 110%;}

    
}


@media only screen and (max-width: 1300px){
	.btgN {
		min-height: 60px; 
		font-size: 150%;
	}
	.playNow {
		min-height: 60px; 
	}
	.btgF {
		min-height: 60px; font-size: 100%;
	}
	.btgM {
		min-height: 60px;
		padding: 10px 10px 5px 0;
		font-size: 150%;
	}
	.link1 {font: 700 18px 'Oswald', sans-serif;}
	
	.h31 {font-size: 150%; margin: 20px 0 20px 0;}
    .h32 {font-size: 150%; margin: 7px 0 20px 0;}
    
	.pnar {font-size: 110%; margin-bottom: 20px;}
	
	.boxy {width: 46%; min-width: 395px;}
	
	.container {padding-left: 33px; margin-bottom: 20px;}
	.containersub {padding-left: 33px; margin-bottom: 12px;}
    .containertop {padding-left: 35px;  margin-left: -30px; margin-bottom: 24px; font-size: 105%;}
	
	label {font-size: 100%;}
	
	/* green box */
	.checkmark {height: 24px; width: 24px;} 
	/* checkmark */
	.container .checkmark:after {
		  left: 7px;
		  top: 0px;
		  width: 6px;
		  height: 15px;
		  border-width: 0 4px 4px 0;
	}
	.containersub .checkmark:after {
		  left: 7px;
		  top: 0px;
		  width: 6px;
		  height: 15px;
		  border-width: 0 4px 4px 0;
	}
	
	input[type=text] {font-size: 100%;}
	
	.naro, .aslinko {
        font-size: 100%;
		line-height: 140%;
		width: 51%;
        /*min-width: 452px;*/
		margin-left: 25%; /* half of 30 to move the p to center */           
         /* background: gray; */
	}
    
    .ot {float: left; margin-left: 2%; background-color: yellow;}
	.nt {float: right; margin-right: 2%; background-color: #cecec3;}
    
    .choosebooks { /*container*/
        flex-direction: row;
        justify-content: center;
        gap: 110px;
    }
    .hr1 {top: -15px; left: -30px;}
    .reqd {font-size: 100%;}

}








@media only screen and (max-width: 767px){
	.f-nav {height: 50px;}
    .f-btgN {font-size: 120%; margin-left: 10px;}
    .f-btgF {font-size: 90%; margin-right: 10px;}
    

	.btgN {font-size: 130%;}

    section {padding: 20px 0;}
    
    .boxy {width: 65%;}
    
   
    .points {font-size: 80%;}
    
	.naro, .aslinko {
        font-size: 95%;		
        margin-right:15%; margin-left: 15%;
		line-height: 135%;
		width: 75%;
        /*min-width: 380px;*/
        padding-right: 0px;        
        /*background: yellow;*/
 	}
    
	.c {font-size: 90%;}
	
    .ot {margin-left: 40%; margin-bottom:20px;}
	.nt {float: left; clear: both; margin-left: 40%;}
    
    .containertop {margin-bottom: 20px;}
    
    .choosebooks { /*container*/
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
    .hr1 {top: -12px; left: -30px;}
    .reqd {
        margin: 20px auto 0px auto;
        width: 80%;
        font-size: 100%;
    }
}

@media only screen and (max-width: 480px){
  
    .btgN {font-size: 110%;}
    
    section {padding: 25px 1%;}
    
    .h31, .h32{font-size:140%;}
    
    .pnar {font-size: 100%; margin-top:15px; margin-left: 5%; margin-right: 15%;}
    
    .boxy {width: 77%;}
    
    .boxy-low2 {	
	    margin-top: 15px; margin-left: 35%;
        
    }
    
    .naro, .aslinko {margin-left: 4%; margin-right: 4%; width: 92%;}

    .btn-ghost:link, .btn-ghost:visited {
        margin-top: 10px;
    }
    .btn-ghost:hover, .btn-ghost:active {
        margin-top: 10px;
    }

	.noms {
		padding: 7px 0px 0px 20px;
		font-size: 100%;
	}
    .c {font-size: 80%;} 
    
    .noms2{min-width: 180px; margin-left: 10px;} /*200*/
    
    .flnoms {padding: 7px 12px 0 0;}
    
    input[type=text] {width: 80%; margin-left: 7px;}
        
    
    .ot {margin-left: 20%;}
	.nt {float: left; margin-left: 20%;}
    
    .choosebooks { /*container*/
        gap: 24px;
    }
    .reqd {
        margin: 20px auto 0px auto;
        width: 90%;
        font-size: 90%;
    }
}