/* 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-direction: column;
    min-height: 100svh;
    min-height: 100vh;
    }
a:link{
    color: #FFF;
    background-color: transparent;
    text-decoration: none;
    }
a:hover{
    color: #ade3fc;
    background-color: transparent;
    text-decoration: none;
    font-size: 2rem;
    }
a:visited{
    color: #e2900c;
    background-color: transparent;
    text-decoration: none;
    }
/*header CSS*/
header{
    /* padding: 1.5vh; */
    border-bottom: 2px solid #fbfbfe;
    text-align: center;
    font-size: 1em;
    height: auto; 
    width: auto;
    text-decoration: none;
    flex-direction: row;
}
.nav {
    display: flex;
    width: 100vw;
    justify-content: left;
    background-color: #1f1e27;
    margin-bottom: 2svh;
}
    .nav a {
        background-color: #1f1e27;
        min-width: 2em; min-height: 2em;
        font-size: 1.25em;
        padding:1rem .5rem;
        border-right: .25rem solid #1a1920;
        transition: 150ms;
        flex: 0 auto;
    }
    .nav a:visited {
        color: #FFF;
    }
    .nav a:hover {
        color: #000;
        background-color: #ade3fc;
    }
header h1{
    text-decoration: none;
    font-size: 2.5em;
    font-family: "JetBrains Mono";
}
header p{
    display: block;
    letter-spacing: .25vw;
    padding-bottom: 2vh;
    font-family: "JetBrains Mono";
}
/* Hometown CSS */
.hometown{
        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;
         }
/*main CSS*/
section.introduction {
    /* outline:2px solid red; */
    display: flex;
    margin: 1svh 1%;
    justify-content: space-around;
}
section.introduction div:nth-child(1){
    /* outline:2px solid pink; */
    flex: 0 0 10%;
    aspect-ratio: 1;
    background-image: url(../images/jackthecats-silly-pose.jpg);
    background-size: cover;
    margin-right: 1%;
    border-radius: .5rem;
    border: .2rem solid #42414d;
    box-shadow: -.3rem .3rem .5rem #1f1e25;
}
section.introduction div:nth-child(2){
    /* outline: 2px solid greenyellow; */
    flex: 0 0 89%;
    background-color: #42414d;
    box-shadow: -.3rem .3rem .5rem #1f1e25;
    border-radius: .4rem;
    padding: 1.25svh 1svw;
}
section.centralContent {
    margin: 0 1%;
    /* outline: 2px solid snow; */
    display: flex;
    flex-flow: row wrap;
    padding-bottom: 1svh;
}
section.centralContent div:nth-child(1){
flex: 0 0 25%;
/* outline: 2px solid crimson; */
display: flex;
flex-flow: column;
padding: 1.5em 0 1.5em 1.5em;
background-color: #42414d;
box-shadow: -.3rem .3rem .5rem #1f1e25;
border-radius: .4rem;
margin-top: 2%;
}
section.centralContent div:nth-child(2){
flex: 0 0 75%;
display: flex;
flex-flow: row wrap;
align-content: flex-start;
}
section.centralContent div:nth-child(2) h2{
text-align: center;
max-height: 1.75em;
flex: 1 0 100%;
text-decoration: underline;
}
section.centralContent div:nth-child(2) a{
    font-size: 1.5em;
    text-align: center;
    background-color: #42414d;
    box-shadow: -.3rem .3rem .5rem #1f1e25;
    margin: 1.143%;
    padding: 1.143%;
    height: fit-content;
    border-radius: .4rem;
    flex: 1 40%;
    align-self:baseline;
}

/*footer CSS*/
.footer{
    padding: .5rem;
    background-color: #1f1e27;
    text-align: center;
    text-decoration: none;
    border-top: 2px solid #fbfbfe;
    flex: 1;
    }
    .footer a:link {
        color: rgb(15, 126, 206);
    }
    .footer a:hover {
        font-size: 1.5rem;
    }
