/*
 Theme Name:   JS Extendable
 Theme URI:    http://example.com/extendable/
 Description:  js upload integrated with the Extendable in a Child Theme
 Author:       Pony Platel
 Author URI:   http://design.studio
 Template:     extendable
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  extendable-child
*/



form fieldset{
	padding: 2em;
	border: solid 2px black;
	display: flex;
	flex-direction: column;
	font-size: 1em;
	gap: 1em;
}

form label{
	display: flex;
	flex-direction: column;
}

form input{
	height: 2em;
	font-size: 1em;
}

form input[type=file]{
	font-size: 0.7em;
}

form button{
	margin-top: 1em;
	padding: 0.5em 0.5em;
	background-color: black;
	color: white;
	font-size: 1em;
	text-transform: uppercase;
	width: 100%;
}

form button:disabled{
	opacity: 0.1;
}

#btn_logout{
	margin-top: 1em;
}

#showimage{
	display: grid;
	grid-template-columns: 1fr;
	grid-column-gap: 1em;
	grid-row-gap: 1em;
	padding: 1em;
}

#showimage img{
	border-radius: 1em;
	border: solid 1px rgba(0,0,0,0.5);
	overflow: hidden;
	width: 100%;
}

@media screen and (min-width: 4em) {
	.site-content {
		padding: 0 0 0;
	}

	.upload, .form-wrapper{
		display: flex;
		justify-content: center;
		width: 100vw;
	} 

	form fieldset{
		padding: 1em !important;
	}

	form{
		max-width: 400px;
		align-self: center;
	}
}

@media screen and (min-width: 48em) {
	.site-content {
		padding: 2.5em 0 0;
	}

	.upload, .form-wrapper{
		display: flex;
		justify-content: center;
	} 

	form{
		max-width: 400px;
		align-self: center;
	}
}