/* basic rules for whole site */
:root {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /*often you need to "reset" some stuff at the top of your stylesheet because many elements have default properties that are annoying to work around. see "bonus" */

                /* color variables (these don't have to be hex codes. you can specify a color a bunch of ways or even use a background image) */
                --textcolor: white;
                --headercolor: #6a002a77;
                --pagebg: #8b004b;
                --sectionbg: #8b004b;
                --links: #adcce0;
                --linkhover: #f37423;
                --mono: #363636;
                --monobg: #eeeeee;
            }
            /* variables make it easier to recolor the whole site, plus some really simple scripting can add a button for dark mode. or, try activating this next chunk for an automatic dark mode based on the system theme */


           [data-theme="dark"] {
                * {
                    --textcolor: #ffffff;
                    --pagebg: #26262d;
                    --sectionbg: #26262d;
                    --headercolor: #6a002a77;
                    --links: #b2b2b2;
                    --linkhover: #f37423;
                    --mono: #ccc;
                    --monobg: #3f3f3f;
                }
                p {
                    letter-spacing: 0.025em;
                    font-weight: 350;
                }
            }
            [data-theme="festive"] {
                * {
                    --textcolor: #ffffff;
                    --pagebg: #26262d;
                    --sectionbg: #26262d;
                    --headercolor: #6a002a77;
                    --links: #b2b2b2;
                    --linkhover: #f37423;
                    --mono: #ccc;
                    --monobg: #3f3f3f;
                }
                p {
                    letter-spacing: 0.025em;
                    font-weight: 350;
                }
            }
/*Simple css to style it like a toggle switch*/
.theme-switch-wrapper {
  display: flex;
  align-items: center;

  em {
    margin-left: 10px;
    font-size: 1rem;
  }
}
.theme-switch {
  display: inline-block;
  top:.5em;
  height: 34px;
  position: relative;
  width: 60px;
}

.theme-switch input {
  display:none;
}

.slider {
  background-color: #ccc;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: .4s;
}

.slider:before {
  background-color: #fff;
  bottom: 4px;
  content: "";
  height: 26px;
  left: 4px;
  position: absolute;
  transition: .4s;
  width: 26px;
}

input:checked + .slider {
  background-color: var(--headercolor);
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
            body {
                background-color: var(--pagebg);
                font-size: 18px;
                /* defining a font size here determines the size of an em (see "bonus") */
                font-family: "Inter", sans-serif;
                /* you should always add a "fallback" font category when specifying a font. this way if the font can't load the page still looks sort of how you intended */
                line-height: 1.4;
                color: var(--textcolor);
                /* "color" actually refers to specifically the text color within an element. yeah i know */
                position: relative;
                /* you normally wouldn't bother setting this but for the sections to be "absolute" their parent has to be "relative" */
                margin: 0;
                margin-top: -1em;
                /* a negative margin is also weird to do but I was getting a small strip of empty space at the top of the site and could not figure out why so i just accounted for it. it's okay to make websites this way! nobody looks at the code! */
                max-width: 45em;
                /* this sets the width of the body where all the content lives, but with paragraphs constrained to their own max width it mostly just moves the navbar around */
            }

            header {
                
                padding: .5em .2em .5em .2em;
                /* when you do padding or margin in one line like this it goes top-right-bottom-left */
                display: flex;
                flex-wrap: wrap;
                background-color: var(--headercolor);
                position: fixed;
                /*"absolute" elements don't get pushed around by other elements on the screen*/
                top: 0;
                width: 100%;
                z-index: 2;
                /* z-index makes an element render on top of other things. by default elements further down the page render in front of everything before them */
            }
            nav{
                display: flexbox;
                flex: 43;
                
                
            }
            header div#navbar-icon{
                display: flex;
                float:left;
                font-size: 1em;
                font-weight: 600;
                flex: .99;
                /*this pushes the nav links to the right. flex is a whole system i'm not gonna get into here */
                white-space: nowrap;    
            }       
            header img {
                width: 4em;
                float:middle;
                padding-top: .5em;
                
            }
            .active {
                color: var(--linkhover); /* Example text color */
                /* Add other desired styles like font-weight, border, etc. */
            }
            nav a:not(:last-of-type) {
                margin-right: 0.3em;
                /* this puts space between the nav links but not after the last one. css has some pretty in-depth logic rules like this */
            }
            
           header ul {
              flex: 1;
              list-style-type: none;
              float: right;
              margin: .5em;
              padding: .5em;
              overflow: hidden;
              background-color: var(--pagebg);
            }

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: var(--linkhover);
    color:white;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: var(--textcolor);
  background-color: var(--sectionbg);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: var(--linkhover);}

.landing-page-box {
    background-color: var(--headercolor);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    margin: 20px auto;
    max-width: 35em;
}
::marker {
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    text-indent: 0px !important;
    text-align: start !important;
    text-align-last: auto !important;
}

#active-line {
    position: absolute;
    bottom: 0;
    background-color: #f39c12;
    height: 3px;
    transition: left 0.3s ease, width 0.3s ease;
    width: 0;
}

