/* NOTE: there is almost certainly a more efficient way to do pretty much anything i've done here. 
i'm completely self taught and a relative beginner LOL*/

@font-face { 
  font-family: "Basiic";
  src: url('https://strawberryparfait.neocities.org/basiic.woff') format('woff'); 
  font-weight: normal;
  font-style: normal;} 

body {
  text-align: left;
  background-image: url(https://file.garden/adfnC3CaZRzhSt0X/hearts-valentines.png);
  font-family: "Basiic"; 
  color: #c42727;
}
.container {
  display: grid;
  grid-template-areas: 
  "header header header header"
  "nav main main main";
  grid-template-columns: 200px 400px;
  margin: auto auto auto auto;
  align-items: center;
  justify-content: center;
  padding: 10px;
  gap: 10px;
  max-width: 1500px;
}

.header { 
  grid-area: header; 
  height: 130px;
  width: 820px;
  color: white;
  background: #f73939 ;
  border-radius: 20px;
  padding: 15px;
  border: dashed 2px #f73939;
}

.header h1 {
  font-style: italic; 
  text-align: right; 
  overflow: hidden;

}

.header a {
  text-decoration: none; 
  color: white; 
}

.header a:hover {
  text-decoration: none; 
  color: maroon; 
}

.header h3 {
  text-align: right;
  font-size: 14px;
  padding: 0 5px;
}

.nav {
  grid-area: nav;
  background-image: url(https://file.garden/adfnC3CaZRzhSt0X/mag-white-txtbleed2.png);
  height: 370px;
  padding: 5px;
  border-radius: 10px;
  border: double #f73939;
}
.nav h3 {
  text-align: left;
  font-style: italic;
  border-bottom: 2px dashed #f73939;
  color: #f73939;
}
hr { 
	border: none; 
  border-bottom: 2px dashed;
  border-color: #f73939;
  padding: 3px;
}

.nav p {
  margin: 0.8px;
  text-align: left;
  padding: 0 5px;
}

.nav a {
  color: #f73939;
  text-decoration: none;
}
.nav a:hover {
  color: maroon;
}

.main {
  grid-area: main;
  height: 400px;
  width: 600px;
  overflow: auto;
  padding: 20px;
  background-image: url(https://file.garden/adfnC3CaZRzhSt0X/mag-white-txtbleed2.png);
  border-radius: 10px;
  border: double #f73939;
}

.main h2 { 
	text-align: left;
  font-style: italic;
  border-bottom: 2px dashed #f73939;
  color: #f73939;
}

.main h3 { 
	text-align: left;
  font-style: italic;
  color: #f73939;
}