* {
	box-sizing: border-box;
}
body,
section {
	background-color: var(--gray-9);
	display: flex;
	flex-direction: column;
	justify-content: top;
	align-items: center;
	gap: 1rem;
}
body {
	justify-content: space-between;
}
#searchbar,
#output,
header {
	width: 80vw;
}
header {
	padding-top: var(--size-4);
	font-size: var(--size-7);
	font-weight: var(--font-weight-9);
}

#query {
	overflow: hidden;
	resize: vertical;
	flex: 1 1 auto;
	background-color: #171a1c;
	margin-right: 20px;
}
a,
a:visited {
	color: var(--yellow-6);
}
button {
	flex: 0 1 200px;
	min-width: 100px;
	background-color: var(--yellow-6);
	color: var(--gray-9);

	border-radius: var(--radius-2);
	padding: var(--size-1) var(--size-2);
}
button:hover {
	background-color: var(--yellow-4);
	padding: 2.5px var(--size-2) 7.5px var(--size-2);
}

button:active {
	background-color: var(--yellow-9);
	padding: var(--size-1) var(--size-2);
}
#searchbar {
	width: calc(100%);
	display: flex;
	align-items: center;
	justify-content: center;
	position: sticky;
	top: 0;
	background: var(--gray-9);
	padding-top: 2rem;
	padding-bottom: 2.5rem;
	margin-bottom: -0.5rem;
}
#output {
	max-inline-size: initial;
	width: calc(80vw - 2px);
	color: var(--red-9);
	border-radius: var(--radius-2);
	padding: var(--size-4) var(--size-4);
	background-color: #171a1c;
	cursor: auto;
	resize: none;
	margin-bottom: 2rem;
}
footer {
	text-align: center;
	padding-bottom: var(--size-4);
}

.dropdown {
	position: relative;
	display: inline-block;
    background-color:var(--yellow-5);
    color:var(--gray-9);
    
	padding: var(--size-1) var(--size-2);
    border-radius: var(--radius-2);
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: var(--gray-7);
	min-width: 160px;
	padding: 12px 16px;
	z-index: 1;
	border-radius: var(--radius-2);
    margin-left:calc(var(--size-2) * -1);
    top:40px;
}
.dropdown:hover{
    z-index: 2;
}
.dropdown:hover .dropdown-content {
	display: block;
}