/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@font-face {
  font-family: 'MGF Pinlock';
  src: local('MGF Pinlock'),
  url('https://files.catbox.moe/vf8wv9.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Begin Again';
  src: local('Begin Again'),
  url('https://files.catbox.moe/g7ue4e.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Unicorn Calligraphy';
  src: local('Unicorn Calligraphy'),
  url('https://files.catbox.moe/631kkb.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


* {
  box-sizing: border-box;
}

html, body {
  cursor: url('pixels/pagedeco4.gif'), auto;
}

a, .sidebar-btn-img, button {
  cursor: url('pixels/pagedeco4.gif'), pointer;
}

body {
 
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 0;
  min-height: 100vh;
  
  background-color: #ffe1e1;
  background-image: url('images/strawbbckgrd1.png');
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  
  font-family: 'Begin Again', sans-serif;
  color: #a3002e;
  
}

.page-width {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.header-container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

  .fancy-header {
    font-family: 'MGF Pinlock', serif;
    font-size: 60px;
    color: #800020;
    text-shadow: 3px 3px 0 #ffb0b0;
    
    animation: float 3s ease-in-out infinite;
  }
  
  @keyframes float {
    0% {transform: translateY(0); }
    50% {transform: translateY(-10px); }
    100% { transform: translateY(0); }
  }

.flex-wrapper {
  display: flex;
  flex-direction: row; 
  align-items: stretch;
  
  width: 850px; 
  height: 660px;
  
  margin: 0; 
  gap: 15px; 
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 15px; 
  width: 160px; 
  flex: 0 0 160px; 
}
  
.sidebar-module {
  background-color: #ffcccc;
  padding: 10px;
  border: 5px solid #ffb0b0;
  width: 100%;
  
  flex-grow: 0;
  flex-shrink: 1;
  
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
}

.sidebar-module h2 {
  margin-top: 0;
  margin-bottom: 5px;
}

.sidebar-module a {
  display: flex;
  margin-bottom: 2px;
}

.sidebar-module img {
  width: 130px;
  height: auto;
  max-width: 140px;
  object-fit: contain;
}

.status-box {
  flex-grow: 1;
  background-color: #ffe1e1;
  font-size: 14px;
  border-style: dashed;
}

.main-container { 
 width: 450px;  
  flex: 1; 
  padding: 30px;
  
  border: 5px solid #ffb0b0;
  background-color: white;
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url('images/heartsbckgrd.png');
  background-size: contain;
  background-position: center;
  
  overflow-y: auto;
}

.sidebar-module:last-child {
  flex-grow: 1 
}


h1 {
  
  font-family: 'MGF Pinlock', serif;
  font-size: 36px;
  color: #800020;
}
  
h2 {
  font-family: 'Unicorn Calligraphy', serif;
  font-size: 28px;
  color: #800020;
}


a:link {
  color: #FFBCD9;
  text-decoration: underline;
  font-weight: bold;
}

a:visited {
  color: #FFD1DC;
}

a:hover {
  background-color: #ffd1dc;
  color: #d21f3c;
  text-decoration: underline;
  border-radius: 4px;
}

.sidebar-btn-img img {
  width: 130px;
  height: auto;
  display: block;
  margin: 0 auto;
  transition: all 0.3s ease-in-out;
}

.sidebar-btn-img:not(.active-btn):hover img {
  filter: brightness(0.8) saturate(1.2) drop-shadow(0 0 4px #8E5A5A);
  transform: scale(1.05);
}

.active-btn {
  cursor: default;
  pointer-events: none;
}

.active-btn img {
  filter: brightness(0.8) saturate(1.4) drop-shadow(2px 2px 3px #5c2a2a);
  transform: scale(1.05);
  border-radius: 8px;
}

::-webkit-scrollbar {
  width: 15px;
  display: block;
}

::-webkit-scrollbar-track {
  background-color: #ffe1e1;
  border-left: 1px solid #ffb0b0;
}

::-webkit-scrollbar-thumb {
  background-color: #ffcccc;
  box-shadow: inset 1.5px 1.5px 0 #ffffff,
              inset -1.5px -1.5px 0 #a3002e;
  border: 1px solid #a3002e;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #ffb0b0;
  box-shadow: inset 1.5px 1.5px 0 #ffffff,
              inset -1.5px -1.5px 0 #800020;
}