/*510 px , 511 px */
@media only screen and (max-width: 920px) {

  .q:hover .menubar1 {
    display: flex;
    flex-direction: column;
}

}

@media only screen and (min-width: 921px) {

.q:hover .menubar1 {
    display: flex;
    justify-content: space-around;
   }  

}

/**/
/**/
/**/

body {

    
    background-color: rgb(43, 44, 45);
    width: 100vw;
    height: 100vh;
    justify-items: center;

}


.q {
    width: 100vw;
    height: 30vh;
    color: rgb(140,53,53);
    justify-self: center;
    align-self: center;
    align-items: center;
    align-content: center;
    text-align: center;
    margin: 0 0 1vh;
    transition: background-color 300ms;
    isolation: isolate; /*keeps menu on top of elements in other divs in small screens*/

}

.q:hover {
    background-color: black;
    color: transparent;

}

.q:hover .menubar1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    background-color: black;
    }

.menubar1 {
    display: none;
    background-color: inherit;
    margin: 0 0 1vh;

}

.menu1 {
    align-content: center;
    background-color: inherit;
    color: rgb(140,53,53);
    margin: 0 0 1vh;

}


.menu1:hover {
    background-color: rgb(194, 187, 173);
}

/**/

/**/

.g {

    display: block;
    width: 100vw;
    height: 70vh;
    justify-content: center;
}

a {
    text-decoration: none;
    color: rgb(255, 225, 225);

}

.norm {
    color: white;
    font-size: 200% ;
    width: 100%;
    align-self: center;
    text-align: center;
}

img {
    margin: 1% 5%
}

p, h2, h3, li, code {
    color: rgb(255, 225, 225);
    font-size: 20px;
    max-width: 60ch;
}   


h1, h1 a {
    color: rgb(140,53,53);
}

.profile {
    display: flex;
    
}

#profile {
    width: 60vh;
    height: 80vh;
}

.text_plus_image {
    display: flex;
    align-items: center;
    
}

#duck {
    max-width: 4vw;
    max-height: 4vh;
}

.gallery {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gallery img {
    max-width: 70vw;
    max-height: 70vh;
}

.post_holder {
    display: flex;
    flex-direction: column;
    
}

.post {
        overflow: auto;

}

.post {
    justify-content: left;
}