/*<meta />*/

@import url('variables.css');

*
{
	margin: 0px;
	padding: 0px;
}

body
{
	font-family: var(--font-sans);
	color: var(--color-bodytext);
	font-size: var(--font-size-body);
	font-weight: 200;
	width: 100vw;
}

.row.outer-row.sidenav-layout
{
	padding: 0 !important;
}

.body-container
{
	padding: 0 !important;
}

.height-container-sidenav.height-container
{
	padding-bottom: 0px;
	min-height: 100vh !important;
}

.bg-wrapper
{
	background-color: #1f8aad;
	background-color: -webkit-var(--color-bg);
	background: var(--color-bg);
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	z-index: -200;
}

.title-bar-container.sticky-container,
.sidenav-wrapper
{
	display: none;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
} 

.homepage
{
	width: clamp(90vw, 95vw, 1000px);
	position: relative;
	height: auto;
	z-index: 1000;
	margin: clamp(0vh, 3vh, 6vh) auto 16px;
}

.homepage h1
{
	font-family: var(--font-serif);
	text-align: right;
	color: #fff;
	font-size: var(--font-size-h1);
	letter-spacing: var(--letter-spacing-h1);
	font-weight: 600;
	background-color: rgba(7, 35, 44,0.4);
	position: relative;
	left: clamp(-10vw,-30vw, 0vw);
	padding: 10px 20px 10px 20px;
	border-radius: 0 15px 15px 0;
	width: 70vw;
}

.homepage h2
{
	font-family: var(--font-sans);
	text-align: center;
	font-weight: 400;
	color: #fafad1;
	font-size: var(--font-size-h2);
	padding-top: 20px;
	animation: appear 1s linear;
}

div.sections
{
	/* first breakpoint*/
	--w1: 1000px;
	--n: 4;
	/* second breakpoint*/
	--w2: 400px;
	--m: 2;
	/* third breakpoint*/
	--w3: 250px;
	--p: 1;
	display: grid;
	grid-template-columns: repeat(auto-fill,
      minmax(clamp(clamp(clamp(  
            100%/(var(--n) + 1) + 0.1%,
              (var(--w1) - 100%)*900,
            100%/(var(--m) + 1) + 0.1%), 
              (var(--w2) - 100%)*900,
            100%/(var(--p) + 1) + 0.1%), 
              (var(--w3) - 100%)*1000,
            100%), 1fr));
	gap: 16px;
	overflow: hidden;
	margin: 5px auto 60px;
	/*resize: horizontal;*/
	padding: 20px 0;
	animation: appear 2s ease-in;
	text-align: center;
}

div#technical
{
	grid: 6fr;
}

.sections > div
{
	background: rgba(255,255,255,0.3);
	display: flex;
	flex-flow: column wrap;
	flex: 1 1 auto;
	justify-content: flex-start;
	text-align: center;
	height: clamp(120px, 280px, 300px);
	border: 3px solid rgba(255,255,255,1);
	border-radius: 14px;
	/*! padding: 10px; */
	transition: background-color 900ms;
	z-index: 1000;
	opacity: 0.8;
}

.sections > div:hover
{
	background: rgba(255,255,255,0.6);
	cursor: pointer;
	opacity: 1;
}

#writing
{
	background: #ffffff url('../Images/writing/writings.jpg') no-repeat center center;
	background-size: cover;
}

#arslonga
{
	background: #ffffff url('../Images/tech/arslonga.jpg') no-repeat center center;
	background-size: cover;
}

#vanicha
{
	background: #ffffff url('../Images/vanicha/vanicha.jpg') no-repeat center center;
	background-size: cover;
}

#bikepacking
{
	background: #ffffff url('../Images/bikepacking/bikepacking.jpg') no-repeat center center;
	background-size: cover;
}

div.sections > div > p.head
{
	font-size: clamp(1.1rem, 1.25rem, 1.5rem);
	width: 100%;
	font-weight: 400;
	margin: 0;
	line-height: 1;
	letter-spacing: initial;
	opacity: 1;
	padding: 5px;
	background: #fff;
	border-radius: 14px 14px 0 0;
	padding-bottom: 20px;
	position: relative;
	top: -2px;
}

