/*this layout has a ton of gradients, so messing with the colors is not super straightforward. sorry!

for a gradient, the first color is the one on top and the second color is the one on the bottom.*/


* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: Verdana, sans-serif;
    background-image: url("IMAGES/carpet1.png");
    background-color:darkblue;
    background-attachment: fixed;
}

/* this is the highlight color for when you select text! you can change that with css. pretty cool huh? */
::selection {
    background-color: #33ff00;
}

/* this is the page title up top. the background is a gradient, and the text is transparent; "background-clip:text" cuts out the whole background except for the shape of the text. neat trick for making text shiny!
background-clip works for images too if you want text to have polka dots or something. */
h1 {
    background: linear-gradient(#ffffff 50%, #bababa);
    color: transparent;
    background-clip: text;
    font-family: 'Audiowide', Impact;
    font-size: 40pt;
    font-style: italic;
    text-transform: uppercase;
    margin: 0;
    margin-bottom: -10px;
}

/* end of page title */

h2 {
    margin: 0;
    font-family: 'Impact';
    font-weight: 400;
    font-size: 24pt;
    text-align: center;
}

a {
    font-weight: bold;
    text-decoration: double underline;
}

p {
    margin: 5px;
}

/* the whole page is contained in this container. */
.container {
    width: 80%;
    height: auto;
    max-width: 1200px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
}

/* this is a container for the title. you could use this to put a color or a banner image behind the page title. */
#headerbar {
    width: 100%;
}

