@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;700&display=block');
@import "default.css";
@import "sidebar.css";
@import "result.css";
@import "login.css";
@import "search.css";
@import "popup.css";

body {
	width: 100vw;
	height: 100%;

	overflow: hidden;

	padding: 0;
	margin: 0;

	background-color: #181818;
}

.container {
	position: fixed;
	display: block;

	top: 28px;
	
	width: 100vw;
	height: 100%;

	overflow: hidden;

	padding: 0;
	margin: 0;
}

#generator {
	background-color: #181818;
}

#header {
	position: fixed;
	display: flex;

	top: 0;
	left: 0;

	width: 100vw;
	height: 32px;

	background-color: #131313;
	z-index: 999;
}

.tab {
	display: flex;

	color: #f9f9f98f;
	font-size: 14px;

	width: 90px;
	height: 100%;

	justify-content: center;
	align-items: center;
}

.tab:hover {
	background-color: #181818;
	cursor: pointer;
}

#tab_generator.selected {
	background-color: #1f1f1f;
	color: #f9f9f9;
}

#tab_search {
	display: none;
}
#tab_search.selected {
	background-color: #1f1f1f;
	color: #f9f9f9;
}

#background {
	display: none;
	position: fixed;

	top: 0px;
	left: 0px;

	width: 100vw;
	height: 100%;

	z-index: 9999;

	background-color: #181818;
}

#imageUploader {
	display: flex;
	visibility: hidden;
	position: fixed;

	justify-content: center;
	align-items: center;

	top: 0px;
	left: 0px;

	width: 100vw;
	height: 100%;

	z-index: 9999;

	background-color: rgba(0, 0, 0, 0.5);
}

#imageUploader.shown {
	visibility: visible;
}

.mingcute--upload-2-line {
	display: inline-block;
	width: 70px;
	height: 70px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath d='M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='white' d='M20 15a1 1 0 0 1 1 1v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4a1 1 0 1 1 2 0v4h14v-4a1 1 0 0 1 1-1M12.884 3.474L16.95 7.54a1 1 0 1 1-1.414 1.414L13 6.42V16a1 1 0 1 1-2 0V6.419L8.464 8.954A1 1 0 0 1 7.05 7.54l4.066-4.066a1.25 1.25 0 0 1 1.768 0'/%3E%3C/g%3E%3C/svg%3E");
}

/* Mobile */
@media (max-width:480px) {
	#login {
		width: 100vw;
		height: 100%;
	}
}

/* Tablet */
@media (max-width:1023px) {
	h1 {
		margin-top: 40px;
	}
	#firstTitle {
		margin-top: 5px;
	}

	#sidebar {
		position: fixed;
		bottom: 0px;

		width: 100vw;
		height: 120px;

		border: none;

		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);

		transition: height 0.4s;
	}
	#sidebar.expanded {
		height: 70%;
		bottom: 70px;
	}

	#dropdown_imgsize {
		width: 220px;
	}
	
	#maid {
		display: none;
	}

	.up {
		content: url('https://api.iconify.design/mingcute/up-small-fill.svg?color=%23f9f9f9');
		width: 40px;

		transition: transform 0.3s ease-in;
	}
	.up.rotate {
		transform: rotate(180deg);
	}

	#expand {
		display: flex;
		width: 100%;
		height: 45px;

		justify-content: center;
	}

	#sidebar .footer {
		position: fixed;
		bottom: 0px;
		height: 90px;

		border-top: 2px solid #1f1f1f;

		box-shadow: 0 40px 0px 0 #1f1f1f;
	}

	#image {
		position: fixed;

		top: 32px;
		left: 0px;
		
		width: 100vw !important;
		height: calc(100% - 120px - 32px);
	}

	#info {
		padding: 10px;
	}

	#presetBtn {
		left: 15px;
	}

	#preset {
		left: 0px;
		z-index: 999;
	}

	h1, h2, .h2, textarea, .row, input[type="range"], .rowcb,
	input[type='file'] + label, .upload, #vibe, .grid
	{
	
		margin-left: 20px;
		margin-right: 20px;
	}

	#generate {
		margin: 0px 20px;
	}

	#tab_generator.selected {
		background-color: #181818;
	}

	#wildcardsList {
		margin-left: 20px;
		margin-right: 20px;
	}
}