@page { 
    size: auto;
    margin: 1.5cm 1cm 2cm 1cm; 
	} 

body{
	-webkit-print-color-adjust: exact !important;
	print-color-adjust: exact; 
	line-height: 1.25;
	}

.button-wrapper, .split-wrapper, #bottom-button-wrapper, button.large{ display: none; }
.print-only{ display: block !important; }
.no-print, #header-wrapper{ display: none !important; }
#back-to-top{ display: none !important; }
#header-wrapper{ display: none; }
#next-button, #skip{ display: none; }

button, button:hover, button.red, button.red:hover {
	background-color: transparent;
	font-weight: bold;
	color: #000;
	padding: .25rem;
	transform: scale(1);
	}

video {display: none;}

/* link formatting */ 
footer { 
	padding-left: 0;
	padding-right: 0; 
	}

footer a::after { 
	content: " (" attr(href) ") "; }
a:link, a:visited, a:hover, .link, .link:hover {
	font-weight: normal;
	color: #000;
	}	
footer a:link, footer a:visited {
	font-weight: normal;
	text-decoration: none;
	font-size: .85rem;
	}		

.top-message-wrapper.show{ display: none; }
#inner-wrapper{ margin:0; }


h1{ 
	padding:  0;
	margin: 0;
	font-size: 1.7rem; 
	font-family: "Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
	letter-spacing: normal;
    word-spacing: normal;
	}
h2 {
	font-size: 1.3rem;
    padding: .75rem 0 0.15rem 0;
	}
p + h2, ul + h2, .img-right-wrapper + h2{
	padding-top: 1rem;
	}	
h1 + h2 { padding-top: 1rem; }	
.toggle-box + h2 { padding-top: 1.5rem; }

ul { margin: 0.5rem 0 0.5rem 1rem; }
li{	padding: .15rem 0; }

hr{ font-size: 1.5rem; }

hr.dotted{ margin: 1rem 0 1rem 0; }


.img-right-wrapper img{ width: 12rem; }
.img-right-wrapper.small img { width: 8rem; }
.img-center-wrapper img{ width: 70%; }
.img-center-wrapper.small img{ width: 50%; }		


/* FOOTER */ 
footer li{
	padding:0;
	line-height: 1rem;
	}
footer{
	padding-top: .5rem;
	font-size: .85rem;
	margin: 1rem 0 0 0;
	}	
/* last link (About the game) isn't shown because of relative path. This removes last pipe */ 	
footer li:nth-last-child(2)::after{
	content: '';
	}


table { border: none; }
td { padding: .15rem .5rem; }
td { 
	padding: .15rem .5rem; 
	font-weight: bold;
	}


.toggle-box {
	border: 1px solid #ccc;
	border-left: none;
	border-right: none;
	padding: .5rem 0;
	margin: 1rem 0;
	}
.toggle-box.show{
	display: block;
	}
.toggle-title {
	font-size: 1rem;
	color: #000;
	padding: 0;
	color: #000;
	background-color: transparent;
	}
.toggle-title:hover{
	background-color: transparent;
	}	
.toggle-box .toggle-content-wrapper {
	border: none;
	padding: 0;
	}	
.toggle-box .arrow, .toggle-box.show .arrow, .toggle-box .blue.arrow, .toggle-box.show .blue.arrow{
	background-image: none;
	}	
.toggle-box + .toggle-box{
	border-top: none;
	margin-top: -.5rem;
	}
.toggle-title.icon img { display: none; }
.toggle-title.icon { padding: 0; }
.toggle-box .blue, .toggle-box .blue:hover{ color: #000; }

#data-collected-wrapper{ margin: 1rem 0 1.5rem; }

.icon-grid{
    grid-template-columns: 5rem auto;
    grid-gap: 1.5rem 1.5rem;
    padding: 1rem 0;
	}
.icon-grid.small {
	grid-template-columns: 3.5rem auto;
	grid-gap: .5rem .75rem;
	}	
.icon-grid.mini {
    grid-template-columns: 2.25rem auto;
    grid-gap: 1.5rem .75rem;
	}
.item-info-grid{
	grid-template-columns: 5rem auto;	
	break-inside: avoid;
	margin-top: .5rem;
	grid-gap: 1.5rem;
	}
.icon-grid .attention{ 
	background-color: transparent; 
	padding: 0;
	margin: -.5rem 0 .5rem 0;
	}


/* HOME -------------------- */
#home-title {
    font-size: 2rem;
    line-height: 2rem;
    margin: 0;
    padding: 0;
    font-weight: bold;
    color: #000;
    }
.banner {
	background-color: transparent;
    margin: 1rem 0 2rem 0;
    padding: 0;
    font-weight: normal;
    }    
.main-icons { 
	grid-gap: 1rem 2rem; 
	margin-bottom: 2rem;
	}
.main-icons > div img {
	width: 50%;
	margin-bottom: 0;
	}
.main-icons button { 
	padding: .5rem 0 0 0; 
	margin: 0;
	}