/* =======================
   FONT IMPORT
======================= */
@font-face {                  
  font-family: 'Glacier';
  src: url(https://humantooth.neocities.org/fonts/Glacier-Regular.woff) format('woff2');
  font-weight: normal;
  font-style: normal;
} 

/* =======================
   ROOT VARIABLES
======================= */
:root {
  /* Text */
  --font-family: Monospace;
  --text-color: #cf8f4b;
  --link-color: #7a542c;

  /* Backgrounds */
  --bg-1: #7a542c;
  --bg-2: #E5E6E7;

  /* Borders */
  --border-1: #cf8f4b;
  --border-2: #25190d;
}

/* =======================
   MISCELLANEOUS
======================= */
::selection {
  background-color: var(--link-color);
  color: var(--bg-2);
}

::-webkit-scrollbar {
  width: 7px;
}
::-webkit-scrollbar-thumb {
  border: 1px dotted var(--border-1);
  background-color: var(--bg-2);
  border-radius: 5px;
  transition: 0.25s;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--link-color);
}

/* =======================
        BODY
======================= */
body {
  font-family: var(--font-family);
  font-size: 12px;
  color: var(--border-2);
  margin: 0;
  padding: 0 0 5px 0;
  background-image: url("https://crverave.carrd.co/assets/images/image12.jpg?v=49396862");
}

/* =======================
        TEXT
======================= */
a {
  color: var(--link-color);
  background: transparent;
  text-decoration: underline;
}     
a:hover {
  color: var(--text-color);
  letter-spacing: 1px;
}

h1, h2 {
  font-family: 'Glacier';
  font-weight: normal;
  text-align: center;
  margin: 3px;
  padding: 0;
}
h1 { font-size: 25px;font-weight: bold;text-transform: lowercase;animation: wiggle 2s;animation-iteration-count: infinite; }
h2 { font-size: 20px;font-weight: bold; }

p { margin: 3px; line-height: 1; color: var(--text-color) }
b { color: var(--bg-1); font-weight: bold; }
i { color: var(--bg-2); font-weight: bold; font-style: italic; }

  @keyframes wiggle {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}

/* =======================
   LAYOUT
======================= */
#main {
  text-align: left; 
  margin: auto;
  width: 700px;
}

.container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.container img{
  max-width: 100%;
  max-height: 100%;
}

#section {
  display: flex;
  flex: 0 0 70%;
  flex-wrap: wrap;
  gap: 7px;
}
#section::after {
  content: "";
  display: block;
  clear: both;
}

#sidebar { flex: 0 0 30%; }

.update-log {
  max-height: 100px;       
  overflow-y: auto;         
  padding-right: 5px;       
  word-wrap: break-word;
  box-sizing: border-box;   
}

#header {
  background: no-repeat;
  height: 200px;
  width: 100%; 
  margin: 40px 0 10px 0; 
  border: 1px dotted var(--border-1);
 
}
#header img {
  height: 200px;
  width: 100%;
  image-rendering: pixelated;
}
#footer { clear: both; text-align: center; }
#credits {
  margin: auto; 
  padding: 5px;
  height: 30px; 
  width: 600px;
}

.broider {
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAABIElEQVR4AYTOiW3DMBQD0DQbdY5O00k6TefoSA2eAQq0ItkBCH4eYvx8bH5/P1//d9g8fSxHjX1+/37cQW81/DaqaCxlOjdurddaDqdRBUVBQPNpTLsDmh+Nx6hgVVCKj+nG6t0xmkDZQ9od0Fe+XufPPBAEXeh858/vji+N2WyADrshOsybMUZ9UYez7sw9563HqH9OgGmPd5DryTHthjFKCOYCf4dd/zSaQbwbal8vw+2P0RSEqyK/cdUfo4b60aw7c8956zGq2PAldNgN0WHejKd/mAs0XxnTbky7Me0OaP7xpQ6GENPugL7y9To/Rpm7h7I8wHRj9W6MKqbgDgzxaUy7A5ofjU+jDAVFN9A4aK3XOp23UYGiB3fQ05/xAgAA//9tzZLLAAAABklEQVQDAFA7VCJe5rcJAAAAAElFTkSuQmCC") 7 /  7px / 0 round;
    border-width:  7px;
    border-style:  solid;
}

/* =======================
   NAVIGATION & DROPDOWN
======================= */
#navigation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background-color: var(--bg-2);
  padding: 3px;
  margin-bottom: 10px; 
  border: 1px dotted var(--border-1);
}

.dropdown {
  float: left;
  overflow: hidden;
  background: transparent;
}
.dropdown .dropbtn {
  color: var(--link-color);
  font-family: var(--font-family);
  border: none;
  margin-left: 5px;
  background: transparent;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: var(--bg-2);
}

.dropdown-content {
  display: none;
  position: absolute;
  z-index: 1;
  min-width: 100px;
  background-color: var(--bg-2);
  border: 1px dotted var(--border-1);
}
.dropdown-content a {
  display: block;
  padding: 2px;
  color: var(--text-color);
  text-align: left;
  border-bottom: 1px dotted var(--border-2);
}
.dropdown-content a:hover {
  background-color: var(--link-color);
  color: var(--bg-2);
  letter-spacing: 1px;
}
.dropdown:hover .dropdown-content { display: block; }

.update { margin-left: 5px; }

/* =======================
   TITLES
======================= */
.title {
  margin-bottom: 5px;
  padding: 4px;
  border-bottom: 1px dotted var(--border-1);
  font-weight: bold;
  font-size: 12px;
  line-height: 10px;
  letter-spacing: 1px;
}

/* =======================
   POSTS
======================= */
.post-large {
  background-color: var(--bg-2); 
  padding: 7px;
  border: 1px dotted var(--border-1);
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  text-align: center;
}

.post-small {
  background-color: var(--bg-2);
  padding: 7px;
  margin: 0;
  border: 1px dotted var(--border-1);
  max-height: 300px;
  line-height: 1;
  width: calc(50% - 4px);
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  text-align: center;
}


/* =======================
   SIDEBAR
======================= */
.post-side {
  background-color: var(--bg-2); 
  padding: 5px;
  margin-bottom: 7px; 
  border: 1px dotted var(--border-1);

}
.niche {
  background-color: var(--bg-2); 
  padding: 5px;
  margin-bottom: 7px; 
  border: 1px dotted var(--border-1);
}