.dropdown:hover .dropdown-content {
  display: block;
    background-color: var(--sectionbg)
}

            /* sections */
            section {
                padding: 6em 2em 3em;
                /* the reason for padding instead of margin here is because anchor links automatically scroll to the top of the target */

                /* the next six lines are really important. but maybe see what happens if you change them anyway */
                display: none;
                background: var(--sectionbg);
                position: absolute;
                top: 0;
                width: 100%;
                min-height: 110vh;
                /* "vh" and "vw" are useful units that equal one percent of the "viewport" width or height. so 100vh is 100% as tall as the screen */
                text-align: center;
            }

            section:target {
                display: block;
                /* :target is what makes the pages render one at a time. "block" is the default display mode */
            }

            section#home {
                display: block;
                /* this makes the homepage appear by default. generally, the most specific rule (like a style applied to one ID) overrides any more general rules (like one applied to a whole type of element) */
            }

            /*
            body:not(body:has(section:target)) section#home{
            display: block;
            }
            */

            /* this is a complicated conditional rule that makes the homepage display by default but go away when anything else is selected. turn this on and delete that last rule if you're having an issue with the homepage peeking out under your other pages, but be aware it may not work in all browsers. thanks to william davies for sending this in! */

            /* footer */
            section:after {
                position: bottom;
                color: var(--links);
                font-size: 85%;
                padding: 0.25em 0;
                border-top: 1px solid var(--linkhover);
            }
            /* :after is kind of an advanced technique and is a bizarre way to handle a footer, but given that each section is a different height and they need to be positioned absolutely this is the best way i could think of */

            section p:last-child {
                margin-bottom: 3em;
            }

            /* text styles */
            p {
                /* "p" is for paragraphs */
                font-size: 1em;
                max-width: 55ch;
                /*this limits the line length of paragraphs to 55 characters long. i actually just learned this is possible while making this template */
                margin-bottom: 1em;
            }

            a {
                /* "a" is for links which is wack imo */
                text-decoration: underline;
                text-decoration-color: transparent;
                transition: 0.2s;
                color: var(--links);
            }

            a:hover {
                text-decoration-color: var(--linkhover);
                color: var(--linkhover);
                transition: 0.2s;
                /* here i'm using "transition," an easy way to animate things, along with making the default underline color transparent because you can't animate whether an underline is there but you can animate what color it is. ":hover" makes something look different when you hover on it, which you probably guessed */
            }

            p a {
                text-decoration-color: var(--links);
            }
            /* "p [space] a" applies to all links (a) inside paragraphs (p). this trick works with any pair of elements */

            a.inert:hover {
                text-decoration-color: transparent;
            }
            /* this "inert" class for links is just for the slashes in the nav menu. which could have been p's but i'd have to make those part of the flex container and i am lazy */

            h2 {
                font-size: 2em;
                font-weight: 700;
                margin-bottom: 0.5em;
                letter-spacing: -0.03em;
                /* css will let you get very particular with your typography. which is not necessary at all but i appreciate, as a dork */
            }

            h3 {
                font-size: 1.3em;
                margin-top: 1.5em;
                margin-bottom: 0.5em;
                letter-spacing: -0.02 em;
            }
            /* there are 5 or 6 different h's (headings) and they can all be styled differently. it's a good idea to use them in descending order of importance */

            span.mono {
                font-family: monospace;
                font-size: 0.9em;
                color: var(--mono);
                white-space: nowrap;
                background-color: var(--monobg);
                padding: 1px;
                border-radius: 4px;
            }
            /* a "span" lets you sort of highlight some text and make it look different without breaking the flow of text. the period tells the computer what class of span to apply this rule to */

            div.inline {
                width:  90%;
                max-width: 90vw;
                margin-bottom: 2em;
                margin-top: 2em;
                
            }
            /* this gives embedded stuff about the same width + spacing as paragraphs when it's inside a div with the "inline" class. a div is just an all-purpose box for building and organizing with. you can go right to the class-specifying period without an element type and it'll just style any type of thing with that class */

            .inline p {
                font-size: 0.8em;
                color: var(--links);
                font-style: italic;
                text-align: center;
            }
            /* this makes text inside an "inline" div read as a caption */

            img {
                width: 100%;
                height: auto;
            }
            /* images like to kind of go wild if you don't tell them what size to be. the default is 1:1 pixel size i think? which is almost always too big */



            /* phone styling */
            @media only screen and (max-width: 680px) {
                body {
                    font-size: 16px;
                    line-height: 1.6;
                }
                header {
                    padding: 1em 1em 1em 1em;
                    position: fixed;
                    background-color: var(--headercolor);
                    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.61);
                }
                header ul {
                    float:left;
                }
                header img {
                    display: none;
                }
                section {
                    padding: 6em 1em 1em 1em;
                }
                nav {
                    white-space: nowrap;
                }
                nav a:not(:last-of-type) {
                    margin-right: 0em;
                }
            }

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color:var(--headercolor);
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
}
.footer-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
}