/*this style sheet is for the 1933 Journal entries in the Flight of Ducks 23rd August 2020*/
	
body 		
	{   color:#7B7757; 
        background:#101010;     /* #303039  or 254, 248, 231*/
		font-family:FF Meta, Calibri, sans-serif; 
		overflow:visible; /* hides scrollbars but retains access to content*/
		font-size:100%;
		width:100vw; /* in theory, fills the viewport */
		height:100vh; /* in theory, fills the iewport but problems with landscape on mobile phone*/
		margin:0 0 0.1em 0; /* shorthand order: top right bottom left*/
	}
			
/* box-sizing ensures padding and border are included in the total width and height of the elements*/
*	{  box-sizing: border-box; }

.grid-container { display:inline-grid;
		grid:0.1fr 0.1fr 0.1fr auto 0.2fr / auto; /*the shorthand order is: row / column1 column2 column3 etc*/
		grid-gap:1px 1px;
		width:100vw;
		height:100vh;
		padding:0; 
		}

/* em is relative to the font-size of the element. Rem is Relative to the font-size of the root element. Default size of 1em is 16px. If the viewport is 50cm wide, 1vw = 0.5cms. Seems like 1em is close to 1vw. Shorthand order is  display: block; font-size: 2em; margin-top: 0.67em; margin-bottom: 0.67em; margin-left: 0; margin-right: 0; font-weight: bold;*/ 	

.grid-container > div {
		padding: 1px 1px;
		border: 0px solid #999999; /* used for checking flow */ 
		}
		
/*the shorthand order is: grid-row-start / grid-column-start / grid-row-end / grid-column-end.*/

.item1 { grid-area: 1 / 1 / 2 / 3; }/* menu */
.item2 { grid-area: 2 / 1 / 3 / 4; place-self:center; }/*  title */
.item3 { grid-area: 3 / 1 / 4 / 4; place-self:center; }/* epigraph or subheading */
.item4 { grid-area: 4 / 2 / 5 / 4; margin-left: 2em; margin-right: 2em; }/* warning message */
.item5 { grid-area: 5 / 1 / 6 / 4; place-self:center; } /*footer*/

.item1  { /* menu, this animates the left flying duck*/
  padding:0;
  text-align:start;
  position: relative;
  animation-name: LeftFlyingDuck;
  animation-timing-function: linear;
  animation-duration:2s;
  animation-iteration-count: 1;
  animation-delay: -0.5s;
        }

@keyframes LeftFlyingDuck 
	    {
		0%   {left:50%;}
		25%  {left:30%;}
		50%  {left:10%;}
		75%  {left:5%;}
		100% {left:0%;}
	    }

.item2  /* heading */
		{
		font-size:calc(3.5em+3vw); 
		color:#FF1111;	
		}

	
.item3  /*https://cubic-bezier.com/#.86,.48,.24,1.53  fades in the epigraph or subtitle */
        {
		padding:0.7em;
        font-size:calc(2.5em+3vw); 
        color:#7B7757;	
        font-style: bold;		
	    animation:fadeAndScale 2s cubic-bezier(.86,.48,.24,1.53);  	
	    transform-origin: center bottom;
        }	
		
@keyframes fadeAndScale 
		{
from 	
		{
		opacity: 0;
		transform: scale3d(1,1,1);
		}
		}

.item4  /* heading */
		{
		font-size:calc(1.5em+2vw); 	
		}		
		
.proceed  /* proceed */
		{
		color:#808080;	
		}	
		
             /* footer hides short text for screens < 600px*/
 .full-text
		{
		display:inline-block;
		}

.short-text		
		{
   display:none;
		}

@media screen and (max-width: 600px) /*footer when resolution <= 600px, hide full text and show short text*/
		{
.full-text
		{
       display:none;
		}

.short-text
		{
       display:inline-block
		}	

a:link
		{ 
		color:#808080;
		} 

a:visited
		{ 
		color:#606060; 
		}

a:hover
		{ 
		color:rgb(147, 109, 6); 
		} 		

a:active 
		{ 
		color:#808080; 
		}