html{
	padding:0;
}

body{
	font-family: system-ui, sans-serif;
	font-weight: normal;
	background-color:#eee;
	padding:0;
	margin:0;
}

header{ 
	padding:1em;
	background-color:#444;
	color:white;
 }
header a{
	color:white;
	font-size: 1.2em;
	text-decoration: none;

}
header img{
	object-fit:cover;
	object-position: bottom;
	width:100%;
	max-height: 512px;
	height:auto;
	border-bottom:2px solid rgba(0,0,0,0.6); 
}
.header-image {
    max-width: 100%;
    height: 100px;
    display: block;
    margin: 0 auto 20px auto;
}

.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
}

.footer-right a {
    white-space: nowrap;
}

h1 a{
	color:rgba(0,0,0,0.5);
	transition:color 500ms;
}
h1 a:hover{
	color:rgba(0,0,0,0.8);
	transition:color 500ms;
}
a{
	text-decoration: none;
}

li{
	border-bottom:1px solid rgba(0,0,0,0.2);
	font-size: 1.3em;
}

li a{
	padding:0.5em;
	display: grid;
	grid-template-columns:  auto 1fr 2fr;
	transition:color 400ms;
}
li a:visited{
	color:#222;
}
li a:before{
	content:"🆕"
}

li a:hover{
	color:green;
	transition:color 400ms;
}

footer{ 
	padding:1em;
	background-color:#444;
	color:white;
 }
footer a{
	color:white;
	font-size: 1.2em;
	text-decoration: none;

}
/* states */
.active{
	color:black;
}
.active:before{
	content:"🟢";
}

.offline{
	color:red;
	text-decoration: line-through;
}
.offline:before{
	content:"🔴 ";
}

li a.new{
	color:#F60;
	font-weight: bold;

}
.new:before{
	content:"🔁 ";
}

.update_date{
	text-align: center;
}



.text{}
.url:before{
	content:" ➜ ";
}
.url{}

main{
	width:800px;
	margin:auto;
}
h1{
	text-transform: uppercase;
}

@media (max-width:799px){
main{
	width:100%;
}
li a{

	display: block;
	
}
li a span.url{
	display:block;
}
}