.mobile {
    display: none;
}

.notMobile {
    display: block;
}

@media screen and (max-width: 600px) {
    section.board {

        flex-direction: column;
    }
}

@media screen and (max-width: 1400px) {
    article.textBlock{
       flex-direction: column;
       /* height: fit-content; */
    }
    article.preview > *,
    .articleslist article > *{
    flex-basis: 100%; 
    }

    article.textBlock .buttons{
        margin-top:auto;
    }
    article.textBlock > picture{
        height:15vh;
        min-height:15vh;
        max-height:15vh;
        border-radius: 0.3rem;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }
    
    
}

@media screen and (max-width: 1000px) {
    header #logo{
        margin-left:0.4rem;
    }
    
    hRow{
        flex-wrap: wrap;

    }
    
    #intro p {

        width: 100%;
        font-size: 0.8rem;
        padding: 0.3rem;
        text-align: center;
    }


 

    header{
        padding:0rem;

    }
    header>div {
        margin: 0;
        max-width: 100%;
        width: 100%;
    }
    .mobile {
        display: block;
    }

    .notMobile {
        display: none;
    }

    section.content .itemView {
        flex-wrap: wrap;

    }
    section.content .itemView .details {

    margin-left:0;
    }
    section.content h1.mobile{
        text-align: center;
    }

    section.content h1 {
        text-align: left;
    }

    header nav{
        width: fit-content;
        flex-direction: column;
        margin-left:auto;
        margin-top:0;
    }
    
    nav a{
        border-left: dotted 1px var(--color5);
        border-bottom: none;
    
    }
    
    header {
        flex-direction: row;
        flex-wrap: wrap;
    }
    header #side{
        flex-grow: unset;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin:auto;
        margin-right:2rem;
    }
    header #bio b{
        display: none;
    }

    header.floating #side{
        margin-right:0;
    }

    header > div { 
        width:fit-content;
        flex-grow: 1;
    }
     nav a:hover,
     nav a.active{
        border-left: solid 1px var(--color5);
        border-bottom:none;
    
     }


    nav.submenu{
        right:100%;
        top:0%;
    
    }
}

@media screen and (max-width: 500px) {
    .form tr{
        display: flex;
flex-direction: column;
align-items: stretch;
justify-content: unset;

    }

    header #logo{
        margin-left:0;
    }
   
    .form tbody{
        display: flex;
flex-direction: column;
align-items: stretch;
    }
    header:not(.floating) > div{
        flex-direction: column;
        align-items: center;
    }
    header:not(.floating) #side{
        align-items: center;
        margin:0;
        margin:1rem;

    }
    header #logo{
        height:6.5rem;
    }
}
@media screen and (max-width: 340px) {
    header{
        padding-top:0.4rem;

    }
 header #side{
    /* display: none; */
 }
 header.floating #side{
    /* display:flex; */
 }
 header > div {
    align-items: center;
    justify-content: center;
 }

 header{
    justify-content: stretch;

 }

 header nav{
    width: fit-content;
    flex-direction: row;
    flex-wrap: wrap;
    margin-left:auto;
    justify-content: center;

    margin:0;
    
}
header nav > a,header nav > a:hover,header nav > a.active{
    border:0;

}

header nav > a{
    margin:0.4rem;
}


nav.submenu{
    
    top:100%;
    left:0%;
    right:unset;
    margin:0;

}

 
}