:root {
	--bg: #fff;
	--bg2: #fa8071;
	--bg3: #1bbc9b;
	--bg4: #f1f1f1;
	--bg5: #cccccc;
	--bg6: #dddddd;
	--tx-color: #000;
	--tx-color2: #fff;
}

* {
	padding: 0;
	margin: 0;
	border: none;
	min-width: 0;
	min-height: 0;
	color: var(--tx-color);
	box-sizing: border-box;
	font-family: Arial, Helvetica, sans-serif;
}

body {
	background: var(--bg);
	height: 100vh;
}

li {
	list-style: none;
}

a {
	text-decoration: none;
}

img{
    width: 100%;
}

.max-width-1100px {
	max-width: 1100px;
}

.min-width-320px {
	min-width: 320px;
}

.Y-100 {
	height: 100%;
}

.display-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.mg-auto {
	margin: auto;
}

.center {
	justify-content: center;
	align-items: center;
	text-align: center;
}

header {
	min-height: 125px;
	width: 100%;
	height: 20%;
	margin: 0;

	.title {
		height: 70%;
		width: 100%;
		background: var(--bg2);
		color: var(--tx-color2);
	}

	.title h1,
	h5 {
		width: 100%;
		color: inherit;
	}

	.header_nav {
		height: 30%;
		width: 100%;
		justify-content: space-between;
		background: var(--bg3);
		font-size: 0.7rem;
		padding: 0 5px;
	}

	.header_nav a {
		color: var(--tx-color2);
	}
	.nav_ul {
		display: flex;
	}

	.nav_ul--right {
		display: flex;
		width: 13%;
		min-width: 20px;
		overflow: hidden;
		justify-content: space-between;
		gap: 10px;
	}

	.nav_ul--left {
		width: 80%;
		justify-content: space-evenly;
	}

	.ul_li {
		overflow: hidden;
	}
}
aside {
	background: var(--bg4);
}
main {
	width: 100%;
	min-height: 70%;
}
footer {
	width: 100%;
	height: 10%;
	background: var(--bg6);
}

@media screen and (min-width: 768px) {
	aside {
		width: 30%;
	}
	main {
		width: 70%;
	}
}
@media screen and (min-width: 1024px) {
}