/* 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." */





/* body style stuff */
body {
  
}

  /* HOMEPAGE BACKGROUND IMAGE */
  .bg-image-homepage {
    width: 100vw;
    margin: calc(-50vw + 50%); /* why the hell does this work to move the background image to the full borders of view? LMAO */
    border: 2px solid black; /* also the above only works when it has a border??? */
    background-image: url('IMAGES/BACKGROUNDS/pink background.jpg'); /* background image set to repeat */
  }
  
  /* Style the weclomecontentdivider */
  /* I want there to be a little divider, then "WELCOME!" sticker of some kind, then the divider again! */
  .welcome-content-divider {
    background-image: url('IMAGES/GRAPHICS/WELCOME TO HOMEPAGE BEARS.gif');
    background-repeat: space;
    max-width: 1300px;
    height: 37px;
    margin: 0 auto;
    
    background-position: center;
    /* other customizations */
    display: flex;
  }
  
  /* ABOUT ME BACKGROUND IMAGE & SET UP */
  .bg-image-about-me {
    width: 100vw;
    margin: calc(-50vw + 50%); /* why the hell does this work to move the background image to the full borders of view? LMAO */
     border: 2px solid black;
    background-image: url('IMAGES/BACKGROUNDS/diagonal stripes and flowers background.gif'); /* background image set to repeat */
  }
  
  .about-me-content-divider {
    background-image: url('IMAGES/DIVIDERS/angel hello kitty divider.gif');
    background-repeat: repeat-x;
    max-width: 1285px;
    height: 40px;
    margin: 0 auto;
    
    background-position: center;
    /* other customizations */
  }
  
  /* FAVOURITES BOX BACKGROUND IMAGE */
  .bg-image-favourites-box {
    width: 100vw;
    margin: calc(-50vw + 50%);
    background-image: url('IMAGES/BACKGROUNDS/pink clouds background.gif'); 
  }
  
  /* MY DIARY BACKGROUND IMAGE */
  .bg-image-my-diary {
    width: 100vw;
    margin: calc(-50vw + 50%); 
    background-image: url('IMAGES/BACKGROUNDS/pink clouds background.gif');
  }
  
  /* ARTS & CRAFTS BACKGROUND IMAGE */
  .bg-image-arts-crafts {
    width: 100vw;
    margin: calc(-50vw + 50%);
    background-image: url('IMAGES/BACKGROUNDS/quilt background.png');
  }
  
  /* THE LIBRARY BACKGROUND IMAGE */
  .bg-image-the-library {
    width: 100vw;
    margin: calc(-50vw + 50%);
    background-image: url('IMAGES/BACKGROUNDS/pink clouds background.gif');
  }
  
  /* GUESTBOOK BACKGROUND IMAGE */
  .bg-image-guestbook {
    width: 100vw;
    margin: calc(-50vw + 50%); 
    background-image: url('IMAGES/BACKGROUNDS/pink clouds background.gif'); 
  }
  
  /* Style the backdrop */
  .backdrop {
    max-width: 1350px;
    height: 1350px;
    margin: 20px auto 10px;
    
    border-radius: 25px;
    border: 2px solid #fcd9e7;
    
    /* customization stuff */
    background-color: #fce3ed;
  }  
  
  /* for the 'web border" */
  .web-border {
    border: 2px dashed pink;
    border-radius: 25px;
    max-width: 1310px;
    height: 1310px;
    margin: 20px auto;
    
  } 

  /* Style the Website Banner */
  .web-banner {
    border-radius: 25px 25px 0px 0px;
    max-width: 1310px; /* I think this is supposed to make window resizing better but I'm taking it out for now? */
    height: 120px;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    
    /* to put the bar and words in the center, as well as adjust font size. NOTE: margin: auto : centers the container to the middle of the screen based on width*/
    margin: 0px auto 10px; /* margin: top right bottom left */
    justify-content: center; /* aligns text inside horizontally to the center */
    align-items: center; /* aligns text inside vertically to the center */
    
    /* other customization things */
    background-image: url('IMAGES/BACKGROUNDS/pink with flowers background.gif');
    background-color: pink;
    font-size: 35px;
    font-family: "Lucida Handwriting", cursive;
  }
  


