/* work-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  src: url('images/work-sans-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* work-sans-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  src: url('images/work-sans-v24-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* playfair-display-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  src: url('imagesplayfair-display-v40-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* playfair-display-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  src: url('imagesplayfair-display-v40-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* Now to apply fonts to specific areas */
h1, h2,  {
  font-family: 'Playfair Display', serif;
  font-weight: 500; 
}

p, body, aside, .box, .gridContainer2 { /* maybe */
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
}

a {
  font-family: 'Work Sans', sans-serif; /* makes all links this family */
}

     /* type scale generator start */         
html {font-size: 16px;}

body {
  font-family: 'Open Sans', sans-serif;
  font-weight: false;
  line-height: 1.65;
		margin: 0;
}

p {
  font-size: 1em;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: 'Open Sans', sans-serif;
  font-weight: true;
  line-height: 1.15;
}

h1,
.text-size-h1 {
  font-family: 'Playfair Display', sans-serif;
  font-weight: 600;
  margin-top: 0;
  font-size: 2.44em;
}

h2,
.text-size-h2 { font-size: 2.44em; }

h3,
.text-size-h3 { font-size: 1.95em; }

h4,
.text-size-h4 { font-size: 1.56em; }

h5,
.text-size-h5 { font-size: 1.25em; }

.text-caption { font-size: 0.8em; }

small,
.text-small {
  font-size: 0.64em;
}   
/* type scale generator end */  

html {font-size: 16px;
	 background-image: url(paperbackground.jpg)}

h1 {
  text-align: center;
  margin: 20px 0;  /* Makes h1 centered please */
}

nav ul{
  list-style: none;
  display: flex;
  justify-content: center;
  flex-direction: row;
  gap: 20px;
}

nav ul li {
  padding: 5px;
  border-radius: 5px;
}

nav a {
	transition: transform .5s;
	background-color: 1s ease-in 1.5s;
}

nav a:hover {
	background-color: #dbd0c5; /* color of the hover*/
	transform: scale(1.2);
}

nav li {
	display: inline;
}

nav a {
	display: inline-block; /* Link Animation*/
	text-decoration: none;
	font-size: 1.2em;
	color: #000000;
	padding: 10px 20px;
	background: #ffffff;
	border-radius: 5px;
	border: 1px solid #000000;
	box-shadow: inset 0px 1px 0px rgba(255,255,255,0.7);
	text-shadow:
		0px -1px 1px rgba(000,000,000,0.2),
		0px 1px 0px rgba(255,255,255,0.3);
}
aside {
  width: 30%;
  max-width: 400px;
  float: none;
  margin: 10px;
  background-color: #FFFFFF;
  padding: 20px 30px;
  border: 1px dotted rgb(0,0,0);
  border-top: 20px solid #FFFFFF;
  border-radius: 10px;
	margin: 30px auto;
  box-shadow: 5px 5px 10px rgba(0,0,0,.5); /* Aside box on the center for my pages*/
	text-align: center;
}

/* CSS boxes container */
.gridContainer2 {
  display: grid;
  border: none;
  border-radius: 20px;
  width: 80%;
 height: 800px;
 gap: 0px;
 margin: 0 auto;
text-align: center;
grid-template-rows: 1fr;
grid-template-columns: 1fr 3fr;
overflow: hidden;
}

/* CSS Grid Items for tool box i think */
.box {
  background-color: #FFFFFF; 
  color: black;
  border-radius: 0px;
  border: none;
}

.a {

}


.b {
  /*hmmmm*/
}

nav + nav {
	margin-top: 15px;
}

.backspace {
	margin-left: 0;
}
	.branding {
  display: flex;
  align-items: center; /* put logo next to text*/
  gap: 12px;
}
.branding h1 {
    margin: 0;               
    font-size: 2em;          
}


header { /* moved links to header and made header box white yayyy!!!*/
	display: flex;
	justify-content: space-between;
	align-text: center;
	padding: 15px 35px;
	background-color: #FFFFFF;
	margin-bottom: 50px;
}

.branding img {
    display: block;          
}


footer {
  background-color: #FFFFFF;
  padding: 15px;
  text-align: center;
  margin-top: 15px;    /* white footer box*/
  border-top: none;
  width: 100%;
}