html, body {
    height:100%;
    width:100%;
    margin:0;
    background-color: #3A3333;
    font-size:16px;
    font-family:Arial, Helvetica, sans-serif;
}

@media (prefers-contrast: more) {
  * {
    outline: 2px solid #A0DEF9 !important;
    color:#222222;
  }
}

.Archives-search-loading{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  min-height:100px;
  z-index:1;
}

/* ---- Lightsaber Loader ---- */
:root{
  --size: 96px;           /* diameter */
  --thickness: 6px;      /* ring thickness */
  --blue: #00e5ff;        /* saber blue */
  --blue-soft:#8feaff;    /* softer edge tone */
}

.saber-loader{
  width:var(--size); height:var(--size);
  border-radius:50%;
  position:relative;
  /* “blade” band with bright tip + blue body */
  background:
    conic-gradient(
      from 0deg,
      rgba(120, 241, 241, 0.98) 0 16deg,
      var(--blue-soft) 16deg 60deg,
      var(--blue) 60deg 300deg,
      rgba(120, 241, 241, 0.98) 300deg 360deg
    );
  /* Hollow center -> ring */
  -webkit-mask:
    radial-gradient(farthest-side,
      transparent calc(50% - var(--thickness)),
      #000 calc(50% - var(--thickness)),
      #000 calc(50% + var(--thickness)),
      transparent calc(50% + var(--thickness)));
          mask:
    radial-gradient(farthest-side,
      transparent calc(50% - var(--thickness)),
      #000 calc(50% - var(--thickness)),
      #000 calc(50% + var(--thickness)),
      transparent calc(50% + var(--thickness)));
  animation: spin 1.15s linear infinite;
}

/* Outer glow */
.saber-loader::before{
  content:"";
  position:absolute; inset:-8px; border-radius:50%;
  background:inherit;
  filter: blur(14px) saturate(140%);
  opacity:.9;
  -webkit-mask: inherit; mask: inherit;
  animation: spin 1.15s linear infinite, glow 1.8s ease-in-out infinite;
}

/* Fast specular glint for “shine” */
.saber-loader::after{
  content:"";
  position:absolute; inset:-2px; border-radius:50%;
  background:
    conic-gradient(from 0deg,
      transparent 0 342deg,
      rgba(255,255,255,.98) 342deg 360deg);
  -webkit-mask: inherit; mask: inherit;
  filter: blur(1.5px) brightness(1.25);
  opacity:.95;
  animation: spin 500s linear infinite;
}

/* Accessibility */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Animations */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes glow { 50% { filter: blur(16px) saturate(160%) brightness(1.25); } }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .saber-loader, .saber-loader::before, .saber-loader::after{
    animation: none;
  }
}


.Page {
    display:flex;
    flex-direction: column;
    height:100%;
    width:100%;
}