/* style the horizontal sticky topnavbar */

  /* for the navbar itself: adding background colour and disallowing overflow to keep everything inside the topnavbar */
  .top-navbar {
    
    max-width: 1300px; /* max-width changes the max width, which I think helps when resizing the window as well?*/
    height: 70px;
    
    display: flex;
    flex-wrap: wrap;
    overflow: hidden; /* honestly unsure what this does I think maybe stops things like text from overflowing out the sides??idk */
    
    /* to make the navbar "sticky" use position: sticky and identify where the "sticky"-ness begins*/
    position: sticky;
    top: 0;
    
    /* to put all of the buttons/links towards the center of the navbar, and to locate the navbar to the center of the screen. */
    /* margin: top right bottom left; margin: auto : centers the container to the middle of the screen based on width */
    margin: 10px auto;
    justify-content: center;
    
    /* colour and other customizations */
    
  }
  
  /* styling the links inside of the topnavbar. Just currently has the numbers and values that were in the W3S tutorial lol, will change these later */
  .top-navbar a {
    /* adding a lace border to each element */
    border-radius: 15px;
    border: 10px groove transparent;
    border-left-width: 3px;
    border-right-width: 3px;
    border-image: url('IMAGES/DIVIDERS/floral lace border transparent.png') 72 repeat;

    /* background image stuff */
    /*background-image: url('IMAGES/BACKGROUNDS/pink and purple soot sprites background.gif'); */
    background: pink;
    background-repeat: repeat-x;
    background-clip: padding-box;
    
    display: flex;
    flex-wrap: wrap;
    
    margin: auto;
    padding: 12px;
    text-align: center; /* pretty sure this aligns the text inside each of the "buttons"/links.*/
    
    /* other customization stuff */
    color: #FFF2A1;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    text-shadow: 0px 0px 2px purple;

  }
  
    
    /* changing colour of the links on hover. Pretty sure colour is the text colour change on hover? */
  .top-navbar a:hover {
    /* background-image: url('IMAGES/BACKGROUNDS/pastel rainbow stripes stars background.gif'); */
    background: lightpink;
    background-clip: padding-box;
    color: purple;
    font-weight: bold;
    text-shadow: none;
  }
    
    /* changing colour of the current/actively tabbed link/page. Pretty sure "color" is the text colour when the tab is active? */
    .top-navbar a:focus {
      background: lightyellow; /* url('IMAGES/BACKGROUNDS/pastel rainbow stripes stars background.gif'); */
      background-clip: padding-box;
      color: purple;
      text-shadow: none;
  }
  
    .current-tab {
    background: lightyellow;
    }
    
  

  /* MAIN CONTENT CONTAINERS */
  .main-content {
    display: flex;
    text-align: center;
    margin: 20px auto;
    align-items: center;
    /* max-width changes the max width, which I think helps when resizing the window as well?*/
    max-width: 1290px;
    height: 100vh;
    border-style: dashed;
    border-width: 2px;
    border-color: red;
  }
  
  /* style the footer */
  .footer {
    display: flex;
    border-radius: 0 0 25px 25px;
    margin: 10px auto;
    max-width: 1310px;
    align-items: center;
    justify-content: center;
    
    /* other customization stuff */
    background-image: url('IMAGES/BACKGROUNDS/pink with flowers background.gif');
    background-repeat: repeat-x;
    color: purple;
    
  }
  


