/* Whalefall 1.0, layout designed by me, Benny and coded by me, Kie :-)
F2U and modify, but credit us somewhere and don't claim as your own. */

/* CREDITS:
	Benny (overall layout design): https://benny1548132.neocities.org/
	Kie (coding): https://ivyswell-tavern.neocities.org/
	Frutiger Aero Archive (default background images): https://frutigeraeroarchive.org/wallpapers */

/* ----------------------------------------------- */

/* Welcome to the :root section! Here you can make simple changes without having to worry about messing up the code! 
Please note that any changes made here will apply to all of the pages using the layout*/
/* PRO TIP: keep a clean copy of this file in case you need to revert anything to the default!*/
:root {

	/* These two change the color of the main frame with a gradient! If you want to use the origianl colors, set them both to "transparent".*/
	--main-frame-1: #4A3A30; 
	--main-frame-2: #304A37;
	
	/* These two change the color of the buttons! By default, they are set on "var(--main-frame-1)" and "var(--main-frame-2)" respectively, which makes them match in color with the main frame*/
	--button-1: var(--main-frame-1);
	--button-2: var(--main-frame-2);
	
	/* This changes how the color filters work. NOTE: I recommend changing this only if you are a digital artist familiar with blend modes! */
	--blend-mode: overlay;
	/* ----------------------------------------------- */
	
	
	/* Change the background image!*/
	--BG-image: url(assets/background.webp);
	/* ----------------------------------------------- */
	
	
	/* Here you can change the text colors: */
	--selection-background: #46af31;
	--selection-color: #e5f9c7;
	--links-color: #1e7567;
	--regular-text-color: black;
	--headers-color: #0c6657;
	--title-color: #004f38;
	--title-shadow: #86e253;
	--button-text-color: #c2e4dc;
	/* ----------------------------------------------- */
	
	
	/* In this section you can change stuff about the title on the main frame! 
	NOTE: It's important that the distance from the top and from the left are expressed as perchentages (ex. 49%),
	and that the font-size is expressed in the vh unit(ex. 7vh)*/
	--title-top-position: 3.9%;
	--title-left-position: 20%;
	--title-font-size: 7.5vh;
	/* ----------------------------------------------- */
	
	
	/* Here you can change the buttons' font size. 
	By default all three buttons have the same font size. It's recommended using em units instead of pixels. */
	--button-font-size-1: 1.5em;
	--button-font-size-2: var(--button-font-size-1);
	--button-font-size-2: var(--button-font-size-1);
	/* ----------------------------------------------- */
	
}




/* ----------------- WARNING -------------------- */
/*From this point forward, making changes can really mess up the layout!
 Proceed only if you know what you're doing! */
/* ---------------------------------------------- */
::selection {
	background: var(--selection-background);
	color: var(--selection-color);
}

@font-face {
    font-family: Areion;
	src: url(assets/font_areion/Areion-Regular.ttf);
}
@font-face {
    font-family: Areion;
	src: url(assets/font_areion/Areion-Regular.ttf);
	font-weight: bold;
}

@font-face {
    font-family: Areion;
	src: url(assets/font_areion/Areion-Italic.ttf);
	font-style: italic;
}

@font-face {
    font-family: Areion;
	src: url(assets/font_areion/Areion-Slant.ttf);
	font-style: oblique;
}

body {
	background-image: var(--BG-image);
	background-size: cover;
}

#layout {
	margin: 5vh auto;
	display: block;
	aspect-ratio: 713 / 512;
	max-width: 1200px;
	max-height: 87.5vh;
	position: relative;
}

main {
	background-image: linear-gradient(var(--main-frame-1), var(--main-frame-2)),
		url(assets/main_frame.png);
	background-size: cover;
	background-blend-mode: var(--blend-mode);
	border-radius: 76%;
	height: 100%;
	width: 100%;
	position: relative;
}

