/* General styling for the body */
body {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  align-items: center;
  background-image: url('https://echoescapes.neocities.org/Anwir_Castle1.jpg');
  background-repeat: no-repeat;
  background-attachment: Fixed;
}



/* Container for the main content */
.container {
    position: relative;
    background-color: rgba(255, 255, 255, 0); /* Slightly transparent white background */
    max-width: 1100px;
    padding: 290px 490px;
    border-image-source: url('https://echoescapes.neocities.org/Border_Complete.png');
    border-image-slice: 150;
    border-image-width: 68px; /* Adjust according to the visual effect you want */
    border-image-repeat: stretch; /* Can use 'stretch' or 'round' based on preference */
    border-style: solid;
    overflow: hidden;
    clip-path: inset(0 0 0 0); /* This clips everything outside the border box */
}

/*Organizers*/

.columns.two{
  /*display: grid;
  grid-template-columns: 49% auto;
  right: -41px;*/
  width: auto;
}

.post {
  background-image: url('https://echoescapes.neocities.org/MalevolentBackground.png');
  background-size:cover;
  z-index: -1;
}

/*end of organizers*/

.custom-emoticon {
    width: 20px; /* Adjust size as needed */
    height: auto; /* Maintain aspect ratio */
    vertical-align: middle; /* Align with text */
    margin: 0 5px; /* Space around the image */
    width: 25px;
}

.content {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  padding: 24px;
  width: 60vw;
  gap: 24px;
}

.status-container {
    position: absolute;
    top: 10px; /* Distance from the top */
    right: 10px; /* Distance from the right */
    background: rgba(200, 200, 200, 0.7); /* Glossy gray background */
    border-radius: 15px; /* Round corners */
    padding: 10px 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Optional: shadow for glossy effect */
    color: #333; /* Text color */
    font-size: 16px; /* Font size */
    font-weight: bold; /* Font weight */
    display: flex;
    align-items: center;
}

.vl {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgb(211 223 255 / 22%) 0%, rgb(44 56 91 / 43%) 35.94%, rgb(171 61 28 / 45%) 100%);
  box-shadow: -1px 0px 1px rgba(0, 0, 0, 0.4);
  text-align: center;
}

a .navlink {
  text-decoration: none;
  color: #F1FFF3 !important;
  text-shadow: 0px -1.2px #00000040;
  text-decoration-thickness: 1px;
  text-align: center;
}

.navbar {
  display: flex;
  flex-direction: column; /* Change this to column to make it vertical */
  justify-content: flex-start;
  align-items: center; /* Center the items horizontally within the navbar */
  width: 134px; /* Set the width to 40px */
  padding: 0;
  background: var(--glassFx), var(--glassColor), var(--glassBase);
  background-blend-mode: overlay, normal, normal;
  box-shadow: 0px 10px 16px rgba(0, 0, 0, 0.3), inset 0px 1px 0px rgba(245, 245, 245, 0.3), inset 0px -1px 1px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(2px);
  position: relative;
  right: -62px;
  top: 105px;
}

.nav.desktop {
  display: flex;
  flex-direction: column; /* Make sure this is column for vertical layout */
  align-items: stretch;
  gap: 0;
  width: 100%; /* Adjust the width as necessary or remove if not needed */
  height: auto; /* Adjust if necessary */
  pointer-events:all;
  z-index:-1;
  position:relative;
}

.window {
  border-radius: 4px;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  /*box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.5);*/

}

.border{
  border-image-source: url('https://echoescapes.neocities.org/Border_Complete.png');
  border-image-slice: 150;
  border-image-width: 68px; /* Adjust according to the visual effect you want */
  border-image-repeat: stretch; /* Can use 'stretch' or 'round' based on preference */
  border-style: solid;
  padding:35px;
}

