/* esiliati.org - 2022 */

html,body {
	margin:0;
	padding:0;
	height:100%;
}

#container {
	position:relative;
	margin:0 auto; /* center, not in IE5 */
	height:auto !important; /* real browsers */
	height:100%; /* IE6: treaded as min-height*/
	min-height:100%; /* real browsers */
}

#content {
	padding:1em 1em 3em; /* bottom padding for footer */
}

#input {
	margin:0.3em;
}

.droparea {
    width: min(50vw,50px);
    height: min(20vh,20px);
    background: lightgray;
    padding: 1em;
    margin:0.3em;
}

#text {
	margin:0.3em;
	width:95%;
	padding: 0.5em;
	border-radius:5px;
	border:1px solid #7ac9b7;
	white-space: pre;
  	display:block;
	float: left;
}

#save_text, #download, #clear_text {
	margin:0.2em;
	padding: 0.2em;
	width: 8em;
}

.hide {
  display: none;
}

.hide:target {
  display: block;
}

/* ##################### */

button:disabled {
    background: #A5A5A5;
}


/* ##################### */

:root {
	--larghezza: min(80vw,700px);
}

/* testo sopra */

#help {
	text-align: center;
	clear: both;
	margin: 0.3em;
	width: var(--larghezza);
	font-size: 3vh;
}


/* immagine */

#image {
	clear: both;
	margin: 0.3em;
}

#logo {
	width: var(--larghezza);
}

#image img {
	width: var(--larghezza);
}

/* zona input */

#formarea {
	clear: both;
	margin: 0.3em;
}

::file-selector-button {
	border: 2px solid #666666;
	padding: .2em .4em;
	border-radius: .2em;
	background-color: #cccccc;
	transition: 1;
	font-size: 3vh;
}

::file-selector-button:hover {
	background-color: #dddddd;
	border: 2px solid #cccccc;
}

/* ##################### */
/* zerbino out */
/* zona barra e stato */

#status {
	clear: both;
	width: var(--larghezza);
}

progress {
	height: 3vh;
	margin: 1em;
}

#bar {
	float: left;
}

#message {
	margin:0.3em;
	float: left;
	font-size: 3vh;
}


/* zona indirizzo */

#url {
	margin:0.3em;
	clear:both;
}

#urlinput {
	margin: 0.3em;
	margin-left: 0em;
	width:min(55vw, 550px);
	height: 4vh;
	font-size: 3vh;

	border-radius:5px;
	border:1px solid #7ac9b7;
}

#copybtn {
	margin: 1vh;
}

.clippy {
	height: 4vh;
}

/* ##################### */
	
/* piede */

#footer {
	margin:0.3em;
	position: absolute;
	bottom: 0; 
	left: 0; 
	display: block;  
	unicode-bidi: embed; 
	font-family: monospace;
}