* { box-sizing: border-box; }

body {
  background-color: #1a1c1f;
  font-family: Arial, Helvetica, sans-serif;
  color: #c1cee2;
  line-height: 1.4em;
  text-align: center;
  max-width: 500px;
  margin: 2rem auto;
  padding: 0 1rem;
}

h1, h2, h3, h4 {
  color: #FFBFC8;
  line-height: 1.4em;
}

a, a:visited {
  color: #DF6E9F;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* header & footer boxed */
header, footer {
  width: 100%;
  text-align: center;
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
}

#navbar {
  width: 100%;
  padding: 0 10%;
}
#navbar ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style-type: none;
  justify-content: space-evenly;
}
#navbar li {
  padding-top: 5px;
  padding-bottom: 5px;
  display: inline-block;
  margin-bottom: 0.2em;
  margin-top: 0.2em;
}
#navbar li a, #navbar li a:visited {
  color: #c1cee2;
  text-decoration: none;
  padding: 3px;
}

#navbar li a:hover {
  background-color: rgb(255, 191, 200);
  color: #1a1c1f;
  text-decoration: none;
}

/* main content */
#container {
  max-width: 500px;
  width: 90%;
  margin: 2rem auto;
  text-align: left;
}

/* paragraphs left aligned */
#container p { text-align: left; }

img, video {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1rem auto;
}

iframe[src*="youtube.com"] {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  display: block;
  border: none;
  margin: 1rem auto;
}

#letterboxd-diary {
	  max-width: 500px;
}
	.boxd-container {
	  max-width: 500px;
	  padding: 1rem;
	  font-family: Arial;
	}
	
	.boxd-entry {
	  display: flex;
	  align-items: flex-start;
	  gap: 1rem;
	  text-align: left;
	}
	
	.boxd-entry img {
	  width: 100px;
	  border-radius: 4px;
	  position: relative;
	  top: -14px;
	}
	
	.boxd-content {
	  flex: 1;
	}
	
	.boxd-content a {
	  font-weight: 600;
	  color: #c1cee2;
	  text-decoration: none;
	}
	
	.boxd-content a:hover {
	  text-decoration: underline;
	}
	
	.boxd-date {
	  font-size: 0.85rem;
	  color: #7f8794;
	  margin-top: 0.25rem;
	}
	
	.boxd-review {
	  margin-top: -0.6rem;
	  font-size: 0.85rem;
	}


#storygraph-diary {
  max-width: 500px;
}


.sg-container h4 {line-height: 1em;margin:0;}

.sg-container {
  max-width: 500px;
  font-family: Arial;
  margin-bottom: 2em;
}
.sg-entry {
  display: flex;
  align-items: flex-start;
  margin-bottom: 0.5rem;
  text-align: center;
}
.sg-entry:last-child {
  border-bottom: none;
}
.sg-content {
  flex: 1;
}
.sg-content a {
  color: #c1cee2;
  text-decoration: none;
}
.sg-content a:hover {
  text-decoration: underline;
}

body[onload="InitFeed();"]{margin: 0;padding:0}

.feed-container{line-height: 1.6em;text-align:left;font-size:12px;font-family:Helvetica,Arial,Sans-serif;border:1px solid #c1cee2}
.feed-container .header{display:none;}
.feed-container .footer{color:#6f7680}
.feed-container .content{margin:1em}
.feed-container .content .item{margin:0 0 7px 0;padding:0 0 7px 0;border-bottom:1px dashed #c1cee2;}
.feed-container .content .item .title{color:#FFBFC8;font-weight:bold}
.feed-container .content .item .title a:link{color:#FFBFC8;text-decoration:none;}
.feed-container .content .item .title a:visited{color:#DF6E9F;text-decoration:none;}
.feed-container .content .item .title a:hover{color:#FFBFC8;text-decoration:underline;}
.feed-container .content .item .title a:active{color:#c1cee2;text-decoration:none;}
.feed-container .content .item .description a{text-decoration:none;color:#c1cee2;}
.feed-container .content .item .description a:hover{text-decoration:underline;color:#FFBFC8;}