*,*::before,*::after {
	box-sizing: border-box;
}
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
body {
	margin: 0;
}
h1,h2,h3,h4,h5,h6,p {
	margin: 0;
}
ul,ol {
	margin: 0;
	padding: 0;
	list-style: none;
}
img,picture,video,canvas,svg {
	display: block;
	max-width: 100%;
}
button,input,optgroup,select,textarea {
	font: inherit;
}
button,input,select,textarea {
	margin: 0;
}
button,[type="button"],[type="reset"],[type="submit"] {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}
a {
	color: inherit;
	text-decoration: none;
}
textarea {
	resize: vertical;
}
::placeholder {
	color: inherit;
	opacity: 0.7;
}
@media (prefers-reduced-motion: reduce) {
	*,*::before,*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

#nav {
	display: flex;
    position: fixed;
	bottom:0;
	left:50%;
	transform: translateX(-50%);
	width:100svw;
	height: 72px;
	border-radius: 32px 32px 0 0;
	overflow: hidden;
	max-width: 500px;
	border-top: solid 3px #e6e6e6;
}

button {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 50%;
	border: none;
	background-color: #f1f1f1;
	-webkit-tap-highlight-color: transparent;
}

.wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 48px;
	width: 64px;
	border-radius: 100px;
	transition-duration: 0.4s;
}

#main-back {
	background-color: #8f8f8f;
	width: 96px;
}

#main-icon {
	fill: #f1f1f1;
}

.icon {
	margin-top: 0px;
	height: 36px;
	fill: #4f4f4f;
	transition-duration: 0.4s;
}

#main-back {
	transform: translateX(6px);
}

#rank-back {
	transform: translateX(-6px);
}

#add {
	position: fixed;
	bottom:96px;
	left:50%;
	transform: translateX(-50%);
	height: 64px;
	width: 64px;
	border-radius: 32px;
	fill: #4f4f4f;
	border: solid 3px #e6e6e6;
}

#main-content {
	display: flex;
	flex-direction: column;
	align-items: center;
}

#no-tasks {
	height: fit-content;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: calc(50svh - 72px);
}