/* user styles */

/* styles are what change the color and sizes of stuff on your site. */

/* these are variables that are being used in the code
these tended to confuse some people, so I only kept 
the images as variables */

:root {
    --header-image: url('https://sadhost.neocities.org/images/layouts/wp.jpeg');
    --body-bg-image: url('https://sadhost.neocities.org/images/tiles/purplesky.gif');

    /* colors */
    --content: #181425EB;
    --module: #193c3eEB;
    --bordergreen: #63c74d;
}

/* if you have the URL of a font, you can set it below */
/* feel free to delete this if it's not your vibe */

/* this seems like a lot for just one font and I would have to agree 
but I wanted to include an example of how to include a custom font.
If you download a font file you can upload it onto your Neocities
and then link it! Many fonts have separate files for each style
(bold, italic, etc. T_T) which is why there are so many!

*/

@import url('https://googleapis.com');

body {
    font-family: 'Nunito', sans-serif;
    /*font-family: 'Courier New', monospace;*/
    /*font-family: 'noto sans', sans-serif;*/
    color: #ffffff;
    
    background-color: #181425;
    background: url('Media/Panning_Backgrounds/Sky22_1.png'), url('Media/Panning_Backgrounds/Sky22_2.png'), url('Media/Panning_Backgrounds/Sky22_3.png');
    background-repeat: repeat-x;
    background-size: auto;
    animation: multiSpeedPan 120s linear infinite;
}
* {
    box-sizing: border-box;
}

@keyframes multiSpeedPan {
from {
    /* All layers start at position 0 */
    background-position: 0 0, 0 0, 0 0;
}
to {
    /* Layer 1 (Fastest), Layer 2 (Medium), Layer 3 (Slowest) */
    background-position: -4608px 0, -2292px 0, 0 0;
}
}

#statuscafe {
    padding: .5em;
}
#statuscafe-username {
    margin-bottom: .5em;
    color: #63c74d;
}
#stauscafe-username a{ color: #63c74d;}
#stauscafe-username a:visited{ color: #63c74d;}

#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}
          
/* this is a CSS comment
to uncomment a line of CSS, remove the * and the /
before and after the text */


/* the "container" is what wraps your entire website */
/* if you want something (like the header) to be Wider than
the other elements, you will need to move that div outside
of the container */
#container {
    max-width: 1000px;
    /* this is the width of your layout! */
    /* if you change the above value, scroll to the bottom
and change the media query according to the comment! */
    margin: 0 auto;
    /* this centers the entire page */
}

/* the area below is for all links on your page
EXCEPT for the navigation */
/*#container a {
    color: #63c74d;
    font-weight: bold;
    text-decoration:none;
    transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}

#container a:hover {
    color: #181425;
    box-shadow: inset 120px 0 0 0 #63c74d;
    text-decoration: none;
}*/

#header {
    width: 100%;
    /*background-color: #5e4e8c;*/
    /* header color here! */
    height: 150px;
    /* this is only for a background image! */
    /* if you want to put images IN the header, 
you can add them directly to the <div id="header"></div> element! */
    /*background-image: var(--header-image);*/
    background-size: 100%;
}

/* navigation section!! */
#navbar {
    font-family: 'noto sans', sans-serif;
    /*background-color: var(--module);*/
    /* navbar color */
    width: 100%;
    border-bottom: 2px dashed var(--bordergreen);
    border-top: 2px dashed var(--bordergreen);
}

#navbar ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style-type: none;
    justify-content: space-evenly;
}

#navbar li {
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
}

/* navigation links*/
#navbar li a {
    color: #63c74d;
    box-shadow: inset 0 0 0 0 #63c74d;
    /* navbar text color */
    font-weight: 800;
    text-decoration: none;
    transition: color .5s ease-in, box-shadow .5s ease-in;

    padding: 0 .25rem;
}

/* navigation link when a link is hovered over */
#navbar li a:hover {
    color: #181425;
    box-shadow: inset 100em 0 0 0 #63c74d;
    text-decoration: none;
}

#navbarborder {
    width: 95%;
    margin: 0 auto; 
    border-bottom: 2px dashed var(--bordergreen);
}

#titleborder {
    width: 100%;
    margin: 8px auto; 
    border-bottom: 2px dashed var(--bordergreen);
}

#miniborder_blue {
    width: 50%;
    margin: 0 auto; 
    border-bottom: 2px dashed #0099db;
}

#maincontent {
  padding: 0px 16px 16px 16px;
  box-sizing: content-box;
}

#flex {
    display: flex;
}

/* this colors BOTH sidebars
if you want to style them separately,
create styles for #leftSidebar and #rightSidebar */
aside {
    /*background-color: #241445;*/
    width: 200px;
    /*padding: 20px;*/
    font-family: 'Nunito', sans-serif;
    font-size: smaller;
    /* this makes the sidebar text slightly smaller */
}


/* this is the color of the main content area,
between the sidebars! */
main {
    background-color: var(--content);
    font-family: 'Nunito', sans-serif;
    flex: 1;
    /*padding: 20px;*/
    order: 2;
    border: 2px solid var(--bordergreen);
    box-shadow: 8px 8px #181425CC;
}

/* what's this "order" stuff about??
allow me to explain!
if you're using both sidebars, the "order" value
tells the CSS the order in which to display them.
left sidebar is 1, content is 2, and right sidebar is 3! */

*/ #leftSidebar {
    order: 1;
}

#rightSidebar {
    order: 3;
}