/* Breakpoints sourced from https://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp */
/* Mobile Phones */
@media screen and (max-width: 600px) {
    .nav a {
        font-size: 1.2em;
    }
    .nav a:first-child {
        color: transparent;
        background-image: url(../images/jackthecats-silly-pose.jpg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        padding: 0;
        margin: 0;
    }
    header{ 
        font-size: 1.2em;
    }
    section.introduction {
        justify-content: center;
        font-size: 1.2em;
    }
    section.introduction div:nth-child(1){
        display: none;
        flex: 0 0 0%;
    }
    section.introduction div:nth-child(2){
        flex: 0 0 90%;
    }
    section.centralContent {
        flex-flow: row wrap;
        justify-content: center;
    }
    section.centralContent div:nth-child(1){
        flex: 0 0 90%;
        flex-flow: row wrap;
        justify-content: space-evenly;
        padding: 1.5em 0;
    }
    section.centralContent div:nth-child(1) aside{
        margin: 0 3%;
        max-width: 50%;
        font-size: 1.3em;
    }
    section.centralContent div:nth-child(2){
        flex: 0 0 92.286%;
        display: flex;
        flex-flow: row wrap;
        align-content: flex-start;
    }
    section.centralContent div:nth-child(2) h2{
        flex: 1 0 100%;
        margin-bottom: 1em;
    }
    section.centralContent div:nth-child(2) a{
        flex: 1 100%;
        max-width: 100%;
    }
    .footer {
        font-size: 1.2em;
    }
}
/* Tablets in Portrait */
@media screen and (min-width: 600px) {
    .nav a {
        font-size: 1.2em;
    }
    .nav a:first-child {
        color: transparent;
        background-image: url(../images/jackthecats-silly-pose.jpg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        padding: 0;
        margin: 0;
    }
    header{ 
        font-size: 1.3em;
    }
    section.introduction {
        justify-content: center;
        font-size: 1.2em;
    }
    section.introduction div:nth-child(1){
        display: none;
        flex: 0 0 0%;
    }
    section.introduction div:nth-child(2){
        flex: 0 0 90%;
    }
    section.centralContent {
        flex-flow: row wrap;
        justify-content: center;
    }
    section.centralContent div:nth-child(1){
        flex: 0 0 90%;
        flex-flow: row wrap;
        justify-content: space-evenly;
        padding: 1.5em 0;
    }
    section.centralContent div:nth-child(1) aside{
        margin: 0 3%;
        max-width: 50%;
        font-size: 1.3em;

    }
    section.centralContent div:nth-child(2){
        flex: 0 0 92.286%;
        display: flex;
        flex-flow: row wrap;
        align-content: flex-start;
    }
    section.centralContent div:nth-child(2) h2{
        flex: 1 0 100%;
    }
    section.centralContent div:nth-child(2) a{
        flex: 1 47.5%;
        max-width: 47.5%;
    }
    .footer {
        font-size: 1.2em;
    }
}
/* Large Computers */
@media screen and (min-width: 992px) and (orientation: landscape){
    .nav a {
        background-color: #1f1e27;
        min-width: 2em; min-height: 2em;
        font-size: 1.25em;
        padding:1rem .5rem;
        border-right: .25rem solid #1a1920;
        transition: 150ms;
        flex: 0 auto;
        font-size: 1.1em;
    }
    .nav a:first-child {
        background-image: none;
        color: #fbfbfe;
        background-color: #1f1e27;
        min-width: 2em; min-height: 2em;
        font-size: 1.25em;
        padding:1rem .5rem;
        border-right: .25rem solid #1a1920;
        transition: 150ms;
        flex: 0 auto;
    }
    .nav a:visited {
        color: #FFF;
    }
    .nav a:hover {
        color: #000;
        background-color: #ade3fc;
    }
    header{ 
        font-size: 1.6em;
    }
    section.introduction {
        justify-content: center;
        font-size: 1.4em;
    }
    section.introduction div:nth-child(1){
        display: block;
        flex: 0 0 10%;
        aspect-ratio: 1;
        background-image: url(../images/jackthecats-silly-pose.jpg);
        background-size: cover;
        margin-right: 1%;
        border-radius: .5rem;
        border: .2rem solid #42414d;
        box-shadow: -.3rem .3rem .5rem #1f1e25;
    }
    section.introduction div:nth-child(2){
        flex: 0 0 88.557%;
        padding: 1% 1%;
    }
    section.centralContent div:nth-child(1){
        flex: 0 0 15%;
    }
    section.centralContent div:nth-child(1) aside{
        margin: 0 3%;
        max-width: 50%;
        font-size: 1.2em;
    }
    section.centralContent div:nth-child(2){
        flex: 0 0 85%;
        justify-content: space-between;
    }
    section.centralContent div:nth-child(2) h2{
        text-align: center;
        font-size: 3em;
        flex: 1 0 100%;
    }
    section.centralContent div:nth-child(2) a{
        font-size: 1.6em;
        margin: .5rem;
        padding: .5rem;
        flex: 1 0 24%;
    }
    .footer {
        font-size: 1.5em;
    }
}