.Page-header {
    background-image:url('media/templebg.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size:cover;
    margin:0;
    height:30vh;
    width:100%;
    box-shadow: 0px 6px 6px 0px #000000b9;
}

.Page-header-archive {
    background-image:url('media/archivesbg.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size:cover;
    margin:0;
    height:30%;
    width:100%;
    
    box-shadow: 0px 6px 6px 0px #000000b9;
}

.Site-banner {
    display:flex;
    flex-direction:column;
    align-items: center;
    height:100%;
    width:100%;
    /* margin-left:22.5%;
    margin-right:17.5%; */
    
}

.Banner-imgs {
    height:100%;
    width:60%;
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.Site-title{
    width:100%;
}

.Site-title-training{
    width:100%;
}

.TJO-banner-logo {
    flex: 0 0 35%;
    max-width: 150px;
    height: auto;
}

.TJO-banner-logo:hover {
    scale:1.1;
}

.homepage-links {
  text-decoration: none;
  color:#A0DEF9;
}

.Colorful-saber {
    width:80%;
    height:auto;
    display:block;
    margin-left:17%;
    margin-right:13%;
    margin-top:-7%;

  /* start filter */
  filter: hue-rotate(0deg);

  /* continuous hue shift */
  animation: hueShift 10s linear infinite;

  /* hint for smoother performance */
  will-change: filter;
}

@keyframes hueShift {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(360deg); }
}

.Homepage-textbox {
    width:90.5%;
    margin-top:-9%;
    align-items: center;
    display:flex;
    margin-bottom:-2%;
    flex-direction: column;
    margin-left:4.75%;
    margin-right:4.75%;
    overflow-wrap: break-word;
    hyphens: auto;
    text-align: justify; 
}


.Homepage-text{
    width:100%;
    font-size:1rem;
    line-height:25px;
    margin-top:0.25%;
    color:#e8f3ffd0;
    margin-bottom:2%;
    z-index:1;
}

br {
  line-height:0.75em;
}



@media (max-width: 650px) {

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

    .Homepage-text{
        width:100%;
        font-size:1rem;
        padding:10px;
        line-height:25px;
        margin-top:0.25%;
        color:#e8f3ffd0;
        z-index:1;
    }

    .Community-textbox {
        width:90.5%;
        align-items: center;
        display:flex;
        margin-bottom:-1%;
        flex-direction: column;
        margin-left:4.75%;
        margin-right:4.75%;
        overflow-wrap: break-word;
        hyphens: auto;
        text-align: justify;
    }

     .Nav-button-div {
        width:80%;
        height:100%;
        
    }
    
    .Holocron-img {
        width:20%;
        margin-bottom:2%;
        margin-top:5%;
        filter: drop-shadow(7px 8px 12px #222222);
    }

    .Archives-interface {
        width:90%;
        height:68vh;
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top:-1%;
        margin-bottom:-1%;
    }

    .Archives-search-area {
        width:100%;
        display:flex;
        flex-direction: column;
        align-items: center;
        margin-top:2%;
        margin-left:-6%;
        margin-bottom:0;
    }

    .Archives-results-area {
        max-width:100%;
        max-height:45vh;
        margin-top:3%;
        margin-left:-2%;
        overflow-y:scroll;
        overflow-x:hidden;
        margin-bottom:0;
        scrollbar-width:auto;
        scrollbar-color:#000000ad #d9d9d938;
    }

    .Archives-result-item {
        cursor:pointer;
        background-color: #d9d9d938;
        border:1px solid black;
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        margin-top:2%;
        padding:5px;
        margin-right:1%;
        margin-bottom:0;
    }

    .Training-title {
        margin-top:5%;
        width:60%;
        height:auto;
    }

    .Community-title {
        margin-top:5%;
        width:60%;
        height:auto;
    }

    .Training-text-div {
        width:90%;
        line-height:25px;
        max-height:45vh;
        overflow-y:scroll;
        overflow-x:hidden;
        scrollbar-width:auto;
        padding-right:15px;
        scrollbar-color:#000000ad #d9d9d938;
    }

    .Training-mid-div {
        display:flex;
        flex-direction: column;
        align-items: center;
    }

    .Invite-pic {
        max-height:50px;
        border:2px solid #00000000;
        border-radius: 20px;
        padding-left:50px;
        padding-right:50px;
        box-shadow: 0px 6px 6px 0px #000000b9;
        margin-top:2%;
        border:1px solid #000000b9;
        margin-bottom:5%;
    }

    .Site-nav {
        width:100%;
        display:grid;
        
        grid-template-columns: repeat(1, 80%);
        justify-content: center;      /* centers the grid itself */
        gap: 5px;                    /* space between buttons */
        width: 100%;
        padding: 10px 0;
        margin-top:1%;
        margin-bottom:0;
    }
    .Nav-button-div {
        width:80%;
        height:100%;
        
    }
    .Nav-butn {
        width:100%;
        height:77px;
        padding:0;
        border:none;
        background-color: transparent;
        margin-top:2%;
        cursor:pointer;
        position:relative;
        overflow: hidden;
        border-radius: 20px;
    }
 .Nav-butn img {
      position: absolute;   /* stack them */
      top: 0;
      left: 0;
      width: 100%;
      height: initial;
      background-size:contain;
      border-radius:20px;
      transition: opacity 0.8s ease-in-out;
    }

    /* Start with top image visible */
    .Nav-butn img.top {
      opacity: 1;
      z-index: 2;
    }

    /* Bottom image visible underneath */
    .Nav-butn img.bottom {
      opacity: 0;
      z-index: 1;
    }

    .Nav-butn:hover img.top {
    opacity: 0;
    }

    .Nav-butn:hover img.bottom {
        opacity: 1;
    }

    .Nav-butn:focus {
  outline: 3px solid #A0DEF9;
  outline-offset: 4px;
}


}

@media ((min-width: 651px) and (max-width:1199px)){
    .Homepage-text{
        width:100%;
        font-size:1rem;
        padding:10px;
        line-height:25px;
        margin-top:0.25%;
        color:#e8f3ffd0;
        z-index:1;
    }

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

    .Site-nav {
        width:100%;
        margin-top:2.5%;
        display:grid;
        grid-template-columns: repeat(3, 25%);
        justify-content: center;      /* centers the grid itself */
        gap: 10px;                    /* space between buttons */
        width: 100%;
        padding: 10px 0;
        margin-bottom:0;
    }

 .Nav-button-div {
        width:80%;
        height:100%;
        
    }

    .Holocron-img {
        display:none;
    }

.Archives-interface {
    width:90%;
    height:75vh;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top:1%;
    margin-bottom:5%;
}
.Archives-search-area {
    width:100%;
    display:flex;
    flex-direction: column;
    align-items: center;
    margin-top:2%;
    margin-bottom:1%;
}

    .Archives-results-area {
        max-width:100%;
        max-height:45vh;
        margin-top:2%;
        margin-left:-2%;
        overflow-y:scroll;
        overflow-x:hidden;
        margin-bottom:2%;
        scrollbar-width:auto;
        scrollbar-color:#000000ad #d9d9d938;
    }

    .Archives-result-item {
    cursor:pointer;
    background-color: #d9d9d938;
    border:1px solid black;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin-top:2%;
    padding:5px;
    margin-right:1%;
    margin-bottom:0;
}

    .Community-textbox {
        width:90.5%;
        align-items: center;
        display:flex;
        margin-bottom:-1%;
        flex-direction: column;
        margin-left:4.75%;
        margin-right:4.75%;
        overflow-wrap: break-word;
        hyphens: auto;
        text-align: justify;
    }

   .Training-title {
        margin-top:2%;
        width:40%;
    }

    .Community-title {
        margin-top:2%;
        width:40%;
    }

    .Training-mid-div {
        display:flex;
        flex-direction: row;
        align-items: center;
    }

    .Training-text-div {
        width:90%;
        line-height:25px;
        max-height:46vh;
        overflow-y:scroll;
        overflow-x:hidden;
        padding-right:50px;
        scrollbar-width:auto;
        scrollbar-color:#000000ad #d9d9d938;
    } 

    .Invite-pic {
        max-height:50px;
        border:2px solid #00000000;
        border-radius: 20px;
        padding-left:50px;
        padding-right:50px;
        box-shadow: 0px 6px 6px 0px #000000b9;
        margin-top:2%;
        border:1px solid #000000b9;
        margin-bottom:5%;
    }



}

@media (min-width: 1200px) {
    .Training-title {
        margin-top:2%;
        width:20%;
    }

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

    .Training-mid-div {
        display:flex;
        flex-direction: row;
        align-items: center;
    }

    .Training-text-div {
        width:90%;
        line-height:25px;
        max-height:45vh;
        overflow-y:scroll;
        overflow-x:hidden;
        padding-right:50px;
        scrollbar-width:auto;
        scrollbar-color:#000000ad #d9d9d938;
    } 

    .Community-title {
        margin-top:2%;
        width:40%;
    }  

    .Holocron-img {
        width:30%;
        margin-bottom:2%;
        margin-top:0;
        filter: drop-shadow(7px 8px 12px #222222);
    }

    .Archives-interface {
        width:75%;
        height:45vh;
        display:flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-bottom:1%;
    }

    .Archives-search-area {
        width:50%;
        display:flex;
        flex-direction: column;
        align-items: center;
        margin-top:2%;
        margin-left:-6%;
        margin-bottom:-20%;
    }

    .Archives-results-area {
    max-width:50%;
    max-height:312px;
    margin-top:3%;
    margin-left:-2%;
    overflow-y:scroll;
    overflow-x:hidden;
    margin-bottom:-20%;
    scrollbar-width:auto;
    scrollbar-color:#000000ad #d9d9d938;
}

.Archives-result-item {
    cursor:pointer;
    background-color: #d9d9d938;
    border:1px solid black;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin-top:2%;
    padding:5px;
    margin-right:1%;
    margin-bottom:0;
}

    .Site-nav {
        width:100%;
        margin-top:1%;
        display:grid;
        grid-template-columns: repeat(3, 25%);
        justify-content: center;      /* centers the grid itself */
        gap: 10px;                    /* space between buttons */
        width: 100%;
        padding: 10px 0;
        margin-bottom:0;
    }
    
    .Invite-pic {
        max-height:75px;
        border:2px solid #00000000;
        border-radius: 20px;
        padding-left:50px;
        padding-right:50px;
        box-shadow: 0px 6px 6px 0px #000000b9;
        margin-top:2%;
        border:1px solid #000000b9;
        margin-bottom:2%;
    }

    .Community-textbox {
        width:90.5%;
        align-items: center;
        display:flex;
        margin-bottom:-1%;
        flex-direction: column;
        margin-left:4.75%;
        margin-right:4.75%;
        overflow-wrap: break-word;
        hyphens: auto;
        text-align: justify;
    
    }





}

@media(min-width:1700px){
    .Site-nav {
        width:100%;
        margin-top:3%;
        display:grid;
        grid-template-columns: repeat(3, 25%);
        justify-content: center;      /* centers the grid itself */
        gap: 10px;                    /* space between buttons */
        width: 100%;
        padding: 10px 0;
        margin-bottom:0;
    }
}

.Nav-butn {
    width:100%;
    height:77px;
    padding:0;
    border:none;
    background-color: transparent;
    margin-top:2%;
    cursor:pointer;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

    .Nav-butn img {
      position: absolute;   /* stack them */
      top: 0;
      left: 0;
      width: 100%;
      height: initial;
      background-size:contain;
      border-radius:20px;
      transition: opacity 0.8s ease-in-out;
    }

    /* Start with top image visible */
    .Nav-butn img.top {
      opacity: 1;
      z-index: 2;
    }

    /* Bottom image visible underneath */
    .Nav-butn img.bottom {
      opacity: 0;
      z-index: 1;
    }

    /* On hover, fade out top image */
    .Nav-butn:hover img.top {
    opacity: 0;
}

.Nav-butn:hover img.bottom {
    opacity: 1;
}

.Nav-butn:focus {
  outline: 3px solid #A0DEF9;
  outline-offset: 4px;
}

.Nav-butn:focus {
  outline: 3px solid #A0DEF9;
  outline-offset: 4px;
}







.Archives-search-input {
    width:70%;
    background-color: #d9d9d938;
    border:1px solid black;
    font-size:1.15rem;
    padding:10px;
    color: #A0DEF9;
    text-align: center;
}

.Archives-search-input::placeholder {
    color:white;
    opacity:0.5;
}



.Search-hint {
    font-size:1rem;
    color:#ffffffc2;
    margin-bottom:0;
}



.Archives-result-item:hover {
    opacity:95%;
    border:1px solid #A0DEF9;
}

.Result-title {
    font-size:1.5rem;
    color:#91dcfc;
    margin:0;
    text-align:center;
}

.Author-name {
    font-size:1.15rem;
    margin:0;
    color:#ccc8c8c2;
}

.Date {
    font-size:0.85rem;
    margin:0;
    color:#ffffff;
}

.Result-item-hr {
    width:96%;
    height:1px;
    background-color: #ffffffc2;
    border:none;
}

.Result-text {
    font-size:1.15rem;
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, white 50%, transparent 100%);
    mask-image: linear-gradient(to bottom, white 50%, transparent 100%);
    max-height:150px;
    overflow-wrap: break-word;
    hyphens: auto;
    text-align: justify;
    margin-top:0;
    color:#ffffffc2;
}

.Page-header-community {
    background-image:url('media/cantinabg.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size:cover;
    margin:0;
    height:30%;
    width:100%;
    box-shadow: 0px 6px 6px 0px #000000b9;
}

.Invite-pic:hover {
  filter:invert(50%);
}

.Page-header-training {
    background-image:url('media/trainingbg.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size:cover;
    margin:0;
    height:30%;
    width:100%;
    box-shadow: 0px 6px 6px 0px #000000b9;
}

.Level-1-text-mid {
    color:#ffffffc2;
    font-size:1rem;
    overflow-wrap: break-word;
    hyphens: auto;
    text-align: justify;
    line-height:25px;
}

.Isk {
    padding:10px;
    margin-right:5%;
}

.Training-text {
    color:#ffffffc2;
    font-size:1rem;
    overflow-wrap: break-word;
    hyphens: auto;
    text-align: justify;
}