body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
height: 100vh;
}
.site-container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
background-image: var(--background-image);
background-size: cover;
}
.site-header {
background-color: var(--header-background);
color: rgb(34, 204, 204);
padding: 10px;
text-align: center;
}
.summary {
cursor: pointer;
font-weight: bold;
padding: 10px;
background-color: var(--dark-background);
color: var(--accent);
font-family: var(--font);
border: var(--border) var(--accent) solid;
border-radius: 15px;
transition: background-color 0.3s;
}
.posts {
flex: 1;
overflow-y: auto;
padding: 10px;
display: flex;
flex-direction: column; 
}
.message {
margin: 5px 0; 
padding: 10px;
border-radius: 5px;
max-width: 100%;
display: inline-block;
background: var(--light-background);
color: var(--accent);
font-family: var(--font);
border: var(--border) var(--accent) solid;
border-radius: 15px;
}
.message.first {
align-self: center; 
}
.message.replies {
align-self: center;
}
.message.last {
align-self: center; 
}
.message a:link {
font-family: var(--font);
background: var(--dark-background);
color: var(--accent);
font-size: medium;
}
.box-input {
display: flex;
padding: 10px;
}
.box-input textarea {
flex: 1;
padding: 10px;
border: var(--border) var(--accent) solid;
background-color: var(--dark-background);
color: var(--accent);
border-radius: 5px;
margin-right: 10px;
}
.box-input button {
background-color: var(--dark-background);
color: var(--accent);
border: var(--border) var(--accent) solid;
border-radius: 5px;
cursor: pointer;
}
.menu-container {
position: relative;
background-color: var(--dark-background);
color: var(--accent);
display: flex;
flex-direction: row;
}
.menu-container h3 {
flex-grow: 1;
text-align: center;
}
.menu-toggle {
display: none;
}
.hamburger {
cursor: pointer;
display: flex;
flex-direction: column;
width: 30px;
height: 20px;
justify-content: space-between;
margin: 10px;
position: absolute;
right: 10px;
top: 10px;
}
.bar {
height: 3px;
background-color: var(--accent);
}
.nav {
display: none;
background-color: var(--dark-background);
position: absolute;
top: 50px;
left: 0;
width: 100%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.nav ul {
list-style: none;
padding: 0;
margin: 0;
}
.nav ul li {
padding: 15px;
}
.nav ul li a {
text-decoration: none;
color: var(--accent);
}
.menu-toggle:checked + .hamburger + .nav {
display: block;
}
.spoiler {
background-color: var(--dark-background);
color: rgb(0,0,0,0);
cursor: pointer;
transition: color 0.2s;
display: inline;
outline: none;
}
.spoiler:hover,
.spoiler:focus {
color: var(--accent);
}
details {
color: var(--accent);
font-size: medium;
background-color: var(--light-background);
padding: 10px; 
}