body {
	--aspect-ratio-supported: auto;
}

h1, h2, h3, p {
	font-family: "Inter", sans-serif;
}


#hero {
	position: relative;
	gap: 0;
	display: flex;
	flex-flow: column;
}

#avail-work {
	background-color: rgba(28, 28, 28, 0.9);
	gap: 10px;
	padding: 16px 32px;
	border-radius: 120px;
	place-content: center;
	align-items: center;
	display: flex;
	text-decoration: none;
	color: white;
}

p {
	text-align: center;
	margin: auto;
}

.content {
	place-content: center flex-start;
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	flex-flow: column;
	height: min-content;
	overflow: visible;
	padding: 288px 0 0;
	position: relative;
	width: 100%;
	gap: 24px;
}

.content h1 {
	font-family: "Inter", sans-serif;
	font-size: 100px;
	font-weight: 700;
	z-index: 60;
}

.pic-div {
	position: absolute;
	height: 360px;
	top: 0;
	left: calc(50% - 180px);
	width: 360px;
}

.mark-picture {
    transition: all 0.4s;
    border-radius: 360px;
    height: 360px;
    position: absolute;
    border-top: solid 0px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	z-index: 50;
}

.mark-picture:hover {
        transition: all 0.4s;
        border-top: solid 4px rgba(255, 255, 255, 0.8);
        height: 380px;
}

.background {
	background-color: rgba(75, 207, 31, 0.25);
	aspect-ratio: 1 / 1;
	height: var(--aspect-ratio-supported, 16px);
	border-radius: 100%;
	position: absolute;
	left: -2px;
	right: -2px;
	top: -2px;
}

.dot {
	background-color: rgb(75, 207, 31);
	aspect-ratio: 1 / 1;
	height: var(--aspect-ratio-supported, 8px);
	transform: translate(-50%, -50%);
	border-radius: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 8px;
}

#spin {
	will-change: transform;
	position: relative;
	height: 12px;
	width: 12px;
	flex: 0 0 auto;
	transition: transform 0.1s;
}

.greeting {
	text-align: center;
	width: 560px;
	font-size: 18px;
}