@font-face {
	font-family: montserrat_r;
	src: url(fonts/montserrat_r.ttf) format("truetype");
}

@font-face {
	font-family: montserrat_b;
	src: url(fonts/montserrat_b.ttf) format("truetype");
}

:root {
	--color1: rgb(223, 204, 97);
	--color2: rgb(255, 211, 127);
	--color3: rgb(255, 204, 102);
}

body {
	min-height: 100vh;
	margin: 0;
	padding: 0;
	background-color: black;
	position: relative;
	z-index: 1;
	background-image: radial-gradient(circle at top left, rgba(255, 217, 0, 0.432) 0%, transparent 20%);
	
}

body::before,
body::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	max-width: 100vw;
	width: 100%;
	height: 95%;
	transform-origin: top left;
	animation: opacityCycle 14s ease-in-out infinite;
	z-index: -1;
	filter: blur(3vmin);
}

body::before {
	background-image:
		conic-gradient(from 0deg at top left,
			transparent 94deg, var(--color2) 95deg, transparent 97deg,
			transparent 114deg, var(--color2) 115deg, transparent 117deg,
			transparent 147deg, var(--color2) 148deg, transparent 150deg,
			transparent 167deg, var(--color2) 168deg, transparent 170deg,
			transparent 179deg, var(--color2) 180deg, transparent 182deg);
}

body::after {
	background-image:
		conic-gradient(from 0deg at top left,
			transparent 106deg, var(--color3) 107deg, transparent 109deg,
			transparent 127deg, var(--color3) 128deg, transparent 130deg,
			transparent 141deg, var(--color3) 142deg, transparent 144deg,
			transparent 153deg, var(--color3) 154deg, transparent 156deg,
			transparent 174deg, var(--color3) 175deg, transparent 177deg);
	animation-delay: -7s;
}


@keyframes opacityCycle {

	0%,
	25% {
		opacity: 0.7;
	}

	25%,
	75% {
		opacity: 0;
	}

	75%,
	100% {
		opacity: 0.7;
	}
}

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

.img {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: 70vmin;
	border-radius: 2vmin;
	max-height: 100%;
	margin: 1vmin 1vmin .5vmin 1vmin;
}

.lf {
	position: relative;
	width: 70vmin;
	border-radius: 2vmin;
	max-height: 100%;
	margin: 1vmin 1vmin .5vmin 1vmin;
	transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.lf:hover {
	transform: scale(1.04);
	box-shadow: 0 0 20vmin rgb(0, 0, 0);
	z-index: 1000;
}

.cover {
	position: absolute;
	transition: opacity 0.3s ease-in-out;
}

.cover:hover {
	opacity: 0;
}


h1 {
	color: rgb(255, 255, 255);
	font-family: montserrat_b, sans-serif;
	font-size: 7vmin;
	margin: 0rem;
	margin-bottom: 2vmin;
	padding-top: 4vmin;
	text-align: center;
}

h2 {
	color: rgb(255, 255, 255);
	margin-left: 20vw;
	font-size: 5vmin;
	font-family: montserrat_b, sans-serif;
	margin-right: 20vw;
	font-weight: 400;
	margin-bottom: 0vmin;
	text-align: center;
	font-weight: 600;
}

h3 {
	color: rgb(255, 255, 255);
	margin-left: 20vw;
	margin-right: 20vw;
	font-size: 3vmin;
	font-family: montserrat_r, sans-serif;
	margin-top: 0vmin;
	font-weight: 400;
	text-align: center;
}



h3 span.category {
	font-family: 'montserrat_b', sans-serif;
}

.collage {
	position: relative;
	top: 50%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1vmin;
	margin-left: 26vmin;
	margin-right: 26vmin;
	transition: opacity 0.2s ease-in-out;
}

.image {
	position: relative;
	flex-basis: calc((100% / 6) - 1vmin);
	width:  calc((140vmin / 6) - 1vmin);
	height: calc((100% / 6) - 1vmin);
	border-radius: 2vmin;
	transition: opacity 0.2s ease-in-out, box-shadow 0.4s ease-in-out, width 0.4s ease-in-out, transform 0.1s ease-in-out;
}


.collage:hover .image {
	opacity: 0.7;
}

.collage:hover .image:hover {
	opacity: 1;
	box-shadow: 0 0 2vmin white;
	transform: scale(1.7);
	z-index: 1000;
}

a {
	font-size: 3.5vmin;
	font-family: montserrat_r, sans-serif;
	display: inline-block;
	color: inherit; 
	text-decoration: none;
	margin-left: 1vmin;
}

.contact {
	position: fixed;
	right: 0vmin;
	background-color: white;
	color: black;
	height: 7vmin;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1vmin;
	border-radius: 4vmin 0 0 4vmin;
	transition: right ease-in-out .25s;
	box-shadow: 0 0 3vmin black;
	z-index: 1000;
}

.icon {
	width: 5vmin;
	margin: 0 1vmin 0 1vmin ;
}

.mail {
	top: 1.5vmin;
	right: -56vmin;
}

.x{
	top: 12vmin;
	right: -24vmin;
}

.fiverr {
	top: 22.5vmin;
	right: -25vmin;
}

.contact:hover{
	right: 0vmin;
}