@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&family=Special+Gothic+Expanded+One&display=swap');

body
{
    margin: 0;
    font-family: Roboto, Arial, Helvetica, sans-serif;
}

#headertophalf
{
    display: flex;
    max-height: 50%;
    align-self:flex-start;
}

#sitetitle
{
    max-height: 50%;
    box-sizing: border-box;
    display:flex;
    align-items: center;
    margin-left: 8px;
}

#sitetitletext
{
    padding-top: 15px;
    font-size: xx-large;
    color: white;
    font-family: 'Special Gothic Expanded One', Arial, sans-serif;
}

aside img
{
    margin-left: auto;
    margin-right: auto;
    max-width: 95%;
    height: auto;
}

figure
{
    margin: 8px;
}

header
{
    display:flex;
    height: 80px;
    background-color: rgb(185, 31, 31);
    align-items: center;
    flex-wrap: wrap;
}

main, #gearaside, #imagesaside, #oftheweek
{
    background-color: rgb(230, 228, 228);
    margin: 8px;
    box-sizing: border-box;
    border-radius: 8px;
}

aside h2
{
    text-align: center;
}

main h2, aside h2
{
    margin: 8pt;
    font-family: 'Special Gothic Expanded One', Arial, sans-serif;
}

main p, aside p
{
    margin: 8pt;
}

main, #gearaside, #imagesaside, #oftheweek
{
    flex-basis: 100%;
}

.flexcontainer
{
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
}

nav
{
    align-items: center;
    margin-left: auto;
    justify-self: flex-end;
    flex-basis: 100%;
    max-width: 100%;
    justify-content: space-around;
    display:flex;

    color:white
}

nav a:link {
    color:white;
    text-decoration: none;
}

nav a:visited  {
    color:white;
    text-decoration: none;
}

footer
{
    margin:8px;
}

/* Tablet */
@media screen and (min-width:768px) {
    header
    {
        height:70px;
    }

    #headertophalf
    {
        display: flex;
        max-height: 100%;
        align-self:flex-start;
    }

    #sitetitletext
    {
        padding-top: 0px;
    }

    nav
    {
        margin-left: auto;
        justify-self: flex-end;
        flex-basis: 55%;
        max-width: 55%;
        justify-content: space-around;
        display:flex;
    }
    
    main
    {
        flex-basis: 70%;
        max-width: 70%;
    }
    
    #imagesaside, #oftheweek
    {
        box-sizing: border-box;
        flex-basis: 100%;
        max-width: 100%;
    }

    #gearaside
    {
        flex-basis: 23%;
        max-width: 23%;
    }
}

@media screen and (min-width: 992px){
    main
    {
        flex-basis: 60%;
        max-width: 60%;
    }
    
    #imagesaside
    {
        box-sizing: border-box;
        flex-basis: 100%;
        max-width: 100%;
    }

    #gearaside, #oftheweek
    {
        flex-basis: 16%;
        max-width: 16%;
    }
}


/* Large 3 column layout */
@media screen and (min-width:1200px) {
    main
    {
        flex-basis: 50%;
        max-width: 50%;
    }

    #gearaside, #imagesaside, #oftheweek
    {
        flex-basis: 14%;
        max-width: 14%;
    }
}