/* General Reset */
* {
  margin: 0;
  padding: 0;

  color: #1a9fbd;

}

/* Main Container */
.site_container {
  display: flex;
  justify-content: center;
  background-color: #292929;
  color: #fff;
  font-family: 'Courier New', Courier, monospace;
  height: 100dvh;
  align-items: stretch;
  width: 100dvw;
}

.site_border {
  border: 1px solid #ca3070;
  border-image: linear-gradient(to right, #ca3070 0%, #b3bf4a 100%);
  border-image-slice: 1;
  margin: 10px;
  min-width: 99%;}

.site_container_inner {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  justify-content: space-between;
  height: 100%;
  /* width: fit-content; */
}

/* Navbar */
.site_navbar_main_page {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* padding: 15px 10px 10px 15px; */
  background-color: #292929;
  max-width: 100%;
  height: fit-content;
}

.site_title_main_page {
  font-family: homespun;
  font-size: calc(1em + 3dvh);
  transform: skew(348deg) rotate(353deg);
  grid-area: text;
  color: rgb(0 255 254 / 71%);
  text-shadow: 8px 8px 0 #fd00d37a, -7px -5px 0 #ddff0040;
  /* height: 100%; */
  padding: 15px 10px 10px 15px;
}

.site_navbar_items_main_page {
  margin-left: 20px;
  text-decoration: none;
  text-decoration: none;
  font-family: wicked;
  color: #1a9fbd;
  padding: 0.5rem;
  font-size: calc(1em + 2.2dvh);
  text-shadow: 4px 3px 0px #d912d187, 9px 8px 0px rgb(32 158 169 / 12%);
  transform: rotate(357deg);
}

.site_navbar_items_main_page a {
  margin-left: 20px;
  text-decoration: none;
}

.site_navbar_items_main_page a:hover {
  text-decoration: underline;
}

button {
  background-color: #333333;
  font-family: homespun;
  padding: 5px;
}

/* Main Content Section Container - hold the "middle" bits, sidebar and main window container */
.content_container {
  display: flex;
  flex-grow: 1;
  padding-top: 10px;
  margin-right: 20px;
  height: 0%;
}

/* Sidebar */
.sidebar_main_page {
  width: 38%;
  background-color: #292929;
  border: 1px solid #ff0099;
  padding: 10px;
  margin-top: 10px;
  color: #eeeeee;
  font-size: 14px;
  box-sizing: border-box;
  margin-left: 10px;
  border-image: linear-gradient(to right, #ca3070 0%, #b3bf4a 100%) 1 1 1 1;
  border-image-slice: 1;
}
/* Main content window */
.main_content_window {
  display: flex;
  flex-direction: column;
  padding-right: 20px;
  overflow-y: scroll;
  padding-left: 10px;
  scrollbar-color: rgb(98, 97, 97) rgb(72, 72, 72);
  scrollbar-width: thin;
  width: 100%;
  --mask: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 1) 86%, rgba(0, 0, 0, 0) 106%, rgba(0, 0, 0, 0) 0) 100% 50% / 100% 100% repeat-x;
  -webkit-mask: var(--mask);
  mask: var(--mask);
}


/* Feedpost Container - contains all feedpost component blocks generated from api */
/* .feedposts_container_main_page {
  display: flex;
  flex-direction: column;
  padding-right: 20px;
  overflow-y: scroll;
  padding-left: 10px;
  scrollbar-color: rgb(98, 97, 97) rgb(72, 72, 72);
  scrollbar-width: thin;
  width: 100%;
  --mask: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 1) 86%, rgba(0, 0, 0, 0) 106%, rgba(0, 0, 0, 0) 0) 100% 50% / 100% 100% repeat-x;
  -webkit-mask: var(--mask);
  mask: var(--mask);
} */



/* Individual feedpost component */
.feedpost_component_main_page {
  width: 100%;
  position: relative;
}

/* Container for the tabs inside the feedpost component*/
.feedpost_tab_buttons_container_main_page {
  display: flex;
  background-color: #292929;
  padding-top: 10px;
  position: relative;
}

