/* ---------------------------- travel stylesheet ---------------------------- */

/* -------------- fonts -------------- */
@font-face {
	font-family: coolvetica;
	src: url("/angelnetcastv2/assets/fonts/coolvetica.otf");
	font-weight: normal;
	font-style: normal;
}
/* -------------- colors -------------- */

/* -------------- page -------------- */
body {
	width: 1300px;
	font-family: Arial, Helvetica, sans-serif;
}

/* -------------- grid -------------- */

/* -- container -- */
.grid-cont {
	display: grid;
	grid-template-areas:
		"header header header header"
		"map map map stats"
		"pics blog blog blog"
		"countdown blog blog blog";
	padding: 10px;
}

/* -- all sections -- */
.grid-sec {
	padding: 5px;
	margin: 5px;
}

/* -- indvidual sections -- */
#g1 {
	grid-area: header;
}
#g2 {
	grid-area: map;
	position: relative;
	width: 1000px;
	height: 500px;
}
#g3 {
	grid-area: stats;
	height: 250px;
	position: relative;
}
#g4 {
	grid-area: pics;
	position: relative;
	width: 500px;
	height: 300px;
}
#g5 {
	grid-area: blog;
	position: relative;
	width: 610px;
	height: 390px;
}
#g6 {
	width: 500px;
	grid-area: countdown;
}

/* -------------- decoration -------------- */
h1,
h2,
h3 {
	font-family: coolvetica;
	letter-spacing: 1px;
	font-style: italic;
}

/* -------------- positioning -------------- */

/* -- map -- */
#usamap {
	position: absolute;
	z-index: 9;
	bottom: 50px;
	right: 50px;
	rotate: 6deg;
	filter: drop-shadow(rgba(0, 0, 0, 0.294) 0.3rem 0.3rem 5px);
}

#gclip {
	position: absolute;
	z-index: 10;
	top: 115px;
	right: 200px;
	rotate: 2deg;
	filter: drop-shadow(rgba(0, 0, 0, 0.294) 0.3rem 0.3rem 5px);
}
#worldmap {
	position: absolute;
	z-index: 7;
	top: 60px;
	left: 45px;
	rotate: -3deg;
	filter: drop-shadow(rgba(0, 0, 0, 0.294) 0.3rem 0.3rem 5px);
}
#pclip {
	position: absolute;
	z-index: 8;
	left: 335px;
	top: 10px;
	rotate: -3deg;
	filter: drop-shadow(rgba(0, 0, 0, 0.294) 0.3rem 0.3rem 5px);
}
#corkboard {
	position: absolute;
	z-index: 6;
	filter: drop-shadow(rgba(0, 0, 0, 0.294) 0.3rem 0.3rem 5px);
}

/* -- stats -- */
#travelcake {
	position: absolute;
	z-index: 12;
}
#island {
	position: absolute;
	z-index: 11;
	bottom: -470px;
}

/* -- photo and camframe -- */
#pic {
	position: absolute;
	z-index: 1;
	top: 15px;
	left: 25px;
}

#frame {
	position: absolute;
	z-index: 2;
	filter: drop-shadow(rgba(0, 0, 0, 0.294) 1rem 1rem 10px);
}

/* -- postcard -- */
#sticker {
	position: absolute;
	z-index: 19;
	right: -80px;
	bottom: 0px;
	filter: drop-shadow(rgba(0, 0, 0, 0.294) 0.5rem 0.5rem 10px);
}
#postcard {
	position: absolute;
	z-index: 18;
	rotate: 3deg;
	filter: drop-shadow(rgba(0, 0, 0, 0.294) 1rem 1rem 10px);
}
#tape {
	position: absolute;
	z-index: 20;
	rotate: 3deg;
	left: 280px;
	top: -7px;
	filter: drop-shadow(rgba(0, 0, 0, 0.294) 0.1rem 0.1rem 3px);
}