html {
	font-family: Helvetica;
}
body {
	margin: 0;
	display: grid;
  	grid-template-rows: auto 1fr auto;
  	min-height: 100vh;
  	grid-gap: 1rem;
  	background-color: #ffffff;
	background-image: url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h12v6H0V0zm28 8h12v6H28V8zm14-8h12v6H42V0zm14 0h12v6H56V0zm0 8h12v6H56V8zM42 8h12v6H42V8zm0 16h12v6H42v-6zm14-8h12v6H56v-6zm14 0h12v6H70v-6zm0-16h12v6H70V0zM28 32h12v6H28v-6zM14 16h12v6H14v-6zM0 24h12v6H0v-6zm0 8h12v6H0v-6zm14 0h12v6H14v-6zm14 8h12v6H28v-6zm-14 0h12v6H14v-6zm28 0h12v6H42v-6zm14-8h12v6H56v-6zm0-8h12v6H56v-6zm14 8h12v6H70v-6zm0 8h12v6H70v-6zM14 24h12v6H14v-6zm14-8h12v6H28v-6zM14 8h12v6H14V8zM0 8h12v6H0V8z' fill='%2300bcfc' fill-opacity='0.12' fill-rule='evenodd'/%3E%3C/svg%3E");
}
a {
	text-decoration: none;
	color: slateblue;
}
.btn-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: slateblue;
    cursor: pointer;
    width: auto;
}
.hide { display:none; }
h1,h2 {
	margin: 0;
}
body > header {
	justify-content: center;
  	display: grid;
  	text-align: center;
  	max-width: 1280px;
  	margin: auto;
}
body > header > h1 {
	font-family: cursive;
  	font-size: 3rem;
}
body > header > div {

}
body > header button {
	background: white;
  	border: 1px solid darkgray;
  	border-radius: 5px;
  	cursor: pointer;
  	width: 4rem;
}
body > header button.active {
	background-color: #dfdfdf;
}
body > header .flag {
	width: 1.5rem;
	height: 1.5rem;
}
about- {
	background-color: #cbdaf2;
  	border: 1px solid #5b75a0;
  	border-radius: 5px;
  	padding: .5rem 1rem;
  	margin: 1rem 1rem 0 1rem;
  	box-shadow: 2px 2px 4px #5b75a0;
  	font-size: .8rem;
}
about- p {
	margin:0;
}
main {
	display: flex;
	flex-wrap: wrap;
  	max-width: 1280px;
  	margin: auto;
  	gap: 1rem;
  	justify-content: center;
  	padding: 0 1rem;
  	height: 100%;
  	align-content: start;
}
article {
	border: 1px solid darkgray;
  	border-radius: 10px;
  	box-shadow: 2px 2px 5px gray;
  	padding: 1rem 1rem .25rem 1rem;
  	display: grid;
  	grid-template-rows: 1fr auto;
  	font-size: 80%;
  	background-color: white;
  	max-width: 350px;
  	width: 100%;
}
article img.thumb:not([src=""]) {
	width: 72px;
	height: 72px;
	border-radius: .5rem;
  	box-shadow: 2px 2px 5px black;
  	border: 1px solid white;
  	float: left;
  	margin-right: 1rem;
  	object-fit: cover;
  	background-image: url('no-image.svg');
  	background-size: cover;
}
article img.flag {
	width: 1rem;
	vertical-align: bottom;
	float: left;
}
article img.favicon {
	width: 16px;
	vertical-align: bottom;
	margin: 0 .25rem;
	border-radius: 3px;
}
article > p {
	margin: 0 0 1rem 0;
}
article > small {
	text-align: right;
}
footer {
	background-color: black;
 	color: white;
 	padding: 1rem;
 	display: flex;
  	flex-wrap: wrap;
  	gap: 1rem;
  	justify-content: space-evenly;
  	align-items: center;
}
footer > * {
	max-width: 350px;
	  width: 100%;
}
footer > small > span:before {
    content: attr(data-website);
    unicode-bidi: bidi-override;
    direction: rtl;
}
footer > small > span:after {
    content: attr(data-user);
    unicode-bidi: bidi-override;
    direction: rtl;
}
img[src="logo.svg"] {
	width: 4rem;
	vertical-align: middle;
	margin-right: .5rem;
}
form {
	display: flex;
}
input {
	outline: none;
	padding: .5rem;
  	border-radius: 2px;
  	border: 1px solid black;
}
input[type="url"] {
  	padding: .5rem;
  	flex-grow: 1;
}
input[type="url"]:focus {
	background-color: #cef8ff;
}
input[type="submit"] {
	background-color: #3367d6;
  	color: white;
  	font-weight: bold;
  	cursor: pointer;
}
body:has(> success-){overflow:hidden}
success-{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.5);display:flex;align-items:center;justify-content:center}
success- > div{position:relative;background:white;padding:20px;border-radius:5px;text-align:center;font-family:arial;color:lightslategray;margin:2rem;max-width:450px}
success- h3{color:darkcyan}
success- button{position:absolute;top:0;right:0;color:black;padding:0.5rem;background:transparent;border:none;cursor:pointer}