:root{
    --blog-black: rgb(53, 53, 53);
    --blog-white: rgb(233, 233, 233);
}
* {box-sizing: border-box; margin: 0px; padding: 0px;}

@keyframes nav-color-change {
    from {background-color: #c7c7c7;color: var(--blog-black);}
    to {background-color: var(--blog-black); color: var(--blog-white);}
}

body {
    background-color: var(--blog-white);
    color: var(--blog-black);
    font-family: 'Libre Baskerville', serif;
}

body a{
    color: var(--blog-black);
}

#navbar{
    user-select: none;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    background-color: #c7c7c7;
}

#back{
    padding: 9px 10px;
    margin: 0px 0px;
}

#inside-navlist{
    display: flex;
    flex-flow: row wrap;
}

.common-navlist{
    color: var(--blog-black);
    padding: 9px 15px;
    height: 100%;
}

#back:hover{
    animation-name: nav-color-change;
    animation-duration: 0.1s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
.common-navlist:hover{
    animation-name: nav-color-change;
    animation-duration: 0.1s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

/* Media queries */
@media (max-width: 500px) and (min-width: 401px){
    #back{padding: 8px 10px;font-size: 15px;}
    .common-navlist{padding: 8px 13px;font-size: 15px;}
}
@media (max-width: 400px) and (min-width: 351px){
    #back{padding: 7px 10px;font-size: 12px;}
    .common-navlist{padding: 7px 12px;font-size: 12px;}
}
@media (max-width: 350px) and (min-width: 301px){
    #back{padding: 7px 10px;font-size: 11px;}
    .common-navlist{padding: 7px 11px;font-size: 11px;}
}
@media (max-width: 300px) and (min-width: 251px){
    #back{padding: 5px 10px;font-size: 10px;}
    .common-navlist{padding: 5px 10px;font-size: 10px;}
}
@media (max-width: 250px) and (min-width: 201px){
    #back{padding: 5px 8px;font-size: 8px;}
    .common-navlist{padding: 5px 8px;font-size: 8px;}
}
@media (max-width: 200px){
    #back{padding: 4px 8px;font-size: 8px;}
    .common-navlist{padding: 4px 6px;font-size: 8px;}
}