footer {
    background-color: var(--module);
    /* background color for footer */
    width: 100%;
    height: 40px;
    padding: 10px;
    text-align: center;
    /* this centers the footer text */
    border: 2px solid var(--bordergreen);
    box-shadow: 8px 8px #181425CC;
}


h1 {
  font-family: 'noto sans', sans-serif;
  color: #63c74d;
  font-size: 2.5em;
  margin: 0;
  text-transform: uppercase;
  text-shadow: 2px 2px 0px #124e89;
  /*letter-spacing: -2px;*/
}

h2 {
  font-family: 'noto sans', sans-serif;
  color: #63c74d;
  font-size: 1.5em;
  margin: 0;
  text-transform: uppercase;
  text-shadow: 2px 2px 0px #124e89;
  /*letter-spacing: -2px;*/
}

strong {
    /* this styles bold text */
    font-family: 'noto sans', sans-serif;
    color: #63c74d;
}

strong2 {
    /* this styles bold text in white */
    font-family: 'noto sans', sans-serif;
    font-weight: bold;
    color: #ffffff;
}

/* //////////////////////////////////////// */
/* THIS IS THE SETUP FOR THE DROPDOWN MENU */
.collapsible-menu {
  overflow: hidden;
}

/* Header style / Clickable trigger */
.collapsible-menu summary {
  margin-bottom: 8px;
  font-weight: bold;
  cursor: pointer;
  list-style: none; /* Removes default arrow in some browsers */
  display: flex;
  border-bottom: 2px dashed var(--bordergreen);
}

/* Custom indicator arrow */
.collapsible-menu summary::before {
  color: #63c74d;
  font-weight: bold;
  content: '▶';
  transition: transform 0.2s ease;
  margin-right: 8px;
}

/* Rotate arrow when open */
.collapsible-menu[open] summary::before {
  transform: rotate(90deg);
  margin-right: 8px;
}

.link-list {
  list-style: none;
  margin-top: 4px;
  margin-left: 4px;
  margin-bottom: 0px;
  padding: 0;
  font-family: 'noto sans', sans-serif;
  font-weight: 800;
}

.link-list a {
  /* debug enable: border: 1px dotted #ff5733;*/
  display: block;
  padding: 8px 16px;
  color: #63c74d;
  font-weight: bold;
  text-decoration:none;
  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}

.link-list a:hover {
  color: #181425;
  box-shadow: inset 168px 0 0 0 #63c74d;
  text-decoration: none;
  /*background-color: #e0e0eb;*/
}

.link-list a::before {
  font-weight: bold;
  content: '> ';
}

/* //////////////////////////////////////// */


/* this is just a cool box, it's the darker colored one */
.box {
    /*background-color: #13092D;*/
    /*border: 1px solid #ED64F5;*/
}

.responsive-iframe-container {
  position: relative;
  overflow: hidden;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  max-width: 100%;
}

.responsive-iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.win95-btn {
  background-color: #c0c0c0;
  color: #000000;
  font-family: "MS Sans Serif", Geneva, sans-serif;
  font-size: 14px;
  font-weight: bold;
  padding: 6px 12px;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #808080;
  border-bottom: 2px solid #808080;
  cursor: pointer;
}
.win95-btn:active {
  border-top: 2px solid #808080;
  border-left: 2px solid #808080;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  padding: 7px 11px 5px 13px; /* Shifts text down/right slightly when pressed */
}
.win95-text {
  font-family: "MS Sans Serif", Geneva, sans-serif;
  background: #000;
  color: #00ff00; /* Retro green screen text */
  padding: 5px;
  display: inline-block;
  border: 2px inset #fff;
}

/* CSS for extras */

#topBar {
    width: 100%;
    height: 30px;
    padding: 10px;
    font-size: smaller;
    background-color: #13092D;
}

.profile-pic-container {
    z-index: 100;
    position: relative;
}

.profile-container {
    background: var(--module);
    border: 2px solid var(--bordergreen);
    box-shadow: 8px 8px #181425CC;
}

.sidebar-container {
    background: var(--module);
    padding-left: 8px;
    padding-right: 8px;
    border: 2px solid var(--bordergreen);
    box-shadow: 8px 8px #181425CC;
}

.profile-pic {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    display: block;
    /*filter: brightness(1.2) contrast(1.1);*/
    /* THE MAGIC FILTER: Turns ANY photo into a green phosphor image */
  /*filter: grayscale(100%) sepia(100%) hue-rotate(70deg) saturate(500%) contrast(1.5);*/
}     

.profile-pic-text {
  position:fixed;
  color: #63c74d;
  text-transform: uppercase;
  font-family: 'noto sans', sans-serif;
  font-size: 1.5em;
  text-shadow: 1px 1px 0px #124e89;
  /*letter-spacing: -2px;*/
  margin-left: 114px;
  margin-top: 170px;
}

/* BELOW THIS POINT IS MEDIA QUERY */

/* so you wanna change the width of your page? 
by default, the container width is 900px.    in order to keep things responsive, take your new height,    and then subtrack it by 100. use this new number as the "max-width" value below    */

@media only screen and (max-width: 900px) {
    #flex {
        flex-wrap: wrap;
    }

    aside {
        width: 100%;
    }

    /* the order of the items is adjusted here for responsiveness! */
    main {
        order: 1;
    }

    #leftSidebar {
        order: 2;
    }

    #rightSidebar {
        order: 3;
    }

    #navbar ul {
        flex-wrap: wrap;
    }
    
    .profile-container {
        display: none;
    }
}