@import url("https://fonts.cdnfonts.com/css/poppins");

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	background: none;
	border: none;
	outline: none;
	font-family: "Poppins", sans-serif;
	text-decoration: none;
	color: #000;
}

::-webkit-scrollbar {
	display: none;
}

body {
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background: #fff;
	padding: 0 40px;
	display: grid;
	place-content: center;
	min-width: 300px;
	width: 100vw;
	min-height: 490px;
	height: 100vh;
	position: relative;

	* {
		transition: 0.4s ease;
	}

	.border {
		border: 1px solid #ccc;
		border-radius: 15px;
		display: flex;
		box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
			rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
	}

	#container {
		width: 250px;
		height: 250px;
		padding: 20px 10px;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: relative;
		margin-bottom: 10px;

		.inputs {
			padding: 10px 15px;
			border-radius: 12px;
			top: -25px;
			right: -25px;
			position: absolute;
			background: #060606;
			display: flex;
			box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
				rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;

			::placeholder {
				color: #ccc;
			}

			* {
				color: #fff;
			}

			input {
				width: 180px;
			}

			label {
				cursor: pointer;
			}
		}

		@media (max-width: 330px) {
			.inputs {
				right: 10px;
			}
		}
	}

	#fileDescription {
		position: absolute;
		width: 250px;
		padding: 10px 15px;
		display: flex;
		align-items: start;
		gap: 10px;

		img {
			object-fit: cover;
			border-radius: 7px;
		}

		p {
			font-size: 0.9em;
			width: 115px;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}

		button {
			font-size: 1.3em;
			opacity: 0.4;
			cursor: pointer;
		}

		button:hover {
			opacity: 1;
		}
	}

	ul {
		display: flex;
		justify-content: center;
		position: absolute;
		bottom: 10px;
		width: 100vw;
		transition: none;
		gap: 15px;

		li {
			font-size: 0.8em;
			white-space: nowrap;
			display: flex;
			align-items: center;
			gap: 7px;
		}
	}

	@media (max-width: 380px) {
		ul {
			flex-direction: column;
			gap: 0;
			padding: 0 40px;
		}
	}
}