@font-face {                  
font-family: 'unixel';
src: url(https://humantooth.neocities.org/fonts/unixel-Regular.woff2) format('woff2');
font-weight: normal;
font-style: normal;
} 

@font-face {                  
font-family: 'Illusion';
src: url(https://litterbug.neocities.org/fonts/IllusionSerif-Regular.woff2) format('woff2');
font-weight: normal;
font-style: normal;
} 

@font-face {                  
font-family: 'SectorMono';
src: url(https://humantooth.neocities.org/fonts/SectorMono-Normal.woff) format('woff');
font-weight: normal;
font-style: normal;
} 

@font-face {                  
font-family: 'Handwriting';
src: url(https://litterbug.neocities.org/diaryproject/Handwriting_3-Regular.woff) format('woff');
font-weight: normal;
font-style: normal;
} 

h1 {
  color: black;
  font-family: Papyrus, fantasy; 
  font-size: 24px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 26.4px;
}

h2 {
  color: black;                 
  font-family: Handwriting;
  font-weight: normal;
  font-style: normal;
  font-size: 40px; font-variant: normal; line-height: 30px; 
}
  
h3 {
  color: black;
  font-family: serif; 
  font-size: 24px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 26.4px; 
}

h4 {
  color: black;
  font-family: sans-serif; 
  font-size: 18px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 26.4px; 
}

body {
  background-image: url("https://litterbug.neocities.org/diaryproject/moon.png");
  color: black;
  font-family: serif; 
  font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 20px;
  min-width: 250px;
}

p {
  color: black;
  font-family: Handwriting;
  font-size: 30px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 30px;
}

a:link {
  color: deeppink;
  background-color: transparent;
  text-decoration: underline;
}

a:visited {
  color: darkblue;
  background-color: transparent;
  text-decoration: underline;
}

a:hover {
  color: peachpuff;
  background-color: transparent;
  text-decoration: underline;
}

img {
  max-width:100%;
}

/*END OF BASE STYLES*/

.parentcontainer {
  display: flex;
  flex-flow: column nowrap;
  height: 700px;
}

.container {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 750px;
  height: 700px;
  margin: auto;
  position: relative;
}

.image {
  max-width: 100%;
  max-height: 621.78px;
  object-fit: cover;
  z-index: -1;
}

.columns {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  flex-grow: 1;
  align-items: flex-start;
  max-width: 100%;
  gap: 10px 30px;
  z-index: 1;
  position: absolute;
}

.main {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 50%;
  gap: 10px 30px;
  flex: 1;
  max-height: 590px;
  overflow: scroll;
}

.main-2 {
  display: flex;
  flex-flow: column;
  justify-content: space-around;
  align-items: center;
  gap: 10px 30px;
  width: 50%;
  flex: 1;
}

@media (max-width: 750px) {
  .container {
    max-width: 100%;
}
}

.item-1{
  padding: 15% 5% 10% 10%;
}

.item-2{
  padding: 20% 10% 10% 10%;
}

.item-3{
  justify-content: center;
  align-items: center;
  width: 100%;
}

:root {
  --spacing: 30px;
  --size: 30px;
}