div.sections > div > p:not(.head)
{
	font-family: var(--font-sans);
	color: var(--color-bodytext);
	font-size: small;
	font-weight: 100;
	margin: 0;
	line-height: 1.2;
	padding: 5px 0;
	font-style: italic;
	opacity: 0;
	position: relative;
	top: -26px;
}

.sections > div:hover p:not(.head)
{
	opacity: 1;
}

@keyframes hover-on {
   0% {background:rgba(255,255,255,0.1);}
   100% {background:rgba(255,255,255,0.5) ease-in 200ms;}
} 

/*. user card. */

.user
{
	width: clamp(300px, 90%, 1000px);
	height: auto;
	margin: 10px auto;
	padding: 0 10px 10px clamp(140px,((100vw - 600px)*1000),220px);
	box-sizing: border-box;
	position: relative;
	animation: appear 3.5s ease-in;
}

.user img
{
	position: absolute;
	top: clamp(0px,(100vw - 600px)*-1000,10px);
	left: clamp(0px,(100vw - 600px)*-1000,20px);
	width: clamp(100px,(100vw - 600px)*1000,200px);
	height: clamp(100px,(100vw - 600px)*1000,200px);
	border-radius: clamp(10px,(100vw - 600px)*-1000,50px);
	object-fit: cover;
	object-position: top;
}

.user h1
{
	margin: 20px 0 10px clamp(0px,var(--c)*-1000,70px);
}

.user p
{
	line-height: 1.4;
	margin-right: 10px;
	padding-bottom: 0.25rem;
}

/* Footer */
/* Footer */

#footer
{
	text-align: center;
	font-size: small;
	width: 100vw;
	padding: 5px;
	position: fixed;
	bottom: 0;
	background: var(--color-head);
	z-index: 2000;
	left: 0;
	margin: 0;
	height: 30px;
	color: white;
}

.home-bg
{
	width: 100vw;
	height: 100vh;
}

.circles
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	opacity: 0.75;
}

.circles li
{
	position: absolute;
	display: block;
	list-style: none;
	width: 20px;
	height: 20px;
	background: rgba(255, 255, 255, 0.125);
	animation: animate 14s linear infinite;
	bottom: -100px;
}

.circles li:nth-child(1)
{
	left: 25%;
	width: 80px;
	height: 80px;
	animation-delay: 0s;
}

.circles li:nth-child(2)
{
	left: 10%;
	width: 20px;
	height: 20px;
	animation-delay: 2s;
	animation-duration: 10s;
}

.circles li:nth-child(3)
{
	left: 70%;
	width: 20px;
	height: 20px;
	animation-delay: 3s;
}

.circles li:nth-child(4)
{
	left: 40%;
	width: 60px;
	height: 60px;
	animation-delay: 0s;
	animation-duration: 13s;
}

.circles li:nth-child(5)
{
	left: 65%;
	width: 20px;
	height: 20px;
	animation-delay: 0s;
}

.circles li:nth-child(6)
{
	left: 75%;
	width: 110px;
	height: 110px;
	animation-delay: 3s;
}

.circles li:nth-child(7)
{
	left: 35%;
	width: 110px;
	height: 110px;
	animation-delay: 4s;
}

.circles li:nth-child(8)
{
	left: 50%;
	width: 25px;
	height: 25px;
	animation-delay: 1.25s;
	animation-duration: 22s;
	border-radius: 100%;
}

.circles li:nth-child(9)
{
	left: 20%;
	width: 15px;
	height: 15px;
	animation-delay: 1s;
	animation-duration: 18s;
}

.circles li:nth-child(10)
{
	left: 85%;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	animation-delay: 0s;
	animation-duration: 14s;
}

@keyframes appear {
   0%{opacity:0;}
   50%{opacity:0;}
   100%{opacity 1;}
} 

@keyframes animate {

    30%{
        transform: translateY(0vh) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }
    
    80% {
        opacity: 0.2;
    }

    100%{
        transform: translateY(-140vh) rotate(1000deg);
        opacity: 0;
        border-radius: 60%;
    }

}