/* ROOT VARIABLES */ 

@import url('https://fonts.googleapis.com/css2?family=Gabriela&display=swap');
@import url("https://use.typekit.net/pgx4jvx.css");

:root {
    --title-font: 'Confiteria-Script', sans-serif;
	--subtitle-font: 'Gabriela', sans-serif;
	--header-font: 'Synthemesc', sans-serif;
	--body-font: 'New-Science-Serif', sans-serif;
    --text-color: #111;
	
	--black:#000;
	--dark:#1E1D6D;
	--med:#614CAE;
	--light:#DBC7FF;
	--white:#f9f8ff;
} 

a { 
	color: var(--dark);
	text-decoration: underline wavy;
	text-decoration-color:var(--light);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

	/* layout */

#container {
	display:flex;
	flex-flow:row wrap;
	position: relative;
	max-width:100vw;
	width:80%;
	justify-content:center;
	align-items:stretch;
	align-content:center;
	padding:1%;
	gap:15px;
	margin:2% auto;
}

main, aside {
	position:relative;
	display:flex;
	flex-flow:row wrap;
	align-items:flex-start;
	align-content:flex-start
}

aside {
  font-size:.9em;
  line-height:1.2em
}

aside.right {
	flex:1 4 200px;
	align-items:stretch
}

aside.left {
	flex:0 2 250px;
}

main {
	flex:2 1 400px;
	max-width:min(800px, 100%);
}


body {
  	font-family: var(--body-font);
 	background: var(--white);
  	color: var(--text-color);
	line-height: 1.4;
}


	/* head */

header {
	width:100vw;
	height:125px;
	display:flex;
	flex-flow:row wrap;
	justify-content:space-between;
	align-items:center;
}

#name {
	position:relative;
	margin-left:10%;
	height:85px;
	width: 20%;
	flex: auto;
}

a.name {
	font-family: var(--title-font);
	font-size: 2.5rem;
	color: var(--med);
	text-decoration: none;
}

a.name:hover {
	background:none;
	color:var(--light);
}

.head {
	font-size: 0.9rem;
	background:var(--light);
	color:var(--dark);
	width: 10rem;
	height: 10rem;
	border-radius: 50%;
	margin: 1% 10% 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	
}


	/* nav */

nav {
	max-width:100%;
	text-align:center left;
	font-size:1.1em;
}

nav a {
	display:table;
	color: var(--dark);	
	width:auto;
	text-align:left;
	margin:20px 25px;
}

nav a:hover,.nav a:hover {
	text-decoration: none;
	background:var(--dark);
	color:var(--white);
	border-color:var(--light);
	box-shadow:5px 5px var(--light)
}

aside.left nav a::before {
	content:"⋆˙⟡";
	color: var(--dark);
	display:inline-block;
	position:absolute;
	left:-5px;
	font-size:.7em;
}


nav b {
	display:block;
	padding-top:15px;
	width:100%;
	font-family:var(--subtitle-font);
	font-weight:bold;
	letter-spacing:normal;
	color: var(--med);
}

aside.left nav b::before {
	content:"⤹ ";
	font-size: 0.75em;
	font-style: normal;
}


	/* BODY */

main {
	display:block;
	max-width:90vw;
	width:100%;
	position:relative;
}

.page-title {
	font-size: 2.5rem;
	font-family: var(--header-font);
	color: var(--dark);
	text-align: center;
}


	/* gallery */


.gallery {
	columns:3;
	gap:20px;
	margin-top:20px
}

.small .gallery, .small.gallery {
	columns:2;
	gap:15px;
	margin:20px
}

.gallery .item {
    display:block;
    break-inside:avoid;
    margin-bottom:15px;
    text-align:center;
    font-size:.85em;
    line-height:1.3em;
    color:var(--dark)
}

.gallery .item a {
    text-underline-offset:1px;
    text-decoration-skip-ink: none;
    text-decoration-color:var(--light);
}

.gallery .item img {
    width:100%;
    margin-bottom:5px
}

.gallery img:hover {
  border-radius:5px;
  outline:var(--dark) 1px dashed;
}

@media screen and (max-width:1200px) {
	.gallery {
		columns:3
	}
	.small .gallery, .small.gallery {
		columns:2 }
	}

@media screen and (max-width:1000px) {
	.gallery {
		columns:2
	}
}

@media screen and (max-width:860px) {
	.gallery {
		columns:3
	}
	.small .gallery, .small.gallery {
		columns:2 
	}
}

@media screen and (max-width:700px) {
	.gallery {
	  columns:2
	}
}

@media screen and (max-width:500px) {
	.gallery {
	  columns:1
	}
}



	/* foot */

footer {
	text-align: center;
	padding: var(--spacing);
	border-top: 1px solid #ddd;
	margin-top: var(--spacing);
}

footer .socials a {
	margin: 0 0.5rem;
	display: inline-block;
}

footer .socials img {
	width: 24px;
	height: 24px;
}



	/*alt layouts*/


#container-home {
	display: flex;
	justify-content: space-between;    
	position: relative;
	width: 80%;
	max-width: 1000px;
	margin: 10% auto;
	gap: 20px;
}

.home-bg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 300px;       
	height: auto;
	pointer-events: none;
	z-index: 0;
	animation: float 4s ease-in-out infinite;
}
	
	@keyframes float {
		0%, 100% {
			transform: translate(-50%, -50%) translateY(0);
		}
		50% {
			transform: translate(-50%, -50%) translateY(-10px);
		}
	}


.col-left, .col-right {
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: 1;
	gap: 20px;
	flex:0 0 300px;
}

.sticky {
	width: 100%;
	max-height: 100px;
	max-width: 250px;
	margin: 1% auto;
	
	background: #EDE9FF;
	border: 2px dotted var(--dark);
	border-radius: 8px;
	
	overflow-y: scroll;
	overflow-x: hidden;
	word-wrap: break-word;
	white-space: normal;
	padding: 10px;
	
	color: var(--dark);
	
	box-shadow:5px 5px var(--med)
}

	.sticky h2, p {
		font-size: 0.85rem;
	}

	.sticky::-webkit-scrollbar {
		width: 10px;
	}

	.sticky::-webkit-scrollbar-track {
        background: #EDE9FF;
        border-radius: 10px;
	}

	.sticky::-webkit-scrollbar-thumb {
        background-color: var(--light);
        border-radius: 10px;
        border: 3px solid #EDE9FF;
	}

	.sticky::-webkit-scrollbar-thumb:hover {
		background-color: var(--dark);
	}


.btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	
	background: var(--light);
	border-radius: 12px;
	color: var(--dark);
	transition: transform 0.2s, background 0.2s;
	text-decoration: none;
	
	width: 100%;
	max-width: 350px;
	margin: 0;
	padding: 10px;
}

	.btn:hover {
		transform: translateY(-3px);
		background: var(--dark);
		color: var(--white);
		border-color:var(--med);
		box-shadow:5px 5px var(--med)
	}

.socials-grid {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
}

	.socials-grid img {
		width: 24px;
		height: 24px;
		display: block;
	}