:root {
   --bg: #465D35;
   --box-bg: #F7F9E5;
   --border: #E09184;
   --text: #2A3218;
   --accent: #C63C4D;
   --accent-dim: #630508;
   --accent-extra: #ECAE34;
   --font-header: 'Pirata One', monospace;
   --font-subtitle: 'Quintessential', serif;
   --font-body: 'Courier', monospace;
}

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   font-size: 14px;
   line-height: 1.3;
}


/* Base Codes */
body {
   background-color: var(--bg);
   padding: 20px 15px;
   color: var(--text);
   font-family: var(--font-body);
}

a {
   font-size: 15px;
   color: var(--accent-extra);
   text-decoration: none;
}

a:hover {
   color: var(--accent);
   font-style: italic;
}

b {
   font-weight: bold;
   color: var(--accent-dim);
}

i {
   color: var(--accent);
}

p {
   text-align: justify;
}

textarea {
   height: 31px;
   width: 88px;
   font-size: 9px;
}


/* Header */
.header {
   display: flex;
   flex-direction: column;
   max-width: 1000px;
   align-items: center;
   margin-bottom: 10px;
	padding: 30px 10px 20px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: linear-gradient(rgba(170, 93, 53, 0.5), rgba(224, 145, 132, 0.8)), url(https://lovemichy.neocities.org/.assets/decos/wind-chime.gif);
	background-size: cover;
	background-position: center;
}

.site-name {
   font-family: var(--font-header);
   font-size: 55px;
   color: var(--accent-dim);
   text-shadow: 0 1px 3px rgba(247, 249, 229, 1);
   letter-spacing: 2px;
   margin-top: -15px;
}

.sub-title {
	color: var(--text);
	letter-spacing: 2px;
	text-shadow: 0 1px 2px rgba(247, 249, 229, 1);
	font: italic 1.3em var(--font-subtitle);
   margin-top: -5px;
}

@media (max-width: 800px) {
   .site-name { 
      font-size: 28px; 
      margin-top: 2px;
   }

   .sub-title {
      font-size: 12px;
      margin-bottom: 4px;
   }
}


/* Navigation */
.navi {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 8px;
   margin: 2px;
}

.navi a {
	display: block;
	text-decoration: none;
	padding: 3px 9px;
	text-align: center;
	text-transform: lowercase;
	color: var(--accent-dim);
	background: var(--accent-extra);
	border: 1px solid var(--border);
	border-radius: 12px;
}

.navi a:hover {
	color: var(--text);
	background: var(--box-bg);
   letter-spacing: 0;
}

@media (max-width: 800px) {
   .navi {
      grid-template-columns: repeat(3, 1fr);
   }
}

/* Container */
.container {
	max-width: 1000px;
	margin: auto;
	display: flex;
   flex-direction: column;
	position: relative;
}

.content {
   display: flex;
   flex-direction: row;
   gap: 10px;
   margin: auto;
   justify-content: center;
}

@media (max-width: 800px) {
   .content { 
      flex-direction: column; 
   }
}

/* Columns */
.main-column {
   display: flex;
   flex-direction: column;
   gap: 8px;
   margin-bottom: auto;
   width: 700px;
}

.side-column {
   display: flex;
   flex-direction: column;
   position: sticky;
   top: 0;
   gap: 8px;
   margin-bottom: auto;
   width: 290px;
}

.twin-box {
	display: grid;
	grid-template-columns: 1.5fr 1.5fr;
	gap: 8px;
}

.trio-box {
   display: grid;
   grid-template-columns: repeat(3,1fr);
   gap: 8px;
}

.leftie {
   display: grid;
   grid-template-columns: 0.8fr 1.2fr;
   gap: 8px
}

.rightie {
   display: grid;
   grid-template-columns: 2fr 1fr;
   gap: 8px
}

@media (max-width: 800px) {
   .main-column,
   .side-column {
      display: contents;
   }

   .twin-box,
   .trio-box,
   .leftie,
   .rightie {
      grid-template-columns: 1fr;
   }
}

/* Container Box */
.box {
   background-color: var(--box-bg);
   border: 1px solid var(--border);
   border-radius: 10px;
   padding: 20px;
}

.tab-box {
   height: max-content;
   background-color: var(--box-bg);
   border: 1px solid var(--border);
   border-radius: 10px;
   padding: 20px;
}

.scrollbox {
	height: 250px;
	overflow:auto;
	overflow-x:hidden;
	background: var(--box-bg);
	border: 1px solid var(--border);
   border-radius: 10px;
   padding: 8px 20px;
   scrollbar-width: thin;
}

.footer {
   display: flex;
   flex-direction: column;
   height: 25px;
   text-align: center;
   font-size: 12px;
   color: var(--text);
   background-color: var(--box-bg);
   border: 1px solid var(--border);
   border-radius: 8px;
   margin-top: 25px;
   padding: 4px;
}

@media (max-width: 800px) {
   .tab-box {
      height: max-content;
   }
}

/* Texts */
.title {
   display: flex;
   align-items: center;
   font-family: var(--font-header);
   font-size: 30px;
   color: var(--accent-dim);
   margin: 2px 0px 8px 0px; 
}

.profile {
   margin-top: 20px;
   line-height: 1.7em;
   margin-bottom: 10px;
}

@media (max-width: 800px) {
   .profile {
      margin-top: 10px;
      line-height: 1.5em;
   }
}

.row {
   padding: 8px;
	border-bottom: 1px dashed var(--border);
}

.row:last-child {
	border-bottom: none;
}

.row a:hover {
   color: var(--accent);
   font-style: italic;
   letter-spacing: 2px;
}

.updates {
   padding: 8px;
   border-bottom: 0.5px dotted var(--accent-dim);
   line-height: 1.5;
}

.updates:last-child {
   border-bottom: none;
}

.updates b {
   background-color: var(--accent-extra);
   padding: 3px 8px;
   border-radius: 10px;
   border: 1px solid var(--border);
}

.list {
	list-style: none;
}

.list li {
	padding: 8px 0 8px 0;
	border-bottom: 1px dashed var(--accent);
}

.list li:last-child {
   border-bottom: none;
}

.list img {
   margin-right: 10px;
}

.small-text {
   font-size: smaller;
   color: var(--accent);
   text-align: center;
   margin-top: -12px;
   margin-bottom: 8px;
}

.see-more {
   text-align: right;
   font-size: small;
   margin-top: 15px;
   margin-bottom: 10px;
}


/* Other Elements */
.icon {
   opacity: 0.6;
   margin-right: 8px;
   vertical-align: bottom;
}

.bullet {
   margin-right: 4px;
   opacity: 0.6;
   vertical-align: middle;
}

.divider {
   border-bottom: 1px dashed var(--accent-dim);
   margin: -8px 0px 20px 0px; 
}

.photobox {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   margin: 20px;
}

@media (max-width:800px) {
   .photobox {
      flex-direction: column;
   }
}

.captioned {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 8px;
   margin: 20px;
}

.photobox img,
.captioned img {
   height: 120px;
   border-radius: 12px;
}

.inked {
   text-align: center;
   font-size: 12px;
   color: var(--text);
   padding: 8px;
}

.inked img {
   height: 200px;
   padding: 4px;
   border-radius: 20px;
}

@media (max-width:800px) {
   .inked img {
      height: 100px;
      border-radius: 10px;
   }
}


.photo-table {
   display: flex;
   text-align: justify;
   align-items: center;
   gap: 20px;
   margin: 20px;
}

.photo-table img {
   float: left;
   width: 200px;
}

@media (max-width:800px) {
   .photo-table {
      flex-direction: column;
   }
}