ExampleWebsite/StyleSheets/ExampleStructure.css

/*so you can see the structure of the page when body has the tag .debug*/
.debug{
    *{
        outline: 1px black solid;
    }
}
/*removing default styling for body and buttons*/
*{
    box-sizing: border-box;
    margin:0;
    padding:0;
    border:none;
    background-color: transparent;
}
body{
    max-width: 100vw;
    overflow-x:hidden;
}
/* child elements inside a flexbox with this class will be centered*/
.Center{
    justify-content: center;
}
/* child elements inside a flexbox with this class will be separated as far apart as they can be*/
.SpaceBetween{
    justify-content: space-between !important; /*Important overrides any other styles that set justify content*/
}
.VFlexBox{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
}
.CartContainer{
    width: 100vw;
    min-height: 50vh;
    margin-top: 10vh;
}
.ExampleText{
    font-size: 4vh;
    font-family: Arial,serif;
    font-weight: normal;
    text-align: center;
}
.ExampleText2{
    font-size: 4vh;
    font-family: "Monotype",serif;
    font-weight: bold;
    text-align: center;
}
.ExampleButton:hover{
    color:white;
    background-color: black;
    transform: scale(1.1);
}
.ExampleButton{
    color:black;
    background-color: white;
    transition: 0.25s;
    cursor: pointer;
    width: 10vw;
    height: 5vh;
    align-items: center;
    justify-content: center;
    display: flex;
    text-align: center;
}
.Title{
    font-size: 5vh;
    font-family: Arial,serif;
    font-weight: bolder;
    text-align: center;
}
/* these allow elements to set their own alignment even within a flex box*/
.AlignLeft{
    justify-self: flex-start;
}
.AlignRight{
    justify-self: flex-end;
}
/*sets the position of the navigation bar to the top of the page and makes*/
.NavBarWrapper{
    position: fixed;
    top:0;
    left:0;
    max-width:100vw; /*max width so it does not get wider than the viewport*/
    width: 100vw;
    min-height: 7vh; /*min height so it can be dynamically re-sized*/
    padding: 0.5vh;
}
/* sets the alignment of an element to be horizontal, flexbox allows dynamic resizing */
.HFlexBox{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

/*Navigation classes*/
.NavBarSection{
    min-width: 30%;
    flex-wrap: nowrap;
    margin:1vh;
    padding:0;
}
.NavIcon:hover{
    transform: scale(1.1);
}
.NavIcon{
    margin:0 0.5vh;
    width: 4vh;
    height: 4vh;
    transition: 0.5s;
}
.NavButton{
    font-size: 3vh;
    height: 6vh;
    min-width: 6vh;
    font-family: Arial,serif;
    font-weight: bolder;
    text-align: center;
    margin: 0 1vh; /*this sets the horizontal margin to 1% of the viewport height but the vertical margin to nothing*/
}
/*the hamburgers container, lays them in a centred column to make sure they're even */
.Hamburger{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    margin: 0 2vh;
    width: 5vh;
    height: 5vh;
    cursor: pointer;
}
/*turns the hamburger shape into a cross when its enabled*/
.Hamburger.Active{
    .HamburgerSlab.First{
        transform: rotate(45deg) translateX(1.125vh)translateY(0.9vh);
    }
    .HamburgerSlab.Middle{
        color:transparent;
        background-color:transparent;
    }
    .HamburgerSlab.Last{
        transform: rotate(-45deg)  translateX(0.75vh)translateY(-0.75vh);
    }
}
.HamburgerNavMenu.Active{
    transform: translateX(0) translateY(0);
}
.Hamburger:hover{
    .HamburgerSlab{
        transform: scaleX(1.2);
    }
}
.HamburgerSlab{
    outline: none;
    width:5vh ;
    height: 0.75vh;
    margin-top:0.25vh;
    margin-bottom: 0.25vh;
    transition: 0.5s;
    border-radius: 0 !important;
}
/*gives each hamburger bar a separate colour*/
.Hamburger{
    /*you can reference two consecutive classes for styling
    so for example here, the hamburger slab span element has
    class="HamburgerSlab First" or class="HamburgerSlab Middle"
    and you can reference them individually
     */
    .HamburgerSlab.First{
        color:slategray;
        background-color:slategray;
    }
    .HamburgerSlab.Middle{
        color:dimgrey;
        background-color:dimgray;
    }
    .HamburgerSlab.Last{
        color:darkslategray;
        background-color:darkslategray;
    }
}

/*this is for only mobile or 4:3 and lower screen aspect ratios*/
@media only screen and (max-aspect-ratio: 12/9) {
    /* drop down menu is a window not in the hotbar */
    .HamburgerNavMenu {
        padding: 0.5vh;
        position: fixed;
        display: flex;
        top: 9vh;
        right: 0;
        transform: translateX(0) translateY(-100vh);
        transition: 0.25s;
        justify-content: flex-start;
        flex-direction: column;
        align-items: flex-start;
        align-content: flex-start;
    }
    /* ::After is a pseudo element, it allows us to put the little point arrow */
    .HamburgerNavMenu::After {
        content: '';
        position: absolute; /* if the parent element is positioned as relative, absolute defines position relative to the parent*/
        right: 15%;
        bottom: 100%;
        width: 0;
        height: 0;
        border-left: 1.2vh solid transparent;
        border-right: 1.2vh solid transparent;
        border-bottom: 1.7vh solid black;
        clear: both;
    }
}

/*this is only for desktop screen aspect ratios */
@media only screen and (min-aspect-ratio: 12/9) {
    /*positions hamburger elements on hotbar when open
    to always have a window style, move whats inside the @media only screen and (max-aspect-ratio: 12/9)
    outside of the query and delete the @media boxes*/
    .HamburgerNavMenu {
        padding: 0.5vh;
        position: relative;
        display: flex;
        transform: translateX(100vw) translateY(0);
        transition: 0.25s;
        justify-content: left;
        flex-direction: row;
        align-items: center;
        align-content: center;
    }
}