/* A good general CSS reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Custom global styles */
body {
  background-color: #99ccff;
  color: #333;
  min-width: 100vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header {

  padding: 0.6rem;
  text-align: right;
  font-size: 1.5rem;
  background-color: #000;
  border-bottom: 2px solid #fff;

    h1 {
        font-family: "Electrolize", Helvetica, Arial, sans-serif;
        font-weight: 700;
        font-style: normal;
        padding: 1rem;
        text-align: right;
        font-size: 3rem;
        color: #fff;
        text-transform: uppercase;
    }
}

main {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    height: calc(100vh - 150px); /* Adjust based on header height */

    @media screen and (min-width: 768px) {
        height: calc(100vh - 105px);
    }

    nav {
        background-color: #99ccff;
        width: 100%;
        padding: 1rem 0;
        position: fixed;
        bottom: 0;
        border-top: 1px solid #000;

        @media screen and (min-width: 768px) {
            position: relative;
            flex-direction: column;
            width: 100px;
            border-top: 0;
        } 

        ul {
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;

            @media screen and (min-width: 768px) {
                flex-direction: column;
                align-items: center;
                justify-content: start;
                height: 100%;
            } 

            li {

                a {
                    width: 48px;
                    height: 24px;
                    border: 1px solid #000;
                    margin: 0;
                    display: block;
                    text-indent: -9999px; /* Hide text */
                    overflow: hidden;

                    @media screen and (min-width: 768px) {
                        margin: 0 0 1rem 0;
                    }

                    &.home {
                        background-color: #000066;
                    }

                    &.about {
                        background-color: #660066;
                    }

                    &.portfolio {
                        background-color: #006600;
                    }

                    &.contact {
                        background-color: #666600;
                    }

                    &:hover {
                        filter: brightness(1.8)
                    }
                }
            }
        }

        
    }

    article {
        background-color: #6699cc;
        padding: 1rem;
        font-family: "Electrolize", Helvetica, Arial, sans-serif;
        font-weight: 400;
        font-style: normal;
        width: 100%;
        color: #fff;

        @media screen and (min-width: 768px) {
            width: 701px;
            border-left: 1px solid #000;
            border-right: 1px solid #000;
        }

        h2 {
            font-size: 2.5rem;
            margin-bottom: 1rem;

        }

        p {
            font-size: 1.2rem;
            line-height: 1.6;
            text-align: justify;

            @media screen and (min-width: 768px) {
                text-align: left;
            }
        }
    }
}