:root {
  --change: 10em;
}

*{      
-webkit-tap-highlight-color: transparent;
 }
 
::-moz-selection { /* Code for Firefox */
  color: white;
  background: orange;
}

::selection {
  color: white;
  background: orange;
}

@font-face {
  font-family: 'pompiere';
  src: url('a4/fonts/pompiere.woff2') format('woff2');
}

@font-face {
  font-family: 'tb_bold';
  src: url('10score2/fonts/THICCCBOI-Black.woff2') format('woff2');
}

@font-face {
  font-family: 'tb_normal';
  src: url('10score2/fonts/THICCCBOI-Regular.woff2') format('woff2');
}

  body::-webkit-scrollbar {
  width: 32px;
}
body {
  scrollbar-width: thin;
 
  scrollbar-color: 	#0000CD;
  overflow-x:hidden;
}

html,body{
    overflow-x: hidden;
}
body::-webkit-scrollbar-track {
  background: #fff;
  background: transparent;
  
}
body::-webkit-scrollbar-thumb {
  background-color:#aaa;
 height:100px;
  border-radius: 5px;
  border: 7px solid transparent;
  
   background-clip: content-box;
}


body{
margin:0;
font-family: 'tb_normal';
font-weight:300;
font-size:32px;
color:#00112C;

}

.mainTexts{
padding-left:30px;
margin-right:0px;
width:87%;
line-height:1.1em;
}
#opt1,#opt2,#opt3,#opt4,#opt5,#opt6{
	 cursor:pointer;
	 
	 
}


.standOutText{
font-size:1.1em;
font-weight:900;
}
.smalltext{
font-size:6px;

}
#textTable1{
	line-height:1.3em;
	border-collapse: separate;
  border-spacing: 0 65px;
  width:100%;
  margin-left:30px;
  font-size:0.6em;
  
  
}

#textTable1 td{
	text-align:center;
	padding:20px;
	
}

@keyframes opener1 {
	
  0% {
    margin-top:0px;
    height:100%;
    padding-top:20em;
  }
  100% {
      margin-top:10em;
      margin-top:var(--change);
    
  
    height:150px;
    padding-top:1.9em;
  }
}



#cover_2by{
display:none;
position:absolute;
background:#00112C;;
width:100%;
height:100%;
z-index:700;
padding:50px;
padding-top:20em;
}

.addanimation1{

animation: opener1 1.7s ease-in-out ;
animation-fill-mode: forwards;
}





#banner1{
background: -webkit-linear-gradient(top, #373737, #212121);
background:#00112C;
width:100%;
min-height:260px;
padding:50px;
padding-left:30px;
padding-right:50px;

}

.headingText{
 font-family: 'tb_bold';
font-weight:500;
font-size:16px;
color:white;
letter-spacing:1px;

}

.subheadingText{
font-family: 'tb_normal';
font-weight:300;
font-size:24px;
color:white;
width:90%;

}
.imagebox {
   display: flex;
   align-items:center;
   
}

.tableBox1{
	width:100%;
}

.progressButton{
	font-size:0.8em;
	margin-left:3em;
	padding:10px;
	border:2px solid #000;
	background:#eee;
	border-radius:5px;
}

.blackInk{

color:#000;
}

.usualDay1{
text-align:left;
width:100%;
background-color:black;
color:white;
padding-top:70px;
padding-bottom:40px;
}
.usualDay2{
text-align:center;
width:100%;

color:black;

}
.closingWords{
float:left;
padding-left:30px;
padding-right:40px;
font-size:14px;
margin-bottom:30px;
cursor:pointer;
}

.noselect{
user-select: none; /* standard */
  -moz-user-select: none; /* firefox specific */
  -webkit-user-select: none; /* Chrome, Opera and Safari*/
  -ms-user-select: none; /* IE, ms-edge */
}

@media (min-width: 768px) {

body{
margin:0;

font-weight:300;
font-size:24px;
}
.mainTexts{
padding-left:100px;
line-height:1.5em;
}

#cover_2by{
padding-left:200px;
display:block;
}


#banner1{
padding-left:200px;
}


.headingText{
font-size:32px;
}

.subheadingText{
font-size:24px;
}

.usualDay1{
padding-bottom:20px;
}

.progressButton{
	font-size:1em;
}

.smalltext{
font-size:10px;
padding-left:20px;

}


.imagebox {
   width:70%;
}

#textTable1{
  margin-left:100px;
  font-size:1em;
}

}

@media (min-width: 1200px) {

body{
margin:0;

font-weight:300;
font-size:42px;
}

.mainTexts{
padding-left:300px;
line-height:1.5em;
}

#cover_2by{
padding-left:400px;
display:block;
}

#banner1{
padding-left:400px;
}



.headingText{
font-size:54px;
}

.subheadingText{
font-size:24px;
}

.usualDay1{
padding-bottom:20px;

cursor: url('johndeveloper/2bymidnight/fav1.png'),auto;
  
}

.progressButton{
	font-size:1em;
}

.smalltext{
	padding-left:50px;
font-size:10px;

}

.imagebox {
   width:70%;
}

#textTable1{
  margin-left:100px;
  font-size:1em;
}

}