/* style sheet for sonnets 17th June 2026*/
	
body		
	{   color: rgb(24, 18, 1); 
   	    background: rgb(245, 245, 245); /*#303039  254, 248, 231*/
		font-family: Montserrat, 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 1em 1em; /* 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: grid;
		grid: 0.1fr 0.1fr auto 0.1fr 0.1fr 0.1fr 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: 0.5px 0.5px 0.5px 0.5px; /* shorthand order: top right bottom left*/
		border: 0px solid #000000; /* 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 or first line */
.item3 { grid-area: 3 / 1 / 4 / 3; margin-left: 3rem; margin-right: 3rem; }/* sonnet */
.item4 { grid-area: 5 / 1 / 6 / 4; margin-left: 3rem; }/* attribute*/
.item5 { grid-area: 6 / 1 / 7 / 2; margin-left: 3rem; }/* previous*/
.item6 { grid-area: 7 / 3 / 8 / 4; }/* next */
.item7 { grid-area: 9 / 1 / 150 / 4; place-self:center; }/* source */

.item1  { /* menu, the following animates the left flying duck*/
  padding:0;
  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%;}
	    }
	
h1 	
		{
        color: #000000;   
        font-style: italic;	
		font-size:calc(0.6em + 1.4vw);
		}
		
.item2  /*https://cubic-bezier.com/#.86,.48,.24,1.53  fades in the title */
        {
		padding: 0.7em;
        color: rgb(24, 19, 1);	
        font-style: italic;		
	    animation: fadeAndScale 3s cubic-bezier(.86,.48,.24,1.53);  	
	    transform-origin: center bottom;
        }	
		
@keyframes fadeAndScale 
		{
from 	
		{
		opacity: 0;
		transform: scale3d(1,1,1);
		}
		} 

button {
  background-color: rgb(117, 117, 117);
  color: white;
  border: none;
  padding: 10px 18px;
  font-size: 1rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.15s ease;
  box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
}

button:hover {
  background-color: rgba(110, 65, 20, 0.85);
  transform: scale(1.03);
}

button:active {
  background-color: rgba(90, 52, 15, 1);
  transform: scale(0.98);
}

.item3
		{ 
		font-family: Montserrat, Calibri, sans-serif; 
		font-size: calc(0.8em + 1vw); /* responsive text size for sonnet */
		line-height: 1.5; /*controls line height*/
		}  		
img
		{
		display: block;
		}	
		
		
/* 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: rgb(73, 55, 3);
		} 

a:visited
		{ 
		color: rgb(49, 37, 2); 
		}

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

a:active 
		{ 
		color: rgb(196, 146, 8); 
		}

 /*bottom of stylesheeet*/