/* Styling for all tabs - not the text label though*/
.feedpost_tab_button_main_page {
  padding: 10px 20px;
  background-color: #4d3e3e;
  margin-right: 5px;
  cursor: pointer;
  outline: none;
  position: relative;
  z-index: 1;
  transition: all 0.2s ease;
  margin-right: 0.3rem;
  cursor: pointer;
  transition: background ease 0.3s;
  font-family: homespun;
  border-top: 1px solid;
  border-left: 1px solid;
  border-right: 1px solid;
  border-image-slice: 1;
  border-bottom: 0px solid #f2e505;
  border-image: linear-gradient(to right, #b3bf4a 34%, #ca3070 86%, #b3bf4a 108%) 1 1 1 1;
}

/* Styling for the tab label text */
.feedpost_tab_buttons_label{
  text-shadow: 4px 3px 0px #09010987, 9px 8px 0px rgb(14 208 225 / 25%);
  animation: color-change 2s infinite;
  transform: rotate(358deg);
  font-size: calc(1em + 1dvh);
  background-color: rgb(65 63 63 / 0%);
}
/* Remove margin from the last tab */
.feedpost_tab_button_main_page:last-child {
  margin-right: 0;
}

/* Active tab styling - makes bottom border disappear via z-index bring to front, with no bottom border*/
.feedpost_tab_button_main_page.active {
  background-color: #413f3f;
  z-index: 3;
  border-top: 1px solid;
  border-left: 1px solid;
  border-right: 1px solid;
  border-image: linear-gradient(to right, #b3bf4a 34%, #ca3070 86%, #b3bf4a 108%) 1 1 0 1;
  text-shadow: 4px 3px 0px #09010987, 9px 8px 0px rgb(14 208 225 / 25%);
}

/* Inactive tabs go to the back in z-index, this puts the border from the content box over the tab bottom*/
.feedpost_tab_button_main_page:not(.active) {
  z-index: 0;
}
/* Fedpost component title box and label */
.feedpost_title_main_page {
  border: solid, 1px;
  margin-bottom: 10px;
  background-color: #413f3f;
  padding: 10px;
  border-image: linear-gradient(to right, #b3bf4a 34%, #ca3070 86%, #b3bf4a 226%) 1 1 1 1;
  border-image-slice: 1;
  font-family: homespun;color: #ff8f8f;
  text-shadow: 4px 3px 0px #d912d187, 9px 8px 0px rgb(32 158 169 / 12%);
  font-size: calc(1em + 0.5dvh);
}


/* Feedpsot component Content container */
.feedpost_content_container_main_page {
  border: 1px solid;
  background-color: #413f3f;
  position: relative;
  top: -1px;
  overflow: hidden;
  height: auto;
  transition: height 0.2s ease;
  padding: 10px;
  border-image: linear-gradient(to right, #b3bf4a 34%, #ca3070 86%, #b3bf4a 108%) 1 1 1 1;
  border-image-slice: 1;
}

/* Hidden class for content - the JS events to listen for clicking tabs sets the inactive ones to this - display none*/
.feedpost_content_main_page {
  display: none;
  font-size: 18px;
  border: solid, 1px;
  background-color: #333333;
  padding: 10px;
  border-image: linear-gradient(to right, #b3bf4a 34%, #ca3070 86%, #2f3405ab 108%) 1 1 1 1;
  border-image-slice: 1;
  word-break: break-word;
}

/* Show the visible content */
.feedpost_content_main_page.visible {
  display: block;
}


/* Footer */
.footer_main_page {
  background-color: #282828;
  padding: 10px;
  text-align: center;
  border: 1px solid #ff0099;
  color: #fff;
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
  margin-top: 10px;
  border-image: linear-gradient(to right, #ca3070 0%, #b3bf4a 100%) 1 1 1 1;
  border-image-slice: 1;
  font-family: 'homespun';
  color: #1a9fbd;
  text-shadow: 4px 3px 0px #d912d187, 9px 8px 0px rgb(32 158 169 / 12%);
}

/* Colour change animation styles */
  @-webkit-keyframes color-change {
    0% {
      color: #f2ff00;
    }
    50% {
      color: blue;
    }
    100% {
      color: red;
    }
  }
  @-moz-keyframes color-change {
    0% {
      color: red;
    }
    50% {
      color: blue;
    }
    100% {
      color: red;
    }
  }
  @-ms-keyframes color-change {
    0% {
      color: red;
    }
    50% {
      color: blue;
    }
    100% {
      color: red;
    }
  }
  @-o-keyframes color-change {
    0% {
      color: red;
    }
    50% {
      color: blue;
    }
    100% {
      color: red;
    }
  }
  @keyframes color-change {
    0% {
      color: #9ff18a;
    }
    25% {
      color: #cfc12e;
    }
    50% {
      color: #ff9e00;
    }
    75% {
      color: #e07be7eb;
    }
    100% {
      color: #7be7ceeb;
    }
  }




/* Responsive Layout */
@media (max-width: 768px) {
  .content_container {
      flex-direction: column;
      max-width: 100%;
      margin: 0px;
      padding: 10px;
  }
  .site_navbar_items_main_page{
    display:none;
  }
  .sidebar_main_page {
      margin-bottom: 20px;
      /* margin: 10px; */
      width: auto;
      /* max-width: 100%; */
      margin-bottom: 10px;
      margin-left: 0;
  }

  .main_content_window {
    max-width: 100%;
    padding-right: 0px;
    -ms-overflow-style: none; 
    scrollbar-width: none;  
    padding-left: 0px;
    
}

  .feedposts_container_main_page {
      max-width: 100%;
      padding-right: 0px;
  }
  .feedposts_container_main_page::-webkit-scrollbar {
    display: none;
  }
/*   .feedposts_container_main_page{
    -ms-overflow-style: none; 
    scrollbar-width: none;  
    padding-left: 0px;
    
  } */
}