/* this is the orange navigation links bar.*/
.nav {
    width: 100%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;

    border-top-left-radius: 100px; /* this is what gives it that curve on the left. delete it if you want it to be square. */

    background-image: linear-gradient(#91ff00, #50b900);
    box-shadow: 0px 0px 2px #4d9a00;
}

/* this styles links in the navigation bar. */
.nav a {
    display: inline-block;
    font-size: 15px;
    padding: 10px 20px;
    text-transform: uppercase;
    text-decoration: none; /* this makes the links not be underlined. */

    background-image: linear-gradient(#91ff00, #50b900);
    color: #fff6d3;
    text-shadow: 0px 2px 1px #4d9a00;box-shadow: 0px 0px 2px #4d9a00;
}

/* when a link is hovered over, swap the gradient from light -> dark to dark -> light so it looks indented! */
.nav a:hover, .nav a:focus {
    background-image: linear-gradient(#50b900, #91ff00);
    text-shadow: none;
}


/* this is the container for the bar underneath the navigation links. it has the marquee in it. */
.undernav {
    box-shadow: 0px 2px 5px #696969;
    position: relative; /* this is so that the shadow is cast on the divs under it. */
    display: flex;
    width: 100%;
    height: 34px;
}

/* this is the weird bit of space next to the marquee. the gradient bg matches the border of the marquee so it looks like it's one continuous div! */
#marqueehead {
    width: 60%;
    color: black;
    font-size: 16pt;
    font-style: italic;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    overflow: hidden;

    font-family: 'Caveat Brush', sans-serif;
    background: linear-gradient(#ffffff 50%, #bababa);
    
}

/* all marquees will look like this. */
marquee {
    width: 40%;
    padding: 2px;

    /* these border properties make the border a shiny gradient! 
    just so you know, you can't use border-radius with a border-image, so no rounded corners. */
    border: 6px solid;
    border-image: linear-gradient(#ffffff 50%, #bababa);
    border-image-slice: 5;
    
    /* inset box shadow gives it that layered look. */
    box-shadow: inset rgba(0, 0, 0, 1) 0px 0px 5px; 
    
    background-color: #ffffff;
    font-family: 'Geo', monospace;
    text-transform: uppercase;
    
}

/* some styling that applies to multiple divs. */


.leftcolumn img,
.rightcolumn img,
.bodymain img {
    max-width: 100%;
} /* this prevents images from being bigger than the div they're in */


.rightcolumn,
.leftcolumnbox,
.innerbox {
    overflow: auto;
    scrollbar-width: thin;
}

.bodymain,
.leftcolumn {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
} /* rounding just the bottom corners so the top lines up nicely. */

/* end of styling for multiple dive */


/* first sidebar! */
.leftcolumn {
    width: 20%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
    background: linear-gradient(#f3ebd1, #e0d6b6);
    padding: 5px;
    gap: 10px;
    font-size: 10pt;
    line-height: 1;
}

.leftcolumn h2 {
    align-self: flex-start;
    text-shadow: #ffffff 2px 2px 1px;
    margin-bottom: -7px;
    font-size: 14pt;
}

.leftcolumnbox ul {
    padding-left: 20px;
}

/* boxes for putting things in in the sidebar. another inset shadow! */
.leftcolumnbox {
    border: #d9bb5a 1px solid;
    width: 100%;
    padding: 5px;
    border-radius: 5px;
    background-color: #f3ebd1;
    box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.5);
}

/* socmed icon holder */
.socials {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

/* makes all the icons small and the same size. they're actually very big */
.socials img {
    width: 40px;
}

/* end of left sidebar! */


/* main section of the page */
.bodymain {
    border: 1px solid #491A09;
    background: linear-gradient(#b3ff00, #87ca00);
    padding: 10px;
    width: 60%;
    font-size: 10pt;
}

/* this puts a smaller white box on top of the red gradient so the text is more legible. this off-white is on the warm side, so you'll probably want a cooler shade if you change to a cool-colored gradient! */
.innermain {
    background-color: antiquewhite;
    width: 100%;    
    border-radius: 5px;
    height: 100%;
    padding: 5px;
}

/* end of main section */

/* right sidebar! */
.rightcolumn {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 5px;
    gap: 10px;
}

.rightbox {
    background: linear-gradient(#E2ED1D, #B2ED1C);
    border-radius: 10px;
    width: 100%;
    padding: 10px;
    max-height: 500px;
}

/* like the main div, the boxes in the right column have this inner layer for putting the text in so it's a bit more legible.
this one's a little transparent and will blur the background it's over. this'll only be noticeable if you put a picture as the background of rightbox instead of a gradient. */
.innerbox {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background-color: rgba(255, 245, 216, 0.81);
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.125);
    padding: 5px;
    height: 100%;
    scrollbar-color: #B2ED1C #E2ED1D;
    font-size: 13px;
}

/* end of right sidebar and end of the layout!! */

/* smaller screen styling */

@media only screen and (max-width: 1301px) {
    .container {
        width: 95%;
    }
}

@media only screen and (max-width: 750px) {

    #headerbar {
        order: 1;
    }

    .nav {
        order: 2;
    }

    .undernav {
        order: 3;
    }

    .bodymain {
        order: 4;
    }

    .rightcolumn {
        order: 5;
    }

    .leftcolumn {
        order: 6;
    }

    .rightbox {
        width: 200px;
        max-height: 200px;
    }

    .rightcolumn,
    .leftcolumn {
        flex-direction: row;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .bodymain {
        width: 100%;
    }
}

.buttons-n-blinkers {
  overflow: hidden;
  width: fit-content; /* just for demonstration */
  position: relative;
  width: 300px;
}

@keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  
  100% {
    transform: translateX(-100%);
  }
}

.buttons-n-blinkers {
  overflow: hidden;
  width: fit-content; /* just for demonstration */
  position: relative;
  width: 688px;
}

@keyframes marquee {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

.buttons-n-blinkers > div {
  animation: marquee 12s linear infinite;
  animation-play-state: paused;
  animation-delay: -6s; /* This MUST be -duration/2 */
  width: 100%;
  min-width: max-content;
  text-wrap: nowrap;
}

.buttons-n-blinkers > div.follower {
  position: absolute;
  top: 0;
  animation-delay: 0s;
}

.buttons-n-blinkers > div.play {
  animation-play-state: running;
}

.buttons-n-blinkers:hover > div.play {
  animation-play-state: paused;
}