/* Cursive that is easy to read */
@import url('https://fonts.googleapis.com/css2?family=Petit+Formal+Script&display=swap');

.petit-formal-script-regular {
  font-family: "Petit Formal Script", cursive;
  font-weight: 400;
  font-style: normal;
}

/* Imported cursive font - used in body */
@font-face { 
	font-family: "Goudy Bookletter 1911"; 
	src: url("./font_folder/goudy_bookletter_1911.woff") format("woff"),
	url("./fonts/goudy_bookletter_1911.woff") format("woff"), 
		url("./fonts/examplefontname.ttf") format("truetype"); 
	font-weight: normal;
	font-style: normal; 
	font-display: swap; 
}

/* Background image default */
body {
  background-color: lightblue;
background-image: url('./images_folder/pastelbg.gif');
  color: dark grey;
  font-family: "Goudy Bookletter 1911", serif;
}

/* Header & navbar */
.headerbar{
  background-color: #F5EFE6;
  opacity: 70%;
}

.navbar{
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: 1rem;
  list-style: none;
  font-size: 1.5em;
}

 .navbar a:link {
      text-decoration: none;
      color: black;
}

.navbar a:visited {
      color: black;
}

.navbar a:hover {
      text-decoration: none;
       color: lightblue;
}

.navbar a:active {
      text-decoration: none;
}

/* Specifically the header font */
.nametitle h1{
  font-family: "Petit Formal Script", cursive;
  position:relative;
  background: rgb(245 239 230 / 75%);
  width: fit-content;
  margin-inline: auto;
  padding:.25em;
  border: dashed #664751 .05em;
}

.nametitle h1{
  font-size:3.5em;
  color: #97A8B8;
  text-align: center;
}

/* cute cat image in body */
img {
  width: 20%;
}

.bodytext{
  background-color: #F5EFE6;
  background: rgb(245 239 230 / 75%);
  padding: 1em;
  display:block;
  width:90%;
  max-width:900px;
  margin:0 auto;
  position:relative;
  border: dashed #664751 .15em;
}

/* font sizes in body for paragraphs and the list- dont know why i couldnt do them separately */
body p {
  font-size: 1.25em;
}

ul {
  font-size: 1.125em;
}