/*ZF*/

  body{
    max-width: 100vw;
    background-color: black;
    font-size: 16px;
    margin: 0;
  }

  footer {
    background-color: #333;
    color: #fff;
    padding: 0.8%;
    text-align: center;
    border-color: darkred;
    border-style: double;
  }

  main {
    border-style: none double none double;
    border-color: darkred;
  }

  p, h1, h2, h3, h4{
    color: white;
  }

  a{
    color: red;
  }

  a:hover{
    color: darkred;
  }

  .NoBorder{
    border: 0;
  }

  .MiddleText{
    text-align: center;
  }

  /*ZF - Index*/

    .opener{
      position: relative; /* Make .opener the positioning context */
      max-width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      border-color: darkred;
      border-style: double;
    }

    .welcomeImage{
      width: 100%;
      height: auto;
    }

    .bgimagetxt{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); /* Center the text */
      color: white;
      text-align: center;
      font-family: Libre Baskerville;
      font-size: 2.5em;
      z-index: 1;
    }

    .navigation-ribbon {
      background-color: #333;
      color: #fff;
      width: 100%;

      height: auto; /*25%px*/
      max-height: 10%; /*Boundary for the auto*/

      display: flex;
      justify-content: space-between;
      align-items: center;
      position: sticky;
      left: 0;  /* Position at the left side of the page */
      border-style: none none double none;
      border-color: darkred;

      top: 0; /* Position at the top of the page */
      z-index: 1; /* Set a higher z-index to ensure it stays on top */
    }

    .navigation-ribbon a {
      text-decoration: none;
      color: white;
      padding: 0.4% 0.8%;
    }

    .navigation-ribbon a:hover {
      background-color: #222;
      color: #ddd;
    }

    .footerContent{
      display: flex; /* Enable flexbox layout */
      justify-content: space-between; /* Distribute elements horizontally */
      align-items: center; /* Align elements vertically */
    }

    .footerContent a, .footerContent p {
      color: #fff;
      text-decoration: underline;
      cursor: pointer;
    }

    .scrollBtn{
      background-color: #444; /* Darker shade of gray */
      color: #fff; /* White text */
    }

    .scrollBtn:hover {
      background-color: #333; /* Darker background on hover */
      cursor: pointer; /* Change cursor to indicate clickability */
    }

  /*ZF - BlogStuff*/

    /*ZF - Blog on Index*/

      .BlogTitle{
        color: white;
        text-align: center;
        text-decoration: underline;
        font-family: Libre Baskerville;
        margin-top: 0;
        padding-top: 0.6%;
      }

      * {box-sizing: border-box}
      .mySlides {display: none}
      img {vertical-align: middle;}

      .slideshow-container { /* Slideshow container */
        max-width: 60%;
        position: relative;
        margin: auto;
        border-style: outset;
        border-color: darkred;
      }

      .prev, .next { /* Next & previous buttons */
        cursor: pointer;
        position: absolute;
        top: 50%;
        width: auto;
        padding: 1%;
        color: white;
        font-weight: bold;
        font-size: 2rem;
        transition: 0.6s ease;
        border-radius: 0 3px 3px 0;
        user-select: none;
      }

      .next { /* Position the "next button" to the right */
        right: 0;
        border-radius: 3px 0 0 3px;
      }

      .prev:hover, .next:hover { /* On hover, add a black background color with a little bit see-through */
        background-color: rgba(0,0,0,0.8);
      }

      .text { /* Caption text */
        color: #f2f2f2;
        font-size: 1rem;
        padding: 0.6% 0.8%;
        position: absolute;
        bottom: 3%;
        width: 100%;
        text-align: center;
      }

      .numbertext { /* Number text (1/3 etc) */
        color: #f2f2f2;
        font-size: 0.8rem;
        padding: 0.6% 0.8%;
        position: absolute;
        top: 0;
      }

      .dot { /* The dots/bullets/indicators */
        cursor: pointer;
        height: 15px;
        width: 15px;
        margin: 0 0.2%;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
      }

      .active, .dot:hover {
        background-color: #717171;
      }

      .fade { /* Fading animation */
        animation-name: fade;
        animation-duration: 1.5s;
      }

      @keyframes fade {
        from {opacity: .4} 
        to {opacity: 1}
      }

      @media only screen and (max-width: 300px) { /* On smaller screens, decrease text size */
        .prev, .next,.text {font-size: 11px}
      }

      .BlogContainerMain{
        padding-top: 0.8%;
        padding-bottom: 0.8%;
        display: flex;
        align-items: center;
        flex-direction: column; /* Arrange items vertically */
        justify-content: space-between; /* Add space between items */
      }

      .Blog1, .Blog2{
        margin-top: 0.6%;
        display: flex; /* Use flexbox for layout */
        border-style: ridge;
        border-color: darkred;
        max-width: 50%;
        max-height: fit-content;
      }

      .BlogImage1 {
        flex: 0 0 auto; /* Set image to not grow or shrink */
        margin: 1%;
      }

      .BlogImage2{
        flex: 0 0 auto; /* Set image to not grow or shrink */
        margin: 1%;
      }

      .BlogText {
        flex: 1; /* Text takes up remaining space */
        padding: 1%;
      }

      .BlogText p {
        color: white;
        font-family: Libre Baskerville;
      }

    /*ZF - Blogformat*/

      .BlogBox{
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 1%;
        padding-bottom: 1%;
      }

      .BlogImageLeft, .BlogImageRight{
        position: absolute;
        max-width: 23%;
        border-style: groove;
        border: red;
        border-width: 2px;
        margin: 0 auto;
      }

      .BlogImageRight{
        right: 1%;
        left: 75%;
      }

      .BlogImageLeft{
        left: 1%;
        right: 75%;
      }

      /*VIDEO HIGHLIGHTING*/

        #FinchVideoText{
          text-decoration: underline;
          text-decoration-color: darkgreen;
        }

        #FinchVideo{
          border-style: solid;
          border-color: green;
        }

        #OptimusVideoText{
          text-decoration: underline;
          text-decoration-color: darkblue;
        }

        #OptimusVideo{
          border-style: solid;
          border-color: blue;
        }

        #EuSurveyHouseRobotVideoText{
          text-decoration: underline;
          text-decoration-color: darkmagenta;
        }

        #EuSurveyHouseRobotVideo{
          border-style: solid;
          border-color: magenta;
        }

        #ChinaHealthRobVideoText{
          text-decoration: underline;
          text-decoration-color: darkkhaki;
        }

        #ChinaHealthRobVideo{
          border-style: solid;
          border-color: khaki;
        }

        #AdoptionRateImageText{
          text-decoration: underline;
          text-decoration-color: darkorange;
        }

        #AdoptionRateImage{
          border-style: solid;
          border-color: orange;
        }

        #editnote{
          text-align: left;
          margin: 0;
          padding: 0;
          border: 0;
        }
      
      .BlogContainer{
        background-color: #808080;
        max-width: 50%;
        max-height: fit-content;
        border-style: ridge;
        border-color: darkred;
        padding: 0;
      }
      
      .BlogSection{
        margin: 5%;
      }
      
      .BlogIntro{
        background-color: #333;
        max-width: 100%;
        height: min-content;
        padding-left: 2%;
      
        border-style: groove;
        border-color: darkred;
      }
      
      .BlogIntroTitle{
        font-family: Libre Baskerville;
        text-decoration: underline;
        color: white;
        padding-right: 1%;
      }
      
      .BlogIntro h1{
        flex: 1; /* Text takes up remaining space */
        margin-bottom: 0.2%;
      }
      
      .Blog-Timestamp{
        color: darkgray;
        font-family: Libre Baskerville;
        font-size: 0.8em;
      }
      
      .BlogMain{
        margin-top: 5%;
        
        max-width: 100%;
        height: 100%;
      
        border-style: groove;
        border-color: darkred;
        background-color: #333;
      }
      
      .BlogMainText{
        margin: 1.5%;
      }
      
      .BlogMainText h1, h2, h3{
        color: white;
        text-decoration: underline;
      }
      
      .BlogMainText p{
        color: white;
      }

      sup a {
        position: relative;
        font-size: 0.8em; 
        text-decoration: none;
      }

      #footnotes {
        margin-top: 2em;
        margin-left: 2em;
        font-size: 0.8em;
      }

      #footnotes a {
        color: white;
        text-decoration-color: red;
      }

      #footnotes a:hover {
        color: gray;
        text-decoration-color: darkred;
      }

      /*ZF - ty*/

        .tymain{
          border-style: none;
        }
        
        .tycontainer{
          margin: 0 auto;
          width: 90%;
          height: 80%;
          background-color: #808080;
          border-color: darkred;
          border-style: ridge;
        }
        
        .brickcontainer{
          padding: 1%;
          display: flex;
          flex-wrap: wrap;
        }
        
        .brick, .brick2{
          width: fit-content;
          height: fit-content;
          background-color: #444;
          padding: 0.8%;
          border-color: darkred;
          border-style: solid;
        }
        
        .brick p{
          color: white;
          font-size: 1.2rem;
          margin: 0;
        }

        .brick2 p{
          color: pink;
          font-size: 1.2rem;
          margin: 0;
        }

  /*ZF - About*/

    .AboutBox {
      display: block; /* Ensures it's a block-level element */
      margin: 0 auto; /* Centers horizontally */
      padding: 2%; /* Adds some internal spacing */
      max-width: 90%; /* Or any value less than 100% of the parent */
    }

    .AboutContainer{
      background-color: #808080;
      max-width: 100%;
      max-height: fit-content;
      border-style: ridge;
      border-color: darkred;
    }
    
    .AboutSection{
      padding-top: 2%;
      padding-bottom: 2%;
    }
    
    .AboutIntro{
      background-color: #333;
      max-width: 90%;
      height: min-content;
    
      display: flex; /* Use flexbox for layout */
    
      border-style: groove;
      border-color: darkred;
      margin: 0 auto;
    }
    
    .AboutIntroTitle{
      font-family: Libre Baskerville;
      text-decoration: underline;
      color: white;
    }
    
    .AboutIntro img{
      flex: 0 0 auto; /* Set image to not grow or shrink */
      margin-right: 3.5%; /* Add spacing between image and text */
    }
    
    .AboutIntro h1{
      flex: 1; /* Text takes up remaining space */
      padding: 1%;
    }
    
    .AboutMain{
      margin-top: 2%;
      margin-left: auto;
      margin-right: auto;
    
      background-color: #333;
      max-width: 90%;
      height: 100%;
    
      border-style: groove;
      border-color: darkred;
    }
    
    .AboutMainText{
      margin: 1.4%;
    }
    
    .AboutMainText h1{
      color: white;
      text-decoration: underline;
    }
    
    .AboutMainText p,li{
      color: white;
    }
    
    .bold{
      color: red;
    }

  /*ZF - Stuff*/

    .stuffstuffcontainer{
      padding: 2%;
    }
    
    .stuffcontainer{
      max-width: 90%;
      margin: 0 auto;
      border: darkred;
      border-style: ridge;
      background-color: #808080;
    }
    
    .stuffgridcontainer{
      margin: 0 auto;
      max-width: 90%;
      padding-top: 2%;
      padding-bottom: 2%;
    }
    
    /* CSS styles to define the grid layout */
    .grid-containerStuff {
      display: grid;
      grid-template-columns: repeat(4, 25%); /* Create 4 equal-width columns */
      grid-template-rows: repeat(0, 1fr); /*touchy*/
    }
    
    .grid-itemStuff {
      background-color: #f0f0f0;
      border: 1px solid #ccc;
      padding: 4%;
      text-align: center;
      border-style: groove;
      border-color: darkred;
      background-color: #333;
    }
    
    .grid-itemStuff a{
      text-decoration: underline;
      color: red;
    }
    
    .grid-itemStuff a:hover{
      color: darkred;
    }
    
    .item img{
      border-color: red;
      border-style: outset;
    }
    
    .item img:hover{
      border-style: inset;
    }
    
    .item p, h1{
      color: white;
      font-family: Libre Baskerville;
    }
    
    .item h1{
      text-decoration: underline;
      font-size: 1.2rem;
    }
    
    .item p{
      font-size: 0.8rem;
    }

    /*ZF - World*/

      #MCMain{
        border: none;
      }
      
      #TopText{
        font-size: 3rem;
      }

    /*ZF - Quotes*/
      
      .QuoteTitle h1{
        margin-top: 0;
        padding-top: 0.5%;
      }
      
      .BoxOfQuoteBox{
        max-width: 100%;
        max-height: 100%;
        padding-top: 1%;
        padding-bottom: 1%;
      }
      
      .QuoteBox{
        margin: 0 auto;
        width: 80%;
        background-color: #808080;
        border: groove;
        border-color: darkred;
      }
      
      .QuoteTemplate{
        padding-top: 1%;
        padding-bottom: 1%;
      }
      
      .QuoteContainer{
        margin: 0 auto;
        width: 90%;
        background-color: #333;
        border: ridge;
        border-color: darkred;
      }
      
      .Quote{
        padding: 0.4%;
      }
      
      .Quote p{
        color: gray;
        font-family: Libre Baskerville;
      }
      
      .Quote blockquote{
        color: white;
        font-family: Libre Baskerville;
      }
      
      #Backestest{
        text-align: center;
        margin: 0;
        padding-bottom: 1%;
      }
      
      .QuoteAuthor{
        font-style: italic;
        font-size: 0.8em;
        margin-bottom: 5px;
        text-align: right;
      }

    /*ZF - Uni*/

      .Attention{
        color: yellow;
      }

      .UoPLogo{
        display: block;
        margin: 0 auto;
      }
      
      .UoPHead{
        color: white;
        text-align: center;
        font-family: Libre Baskerville;
        margin-top: 0;
        margin-bottom: 0;
      }
      
      .UoPText{
        color: white;
        text-align: center;
        margin-top: 0;
        margin-bottom: 0; 
      }
      
      .StatusExp{
        color: white;
        text-align: center;
        padding: 5px;
        margin-top: 0;
        margin-bottom: 0; 
      }

  /*ZF - Socials*/

  #AllTrailsUserTxtColour{
    color: black;
  }

  #YT1NameTxtColour{
    color: black;
  }

  .scSocialPer{
    max-width: 100vw;
    border-style: double;
    border-color: darkred;
  }
  
  .scSocial{
    max-width: 100%;
    height: 150px;
    display: flex; /* Activate flexbox for scSocial - What allows for the seperation for more than one box in one */
  }
  
  .scAccount{
    flex: 1; /* Allocate equal space to both containers */
    display: flex; /* Activate flexbox for container-a and container-b */
    align-items: center; /* Align content vertically in the center */
    justify-content: center; /* Align content horizontally in the center */
    opacity: 1; /* Set initial opacity to fully visible */
    transition: opacity 0.3s ease-in-out; /* Smooth transition on hover */
  }
  
  .scAccount:hover{
    opacity: 0.5; /* Opacity value for dimmed image on hover */
  }
  
  .scAccount1, .scAccount2{
    flex: 1; /* Allocate equal space to both containers */
    width: 50%; /* Alternative approach for explicit 50% width */
    display: flex; /* Activate flexbox for container-a and container-b */
    align-items: center; /* Align content vertically in the center */
    justify-content: center; /* Align content horizontally in the center */
    opacity: 1; /* Set initial opacity to fully visible */
    transition: opacity 0.3s ease-in-out; /* Smooth transition on hover */
  }
  
  .scAccount1:hover, .scAccount2:hover{
    opacity: 0.5; /* Opacity value for dimmed image on hover */
  }
  
  .scAccount img, .scAccount1 img, .scAccount2 img{
    margin-right: 0.2%; /* Adjust spacing as needed */
  }
  
  .scAccounTxt{
    color: white;
    font-family: Libre Baskerville;
    text-decoration: none;
  }
  
  #Mast, #Steam, #Git, #Spot, #Insta1, #Insta2, #X1, #X2, #YT1, #YT2, #AniList, #Lett, #Monk, #Stats, #AllT, #KeyBr{
    background-repeat: no-repeat;
    background-size: cover;
    border-style: solid;
  }

  #KeyBr{
    background-image: url("images/Socials/keybr_bg.png");
    border-color: gray;
  }
  
  #AllT{
    background-image: url("images/Socials/AllTrailBanner.png");
    border-color: green;
  }

  #Stats{
    background-image: url("images/Socials/StatsfmProfile.png");
    border-color: green;
  }
  
  #Monk{
    background-image: url("images/Socials/monkeytype.png");
    border-color: pink;
  }
  
  #Lett{
    background-image: url("images/Socials/Letterboxd.png");
    border-color: orange;
  }
  
  #YT1{
    background-image: url("images/Socials/YT1.png");
    border-color: red;
  }
  
  #YT2{
    background-image: url("images/Socials/YT2.png");
    border-color: red;
  }
  
  #X1{
    background-image: url("images/Socials/X1.png");
    border-color: darkgray;
  }
  
  #X2{
    background-image: url("images/Socials/X2.png");
    border-color: darkgray;
  }
  
  #Insta1{
    background-image: url("images/Socials/Insta1.png");
    border-color: purple;
  }
  
  #Insta2{
    background-image: url("images/Socials/Insta2.png");
    border-color: peru;
  }
  
  #Spot{
    background-image: url("images/Socials/Spot.png");
    border-color: green;
  }
  
  #Git{
    background-image: url("images/Socials/Git.png");
    border-color: darkgrey;
  }
  
  #Steam{
    background-image: url("images/Socials/Steam.png");
    border-color: gray;
  }
  
  #AniList{
    background-image: url("images/Socials/AniListBanner.png");
    border-color: lightblue;
  }
  
  #Mast{
    background-image: url("images/Socials/Mast.png");
    border-color: red;
  }

  /*ZF - Contact*/

    .contacter{
      display: block;
      margin: 0 auto;
    }

  /*ZF - Sitemap*/

    #SitemapTitle{
      font-family: Libre Baskerville;
      text-decoration: underline;
      margin-top: 0;
      padding-top: 1%;
    }

    #SitemapEndTitle{
      margin-bottom: 0;
      padding-bottom: 1%;
    }

    .XMLSitemapContainer{
      padding-left: 5%;
      padding-bottom: 1%;
    }
  
  /*ZF - Test*/

    .TestTitle{
      color: white;
      font-family: Libre Baskerville;
    }
    
    .TestTitle h1{
      margin-top: 0;
    }

/**/