/* HOMEPAGE-SPECIFTIC STYLING */

  /* style the leftcontainer */
  .left-container {
    display: flex column;
    border-color: black;
    border-width: 1px;
    border-style: dashed;
    width: 20%;
    height: 100%;
    margin-right: 20px;
      
  }

    /* Starting to style and organize the flex boxes inside of the lefthand column*/
    /*updates section. going to use an external updates thing for this so may not need all of this! */
    .updates-container {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-radius: 20px;
      max-width: 100%;
      height: 30%;
      margin-bottom: 5px;
      align-items: center;
      
      
      /* other customizations */
      background: pink;
    }
    .updates-header {
      display: flex;
      width: 100%;
      max-width: 100%;
      height: 15%;
      align-items: center;
      justify-content: center;
      
      /* other customizations */
      background: lightpink;
    }
    .updates-content {
      display: flex;
      flex-direction: column;
      max-width: 100%;
      height: 85%;
      align-items: center;
      
      /* other customizations */
    }
    
    /* cliques section */
    .cliques-container {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-radius: 20px;
      max-width: 100%;
      height: 30%;
      margin-bottom: 5px;
      align-items: center;
      
      
      /* other customizations */
      background: lavender;
    }
    .cliques-header {
      display: flex;
      width: 100%;
      max-width: 100%;
      height: 15%;
      align-items: center;
      justify-content: center;
      
      /* other customizations */
      background: purple;
    }
    .cliques-content {
      display: flex;
      flex-direction: column;
      max-width: 100%;
      height: 85%;
      justify-content: center;
      
      
      /* other customizations */
    }
    
    /* Webrings section */
    .web-rings-container {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-radius: 20px;
      max-width: 100%;
      height: 30%;
      margin-bottom: 5px;
      align-items: center;
      
      
      /* other customizations */
      background: lightyellow;
    }
    .web-rings-header {
      display: flex;
      width: 100%;
      max-width: 100%;
      height: 15%;
      align-items: center;
      justify-content: center;
      
      /* other customizations */
      background: yellow;
    }
    .web-rings-content {
      display: flex;
      width: 100%;
      max-width: 100%;
      height: 85%;
      align-items: center;
      justify-content: center;
      
      /* other customizations */
    }

  /* style the centercontainer*/
  .center-container {
    border-color: black;
    border-width: 1px;
    border-style: dashed;
    width: 60%;
    height: 100%;
      
  }
  
  

  /* Style the rightcontainer */
  .right-container {
    display: flex;
    flex-direction: column;
    border-color: black;
    border-width: 1px;
    border-style: dashed;
    width: 20%;
    height: 100%;
    margin-left: 20px;
    
      
  }
  
    /* Starting to style and organize the flex boxes inside of the RIGHThand column*/
    /* extras box */
    .extras-container {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-radius: 20px;
      max-width: 100%;
      height: 30%;
      align-items: center;
      margin-bottom: 5px;
      
      
      /* other customizations */
      background: pink;
    }
    
    .extras-header {
      display: flex;
      width: 100%;
      max-width: 100%;
      height: 15%;
      align-items: center;
      justify-content: center;
      
      /* other customizations */
      background: lightpink;
    }
    
    .extras-content {
      display: flex;
      flex-direction: column;
      max-width: 100%;
      height: 85%;
      align-items: center;
      
      /* other customizations */
    }
    
    /* chat box */
    .chat-box-container {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-radius: 20px;
      max-width: 100%;
      height: 40%;
      margin-bottom: 5px;
      
      
      /* other customizations */
      background: lavender;
    }
    
    .chat-box-header {
      display: flex;
      max-width: 100%;
      height: 10%;
      align-items: center;
      justify-content: center;
      
      /* other customizations */
      background: purple;
    }
    
    .chat-box-content {
      display: flex;
      flex-direction: column;
      max-width: 100%;
      height: 85%;
      justify-content: center;
      
      
      /* other customizations */
      
      
    }
    
    /* neighbours! */
    .neighbours-container {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-radius: 20px;
      max-width: 100%;
      height: 30%;
      align-items: center;
      
      /* other customizations */
      background: lightyellow;
    }
    .neighbours-header {
      display: flex;
      width: 100%;
      max-width: 100%;
      height: 15%;
      align-items: center;
      justify-content: center;
      
      /* other customizations */
      background: yellow;
    }
    .neighbours-content {
      display: flex;
      width: 100%;
      max-width: 100%;
      height: 85%;
      align-items: center;
      justify-content: center;
      
      /* other customizations */
      
    }
  
  
  /* ABOUT ME SPECIFIC STYLING */

  
    .am-right-box {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin: 0;
    align-items: center;
    /* max-width changes the max width, which I think helps when resizing the window as well?*/
    width: 80%;
    height: 100%;
    border-style: dashed;
    border-width: 2px;
    border-color: red;
  }
  
  .am-sidebar {
    display: flex ;
    flex-direction: column;
    width: 20%;
    height: 100%;
    border-style: dashed;
    border-width: 2px;
    border-color: cyan;
  }
  
  .am-top-container {
    display: flex;
    width: 100%;
    height: 50%;
    margin: 0;
    border-style: dashed;
    border-width: 2px;
    border-color: blue;
  }
  
  /* styling things within the about-me top container */
  
  
  .am-bot-container {
    display: flex;
    width: 100%;
    height: 50%;
    margin: 0;
    border-style: dashed;
    border-width: 2px;
    border-color: lightgreen;
  }


/* NOT FOUND PAGES */

  .not-found-bg {
    height: 100vh;
    width: 100vw;
    margin: calc(-50vw + 50%);
    background-image: url('IMAGES/BACKGROUNDS/abstract pastel shapes background.jpg');
    background-repeat: repeat;
  }
  
  .not-found {
    height: 100%;
    color: purple;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .not-found a {
    color: purple;
    font-size: 15;
  }
  
  .not-found a:hover {
    color: lightblue;
  }