/* vim: set tabstop=4: */
body {
	background-image: url("/images/bamboo_dark.jpg");
	background-color: black;
	margin-left: 30px;
	margin-top: 30px;
	margin-right: 10px;
}
@viewport {
	zoom: 1.0;
}

@font-face {
    font-family: "TeXGyreChorus";
    src: url('https://littledawn.org/fonts/TeXGyreChorus-MediumItalic.woff2') format('woff2'),
         url('https://littledawn.org/fonts/TeXGyreChorus-MediumItalic.woff')  format('woff'),
	 		url('https://littledawn.org/fonts/TeXGyreChorus-MediumItalic.otf')   format('opentype'),
         url('https://littledawn.org/fonts/TeXGyreChorus-MediumItalic.ttf')   format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: auto; 
}

/* Font application */
.tt {
	font-family: "TeXGyreChorus", sans-serif;
	font-style: italic;
	font-size: 27px;
	line-height: 1em;
	color: #6edbff;
}

/* MAIN GRID WRAPPER */
.grid_wrapper {
	position: relative;
	display: grid;
	grid-template-areas:
	"vline remem obit"
	"vline hline menu"
	"vline rstext rstext";
	grid-template-columns: 50px minmax(600px, 680px) auto;
	gap: 20px;
}

/* COMPONENT WRAPPERS */
.h_line {
	max-width: 100%;
	height: 15px;
	grid-area: hline;
	position: relative;
	left: -83px;
	top: 70px;
     /* border-radius: 5px;
     background-color: rgb(207, 232, 220);
     border: 2px solid rgb(79, 185, 227); */
}

.v_line {
	grid-area: vline;
	position: relative;
	left: 30px;
	top: 170px;	
	/* border-radius: 5px;
	  background-color: rgb(207, 232, 220);
	  border: 2px solid rgb(79, 185, 227); */
}

.title_img {
	grid-area: remem;
	max-width: 95%; 
	padding-right:30px; 
	height: auto;
	position: absolute;
	left: 0px;
	top: -10px;
	  /* border-radius: 5px;
	   background-color: rgb(207, 232, 220);
	  border: 2px solid rgb(79, 185, 227); */
}

.obit {
	grid-area: obit;
	position: relative;
	left: -20px;
	top: -4px;
	width: 495px; 
	line-height: 0.9em;
	  /* border-radius: 5px;
	  background-color: rgb(207, 232, 220);
	  border: 2px solid rgb(79, 185, 227); */
}

.rs_text  {
	grid-area: rstext;
	position: relative;
	top: 10px;
	margin-right: 33px;
	  /* border-radius: 5px;
	  background-color: rgb(207, 232, 220);
	  border: 2px solid rgb(79, 185, 227); */
}

.menu {
	grid-area: menu;
	position: relative;
	left: 0px;
	top: 20px;
 	text-align: left;
	visibility: visible;
	display: block;
       /* border-radius: 5px;
        background-color: rgb(207, 232, 220);
        border: 2px solid rgb(79, 185, 227); */
 }

/* Buttons for Desktop Menu */
.but_style {
	font-style: italic; 
	position: relative;
	margin-left: 30px;
}

.dropdown {
	grid-area: menu; 
 	position: relative;
	display: inline-block;
	color: white;
	font-size: 34px;
	visibility: collapse;
	left: 35%;
	top: -10px;
}

.dropdown-content {
  display: none;
  position: absolute;
  left: -50px;
  background-color: #f9f9f9;
  min-width: 300px;
  font-family: sans-serif;
  font-size: 0.8em;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

#lars_mem {
        font-family: sans-serif;
        font-size: 1em;
        margin-left: 50px;
        margin-right: 50px;
}

/* FIRST FLIP: Flip at X = 1284 */
@media only screen and (max-width: 1200px) {
/* CSS Grid definition overlay */
	div.grid_wrapper {
		grid-template:
		"vline remem ."
		"vline obit menu"
		"vline hline . "
		"vline rstext rstext";
		grid-template-columns: auto auto;
	}
	
	.h_line {
		top: 135px;
		left: -30px; 
	}
	
	.v_line {	
		top: 260px;	
	}
	
	.title_img {
		left: 46px;
		max-width: 97%;	
	}	
		
	.obit {
		top: 130px;
		left: 40px;	
	}
	
	.rs_text {
		top: 125px;
		left: 40px;	
		width: 95%;
	}
	
	.menu {
		top: 270px;
		left: -60px;	
	}
}

/* SECOND FLIP: Flip at X = 1174 */
@media only screen and (max-width: 974px) {
	
/* CSS Grid definition overlay */
	div.grid_wrapper {
		grid-template-areas:
		"vline remem . "
		"vline obit  . "
		"vline menu  ."
		"vline hline hline"
		"vline rstext rstext";
		grid-template-columns: 50px minmax(400px, auto) auto;
	}
	
/* Overlay styles */
	.h_line {
		top: 130px;
		left: -80px;
	}
	
	.v_line {
		top: 330px;	
	}	

	.title_img {
		left: -1px;	
	}	
	
	.obit {
		top: 130px;
		left: -7px;	
	}

	.rs_text {
		top: 115px;
		left: -10px	
	}

	.menu {
		top: 130px;
		left: -10px;	
	}
}

/* Test for Tablet or Smartphone where physical pixels != logical pixels */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (hover: none),
       only screen and (min-resolution: 1.5dppx) and (hover: none) {

/* CSS Grid definition overlay */       
	div.grid_wrapper {
		grid-template-areas:
		"remem remem remem"
		"vline obit  . "
		"vline menu  ."
		"hline hline hline"
		". rstext rstext";
		grid-template-columns: 50px minmax(400px, auto) auto;
	}

/* Overlay styles */
 	.h_line {
		top: -17px;
		left: -15px;
		height: 18px;	
	}
	
	.v_line {
		top: 440px;	
	}    

    .title_img {
		width:590px;
		height:171px;
		left:100px;    
	}
   
   .obit {
		font-size:40px;
		width: 700px;
		top: 150px;
   }
    
	.rs_text {
  	 	top: 0px;
  	 	left: -0px;
  	 	width: 80%;
		min-width: 700px;
		padding-right:40px;  	 
  	 }
  	 
/* Laptop full button menu */  	 
	.menu {
		visibility: collapse;	
	}
		    
   .but_style {
		font-size:1.2em;
		left: 5px;
		margin-left:10px;    
	}
	
/* Smartphone and tablet drop-down menu */    
 	.dropdown {
		visibility:visible;
		margin-top: -15px;
		top: 80px;
	}
	
	.dropdown-content {
		left: 38px;			
	}
  	 
/* Lars Kampman's Memoir */
  	 #lars_mem {
  	 	font-family: sans-serif;
		font-size: 1.0em;
		margin-left: 3%;
		margin-right: 5%;
		color: black;
  	 }
  	 
	/* Nice blue font */
	.tt {
		font-size:40px;
	}
}