/* CSS reset*/
* {margin: 0; padding: 0; box-sizing: border-box;}
/* Doc Wide CSS*/
body{
    font-family:  Verdana, Arial, Helvetica, sans-serif;
    color: #fbfbfe;
    background-color: #2b2a33;
    display: flex;
    flex-flow: row wrap;
    min-height: 100svh;
    }
a:link{
    color: #adc2fc;
    background-color: transparent;
    text-decoration: none;
    }
a:hover{
    color: #ade3fc;
    background-color: transparent;
    text-decoration: none;
    font-size: 1.2rem;
    }
a:visited{
    color: #a591dc;
    background-color: transparent;
    text-decoration: none;
    }
/*header CSS*/
header{
    border-bottom: 2px solid #00cadb;
    font-size: 1rem;
    float: center;
    height: auto; 
    width: auto;
    text-decoration: none;
}
header h1{
    text-align: center;
    display: block;
    text-decoration: none;
    font-size: 2.5rem;
    font-family: "JetBrains Mono";
}
header h1 span{
   text-decoration: line-through;
}
header p{
    justify-content: center;
    font-size: 1.5rem;
    letter-spacing: .25vw;
    display: flex;
    font-family: "JetBrains Mono";
}
header nav{
    gap: .5rem;
    justify-content: center;
    width: 100vw;
    padding-bottom: .4rem;
    display: flex;
    flex-direction: row;
}
#navi1{
    background-color: #42414d;
    box-shadow: -.3rem .3rem 1rem #1f1e25;
    min-width: 2vw; min-height: 2vh;
    max-width: 30vw;
    padding: .5rem;
    border-radius: .4rem;
    flex: 0 auto;
}
/*main CSS*/
main {
    display: flex;
    flex-flow: row wrap;
    justify-content: start;
    padding: .75rem;
    height: auto;
    width: 100%;
}
    .history {
        font-family:  Verdana, Arial, Helvetica, sans-serif;
        color: #fbfbfe;
        background-color: #2b2a33;
        display: flex;
        flex-direction: row wrap;
        min-height: 100svh;
        min-height: 100vh;
    }
    .content{
        display: flex;
        justify-content: center;
    }
    .content .primaryarticle {
    line-height: 1.5em;
    max-width: 75vw;
    flex: 1 auto;
    }
        .primaryarticle img {
            width: 75vw;
            
        }
        .primaryarticle img:nth-of-type(2) {
            max-width: 30vw;
            margin-right: .5em;
            float: left;
        }
        .content .primaryarticle p {
            margin-bottom: 1em;
         }
section.Intro{
    margin:2%;
}
section.startImg{
    /* width: 100svw; */
    text-align: center;
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
    margin: 0% 2% 2% 2%;
}
section.startImg div {
    flex: 0 32%;
    /* border: 3px solid greenyellow; */
    aspect-ratio: 15/16;
    display: flex;
    flex-flow: column;
    margin-bottom: 2%;
    background-color: #42414d;
    box-shadow: -.3rem .3rem .5rem #1f1e25;
    border-radius: .4rem;
    overflow:hidden;
}
section.startImg div figure{
    flex: 0 90%;
    background-repeat:no-repeat;
}
section.startImg div:nth-child(1) figure{
    background-image: url(../images/wreathyshroud.webp);
    background-size: 130%;
    background-position: 60% 80%;
}
section.startImg div:nth-child(2) figure{
    background-image: url(../images/k1mantamainboardadapter.webp);
    background-size: 110%;
    background-position: 70% 100%;
}
section.startImg div:nth-child(3) figure{
    background-image: url(../images/K1LibraExtruder.webp);
    background-size: 190%;
    background-position: 46% 60%;
}
section.startImg div:nth-child(4) figure{
    background-image: url(../images/k1-door-handle-cover2x.webp);
    background-size: 170%;
    background-position: 50% 100%;
}
section.startImg div:nth-child(5) figure{
    background-image: url(../images/270doorhinge.webp);
    background-size: 100%;
    background-position: 0% 60%;
}
section.startImg div:nth-child(6) figure{
    background-image: url(../images/k1lidriser.webp);
    background-size: 120%;
    background-position: 60% 100%;
}
section.startImg div figcaption{
    flex: 0 10%;
    padding: 2%;
    text-align: left;
}
section.startImg p:nth-of-type(2){
    order: 14;
    flex: 0 0 auto;
}
.tblIntro {
    margin-left: 2%;
}
#filaTable {
    margin: 10% auto;
    font-size: 1.4em;
    border-collapse: collapse;
    margin-top: 0%;
    
}
th, td{
        border: 1px solid #ddd;
        padding: .75em .5em;
}
#videoGamesTbl {
    margin: 10% auto;
    font-size: 1.2em;
    border-collapse: collapse;
    margin-top: 0%;
}
/*footer CSS*/
footer{
    padding: .5rem;
    background-color: #000000;
    text-align: center;
    text-decoration: none;
    border-top: 2px solid #00cadb;
    flex: 1 auto;
    }
/* Breakpoints sourced from https://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp */
/* Mobile Phones */
@media screen and (max-width: 600px) {
    header nav{
        flex-flow: row wrap;
    }
    #navi1{
        text-align: center;
        flex: 0 30%;
    }
    header{ 
        font-size: 1.2em;
    }
    section.Intro{
        background-color: #42414d;
        box-shadow: -.3rem .3rem 1rem #1f1e25;
        padding: .5rem;
        border-radius: .4rem;
    }
    section.Intro p{
        font-size: 1.175em;
    }
    section.startImg div {
        flex: 0 100%;
        font-size: 1.3em;
    }
}
/* Tablets in Portrait */
@media screen and (min-width: 600px) and (orientation: portrait) {
    header nav{
        flex-flow: row wrap;
    }
    #navi1{
        text-align: center;
        flex: 0 30%;
    }
    header{ 
        font-size: 1.2em;
    }
    section.Intro{
        background-color: #42414d;
        box-shadow: -.3rem .3rem 1rem #1f1e25;
        padding: .5rem;
        border-radius: .4rem;
        display: flex;
        flex-flow: row wrap;
        
    }
    section.Intro p{
        font-size: 1.175em;
    }
    section.startImg div {
        flex: 0 48%;
        font-size: 1.2em;
    }
    section.startImg div figure{
        min-height: 50%;
    }
    section.startImg div:nth-child(1) figure{
        background-size: 110%;
    }
    section.startImg div:nth-child(2) figure{
        background-size: 110%;
        background-position: 70% 60%;
    }
    section.startImg div:nth-child(3) figure{
        background-size: 190%;
        background-position: 46% 50%;
    }
    section.startImg div:nth-child(5) figure{
        background-size: 100%;
        background-position: 0% 20%;
    }
    table#filaTable {
    font-size: 1em;
    }
    table#videoGamesTbl {
    font-size: 1em;
    }
}
/* Large Computers */
@media screen and (min-width: 992px) and (orientation: landscape), screen and (min-width: 600px) and (orientation:landscape){
    header nav{
        flex-flow: row wrap;
    }
    #navi1{
        text-align: center;
        flex: 0 auto;
        font-size: 1.5em;
    }
    header{ 
        font-size: 1.2em;
    }
    section.Intro p{
        font-size: 1.3em;
    }
    section.startImg div {
        font-size: 1.3em;
    }
}