.tabborder{
  border-image-source: url('https://echoescapes.neocities.org/TabBorder.png');
  border-image-slice: 150;
  border-image-width: 68px; /* Adjust according to the visual effect you want */
  border-image-repeat: stretch; /* Can use 'stretch' or 'round' based on preference */
  border-style: solid;
  width: inherit;
  pointer-events:none;
  position:relative;
  padding:4px;
}

.window.title {
  border-radius: 4px 4px 0px 0px;
  flex-direction: column; /*Set this back to row if you want the text to start at the left*/
  align-items: center;
  padding: 8px;
  
  color: #ffffff;
  background: var(--glassFx), var(--glassColor), var(--glassBase);
  background-blend-mode: overlay, normal, normal;
  box-shadow: 0px 10px 16px rgba(0, 0, 0, 0.7), inset 0px 1px 0px rgba(245, 245, 245, 0.2), inset 0px -1px 1px rgba(0, 0, 0, 0.2);
  text-shadow: 0px -1.2px #00000040;
  backdrop-filter: blur(2px);
  position: relative;
  z-index: -1;
}

.window.content {
  border-radius: 0px 0px 4px 4px;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px;
  gap: 4px;
  height: 100%;
  
  color: #000000;
  background: url(img/noise.png), rgb(235 227 217 / 67%);
  background-blend-mode: overlay, normal;
  box-shadow: 0px 10px 16px rgba(0, 0, 0, 0.7), inset 0px 1px 0px rgba(245, 245, 245, 0.2), inset 0px -1px 1px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(2px);
  position: relative;
  height:auto;
  z-index: -1;
}

.panel {
    position: absolute;
    top: 20px; /* Offset from the top */
    left: 20px; /* Offset from the left */
    right: 20px; /* Offset from the right */
    padding: 2px;
    background-color: rgba(255, 255, 255, 0);
}

/* Ensure text is centered in the main content area */
.main-content {
    text-align: center;
}

/* Styling for the tabs on the left */
.tabs-container {
    position: absolute;
    left: 72px;
    top: 341px;
    display: flex;
    flex-direction: column;
    z-index: 1;
    scale: 2;
}

a:link, a:visited{
  color: black;
  text-decoration:none;
  
}

.tab {
    background: url('https://echoescapes.neocities.org/Fil_Tab.png') no-repeat center center;
    background-size: contain;
    width: 158px;
    height: 45px;
    margin-bottom: 5px;
    text-align: center;
    line-height: 50px; /* Centers text vertically within the tab */
    color: #333; /* Text color */
    font-weight: bold;
    font-size: 18px;
    padding-left: 3px;
    text-decoration: none;
}

.home-tab {
    background-image: url('https://echoescapes.neocities.org/Homepage_Tab.png'); /* Custom image for Home tab */
    scale: 1.8;
    padding-left:14px;
    padding-bottom:9px;
    font-size: 11px;
}

/* Styling for the castle in the bottom right corner */
.castle-decor {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 564px;
    height: 564px;
    background: url('https://echoescapes.neocities.org/Anwir_Castle.png') no-repeat bottom right;
    background-size: contain;
    z-index: -1; /* Positioned behind the content */
}

p{
    padding:1px;
    text-align:left;
}

.navlink{
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
}

.navlink:hover{
  background: linear-gradient(180deg, rgb(184 158 89 / 14%) 32.81%, rgb(160 88 33 / 70%) 100%);
}

:root {
  --glassFx: linear-gradient(271.63deg, rgba(255, 255, 255, 0.0210908) 7.36%, 
  rgb(172 120 20 / 20%) 99.12%);
  
  --glassColor: linear-gradient(0deg, rgb(160 88 33 / 70%), rgb(160 106 33 / 48%));

  --glassBase:linear-gradient(180deg, rgb(217 66 12 / 70%) 0%, rgba(33, 33, 33, 0.7) 49.99%, rgba(5, 5, 5, 0.7) 50%, rgba(38, 38, 38, 0.7) 100%);
  }