* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 html {
   width: 100%;
   max-width: 100%;
   overflow-x: hidden;
   background-color: #BCC4DB;
   background-image: url("background.gif");
   background-repeat: repeat;
 }

 body {
   width: 100%;
   max-width: 1600px;
   margin: 2rem auto 0 auto;
   padding: 20px;
   color: #262839;
   font-family: 'Open Sans', sans-serif;
   overflow-x: hidden;
 }

 .site-header {
   margin-bottom: 2rem;
   padding-left: 0.5rem;
 }

 .headers-2 {
   font-family: 'Jersey 10', sans-serif;
   font-size: 6rem;
   color: #7E809A;
   line-height: 0.85;
   margin-bottom: 0px;
   text-shadow: -5px 0 #262839, 5px 0 #262839, 0 -5px #262839, 0 5px #262839, 2px 2px 4px #000;
 }

 .headers-3 {
   font-family: 'Jersey 10', sans-serif;
   font-size: 2.5rem;
   color: #7E809A;
   line-height: 1;
   text-shadow: -2px 0 #262839, 2px 0 #262839, 0 -2px #262839, 0  2px #262839, 2px 2px 4px #000;
 }

 .container {
   display: flex;
   gap: 20px;
   width: 100%;
 }

 .block-1 {
   flex: 2 1 0;
   background-color: #BCC4DB;
   border-left: 2px solid #262839;
   padding: 20px;
   height: 550px;
   box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
   min-width: 0;
 }

 .pfpwrapper {
   width: 100%;
 }

 .pfp {
   width: 100%;
   height: auto;
   display: block;
   border: 2px solid #BCC4DB;
 }

 .block-2 {
   flex: 8 1 0;
   min-width: 0;
 }

 .headers {
   font-family: 'Jersey 10', sans-serif;
   color: #7E809A;
   font-size: 3rem;
   line-height: 1;
   text-shadow: -2px 0 #262839, 2px 0 #262839, 0 -2px #262839, 0 2px #262839, 2px 2px 4px #000;
 }

 .block-1 ul {
   padding-left: 2.5em;
 }

 .block-1 li {
   font-style: italic;
 }

 .area {
   background-color: #BCC4DB;
   border-left: 2px solid #262839;
   padding: 1rem;
   box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
   display: flex;
   flex-direction: column;
   gap: 1rem;
   width: 100%;
   min-width: 0;
 }

 .postheadwrapper {
   display: flex;
   justify-content: space-between;
   align-items: center;
   min-width: 0;
 }

 .posthead {
   min-width: 0;
 }

 .posth2 {
   font-size: 26px;
 }

 .date {
   font-size: 13px;
 }

 .icon {
   width: 75px;
   height: auto;
   border: 2px solid #5c3443;
   flex-shrink: 0;
 }

 .area p {
   width: 100%;
   overflow-wrap: anywhere;
   word-break: break-word;
 }

 a {
   color: #262839;
   text-decoration: none;
   border-bottom: 0.01em solid #262839;
 }

 a:hover { font-weight: bold; }

 ::-webkit-scrollbar { width: 6px; }
 ::-webkit-scrollbar-track { background-color: #BCC4DB; }
 ::-webkit-scrollbar-thumb { background-color: #C36B8D; }

 #credit {
   margin-top: 1rem;
   text-align: right;
   font-size: 12px;
 }

 #ropeCanvas {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   pointer-events: none; /* Keeps canvas click-through by default so links work */
   z-index: 9999;
 }

 @media (max-width: 768px), body.is-mobile {
   html, body {
     width: 100% !important;
     max-width: 100% !important;
     overflow-x: hidden !important;
     margin: 0 !important;
   }
   body {
     padding: 10px !important;
     margin-top: 1rem !important;
   }
   .container {
     flex-direction: column !important;
     gap: 15px !important;
     width: 100% !important;
   }
   .site-header {
     text-align: center !important;
     padding-left: 0 !important;
     width: 100% !important;
   }
   .headers-2 {
     font-family: 'Jersey 10', sans-serif;
     font-size: 6rem;
     color: #7E809A;
     line-height: 1.1;
     margin-bottom: 5px;
     text-shadow: -5px 0 #262839, 5px 0 #262839, 0 -5px #262839, 0 5px #262839, 2px 2px 4px #000;
   }
   .headers-3 {
     font-family: 'Jersey 10', sans-serif;
     font-size: 2.8rem;
     color: #7E809A;
     line-height: 1.2;
     text-shadow: -2px 0 #262839, 2px 0 #262839, 0 -2px #262839, 0 2px #262839, 2px 2px 4px #000;
   }
   .block-1, .block-2, .area {
     width: 100% !important;
     max-width: 100% !important;
     min-width: 0 !important;
     flex: none !important;
     margin: 0 !important;
   }
   .block-1 {
     height: auto !important;
     padding: 15px !important;
     text-align: center !important;
   }
   .pfpwrapper {
     display: flex !important;
     justify-content: center !important;
     width: 100% !important;
   }
   .pfp {
     width: 80% !important;
     max-width: 160px !important;
   }
   .block-1 ul {
     padding: 0 !important;
     display: flex !important;
     flex-wrap: wrap !important;
     justify-content: center !important;
     gap: 0.25rem 0.75rem !important;
     list-style: none !important;
   }
   .block-1 li {
     display: inline !important;
     margin: 0 !important;
   }
   .postheadwrapper {
     flex-direction: column !important;
     align-items: flex-start !important;
   }
   .icon {
     width: 60px !important;
   }
   #credit {
     text-align: center !important;
   }
 }