h1, h2, h3, h4, .floating-button {
	font-family: Areion, arial;
}

.main-text h1, .main-text h2, .main-text h3, .main-text h4{
	color: var(--headers-color);
}


h1.main-title {
	position: absolute;	
	top: var(--title-top-position);
	left: var(--title-left-position);
	font-size: var(--title-font-size);
	filter: drop-shadow(0.75vh -0.5vh 0.1vh var(--title-shadow));
	color: var(--title-color);
}

.main-content-box {
	position: relative;
	overflow-y: auto;
	width: 58.5%;
	top: 21.7%;
	left: 20.5%;
	height: 56.5%;
	border-radius: 7px;
}

.main-text {
	padding: 0.7em;
	color: var(--regular-text-color);
}

.main-text a {
	padding: 0.15em;
	border-radius: 0.25em;
	text-decoration-style: dashed;
	color: var(--links-color);
}

.main-text a:hover {
	background: var(--selection-background);
	color: var(--selection-color);
	text-decoration-style: solid;
	transition-duration: 0.1s;
}

.floating-frame {
	background-image: url(assets/floating_frame.png);
	background-size: cover;
	position: absolute;
	width: 25%;
	z-index: 4;
	aspect-ratio: 224 / 239;
}

.floating-frame .grabberheader {
	width: 100%;
	height: 8.7%;	
	z-index:5;
	cursor: grab;
}

.floating-frame img.floating-image {
	aspect-ratio: 1 / 1;
	display: block;
	width: 94.8%;
	position: relative;
	left: 2.5%;
}

#grabber1 {
	left: 82.5%;
	top: 25%;
}

#grabber2 {
	left: -10%;
	top: 32%;
	width: 15%;
}

#grabber3 {
	left: -7.5%;
	top: 55%;
}

.floating-button {
	position: absolute;
	aspect-ratio: 1 / 1;
	background: linear-gradient(var(--button-1), var(--button-2)),
		url(assets/button.png);
	background-size: cover;
	background-blend-mode: var(--blend-mode);
	border-radius: 51%;
	z-index: 3;
	padding: 1em;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	max-width: 10%;
	filter: drop-shadow(3px 3px 0 black);
}

.floating-button:active {
	filter: drop-shadow(1px 1px 0 black);
	transform: translate(3px,3px);
	transition-duration: 0.05s;
}

a.button-link {
	color: var(--button-text-color);
	text-shadow: 2px 2px 2px black;
	text-decoration: none;
}

.double-button {
	background: linear-gradient(var(--button-1), var(--button-2)),
		url(assets/button2.png);
	background-size: cover;
	padding: 0;
	max-width: 15%;
	width: 15%;
}

.double-button a.button-link {
	height: 50%;
	font-size: 72.5%;
}

.double-button span {
	position: relative;
}

.double-button a:first-of-type span {
	top: 48.5%;
	left: -3%;
}

.double-button a:nth-of-type(2) span {
	top: 10%;
	left: 3%;
}

#button3 span:first-of-type{
	font-size: 130%;
}
#button3 span + span{
	font-size: 80%;
}

#button1 {
	top: 7.5%;
	left: -3%;
	font-size: var(--button-font-size-1);
}

#button2 {
	right: 0;
	font-size: var(--button-font-size-2);
}

#button3 {
	right: -5%;
	bottom: 15%;
	font-size: var(--button-font-size-3);
	max-width: 12.5%;
}

table.sitemap {
	border-spacing: 0 0.35em;
	margin: auto;
	max-width: 80%;
	font-size: 105%;
}

table.sitemap tr:hover {
	transform: scale(1.07);
	transition-duration: 0.1s;
}

table.sitemap td {
	border: 0.1em solid var(--headers-color);
	padding: 0.35em;
	max-width: 60%;
}

table.sitemap td:first-of-type {
	border-radius: 0.5em 0 0 0.5em;
	border-right: none;
}
    
 }