<style>
	.box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-left: 25px;
	}

	.row {
		display: flex;
		flex-direction: row;
	}

	.container {
		display: flex;
		flex-direction: column;
	}
</style>

<div class="container">
	<div class="row" style="margin-top:5%;">
		<div class="box">
			<p>Search Engine</p>
			<select class="browsers" id="se">
				<option value="google">Google</option>
				<option value="ddg">DuckDuckGo</option>
				<option value="brave">Brave</option>
			</select>
		</div>
		<div class="box">
			<p>Title</p>
			<input type="text" class="settingsInput button" onchange="changeTitle(this.value)"
				placeholder="Change Title" />
			<input type="text" class="settingsInput button" onchange="changeFavicon(this.value)"
				placeholder="Change Favicon (URL)" />
		</div>
		<div class="box">
			<p>Proxy Type</p>
			<select class="browsers" id="proxy">
				<option value="uv">Ultraviolet</option>
				<option value="dy">Dynamic (BETA)</option>
			</select>
		</div>
	</div>

	<div class="row">
		<div class="box">
			<p>Mystery</p>
			<button class="button" id="mystery-button">Toggle</button>
		</div>
		<div class="box">
			<p>Custom Themes</p>
			<input type="color" id="colorPicker" class="settingsInput button" oninput="changeTheme(this.value)">
			<button class="button" id="reset-theme">Reset</button>
		</div>
		<div class="box">
			<p>About:Blank Cloaking</p>
			<button class="button" id="abc">Click Me</button>
		</div>
	</div>
</div>

<div style="margin-top: 50%; z-index: 1;">
	<%- include("ad"); %>
</div>
<script src="/assets/js/settings.js"></script>