@media only screen and (max-width: 649px) {
    #main {

    }
    #mainContent {
        padding-left:1rem;
        padding-right:1rem;
        margin-left:var(--menuBarWidth);
    }
    #foxMessage img{
        width: 70%;
        margin:auto;
    }
    #foxMessage img.reduce{
        max-width:50%;
    }
}
@media only screen and (min-width: 650px) and (max-width: 999px) {
    #main {
    }
    #mainContent {
        padding-left:3rem;
        padding-right:3rem;
        margin-left:var(--menuBarWidth);
    }
    #foxMessage img{
        width: 70%;
        margin:auto;
    }
    #foxMessage img.reduce{
        max-width:30%;
    }
}
@media only screen and (min-width: 1000px) {
    #main {
    }
    #mainContent {
        padding-left:8rem;
        padding-right:8rem;
        margin-left:var(--sidenavWidth);
    }
    #foxMessage img{
        width: 50%;
        margin:auto;
    }
    #foxMessage img.reduce{
        max-width:25%;
    }
}

html{
    margin:0;
    overflow:scroll;
}
body{
    background:var(--bgColor);
    color:#DDD;
    margin:0;
    font-family:serif;
}
body *{
    font-family:initial
}
#logo{
    height:4rem;
    margin:auto;
}
h1,
.title {
    font-size:1.25rem;
    color:var(--orangeColor);
}
h1.centered {
    text-align:center
}

#main {
    transition: 0.5s;
    /*margin-left:var(--menuBarWidth);*/
    display:flex;
}
#mainContent {
    padding-top: var(--baseSize16);
    flex:100%;
    transition: 0.5s;
}
#foxMessage,
.content {
    display:flex;
    flex-direction:column;
}
#foxMessage,
.content:not(.noMarginAuto) {
    margin:auto;
}
#foxMessage h4{
    text-align: center;
}
#foxMessage img.reduce{
    margin:auto;
}
.message-error,
.message-success {
    border-radius:var(--borderRadiusThin);
    font-weight:bold;
    /*padding: var(--baseSize12);*/
    margin-bottom:var(--baseSize12);
    margin-top:var(--baseSize12);
    text-align:center;
}
p.message-success,
p.message-error{
    border-radius:inherit;
}
.message-error.generic,
.message-success.generic {
    padding:.5rem;
    transition:.3s;
}
.message-error{
    border: solid var(--borderWidthThin) red;
    background:rgba(255,0,0,0.5);
}
.message-success{
    border: solid var(--borderWidthThin) green;
    background:rgba(0,255,0,0.1);
}
.labelledBlock label{
    margin-left: 0.5rem;
    position: relative;
    background: var(--bgColor);
    border-radius: var(--borderRadiusThin);
    color: #DDD;
    padding: 0.2rem;
    font-size: var(--baseSize12);
    top: calc(var(--fieldLargeHeight)/5);
    -webkit-box-shadow: 0 0 var(--baseSize4);
}
div.block {
    border-radius: var(--borderRadiusThin);
    margin-bottom: var(--baseSize16);
    background: var(--bodyBackground);
    display: block;
    border: 1px solid var(--borderColor);
    -webkit-box-shadow: 0 0 var(--baseSize8) var(--borderColor);
    font-size: var(--baseSize16);
}
.submit,
a.submit{
    font-family: inherit;
    text-decoration: none;
    transition: 0.8s;
    font-size: var(--baseSize16);
    font-weight: bold;
    color:var(--white);
}
search,
.grey.submit{
    background:var(--borderColor-muted);
    color:var(--white);
}
*:not(.grey).submit{
    background:var(--borderColor-muted);
    background-size:100% 100%;
    background-position:center;
    transition: background-size .8s ease;
    transition:0.3s;
    -webkit-box-shadow: inset 0 0 0 0 var(--orangeDeepColor);
}

*:not(.grey).submit:hover{
    -webkit-box-shadow: inset 0 100px 0 0 var(--orangeDeepColor);
}
a.submit {
    margin: 0 auto 1rem auto;
    height: var(--fieldHeight);
    border-radius: var(--borderRadiusThin);
    cursor: pointer;
    text-align: center;
    align-content: center;
}
*:not(.red):not(.card) > .submit:not(.red):hover{
    -webkit-box-shadow: inset 0 100px 0 0 var(--orangeDeepColor);
    box-shadow: inset 0 100px 0 0 var(--orangeDeepColor);
}
.submit.red:hover,
.red > .submit:hover{
    -webkit-box-shadow: inset 0 100px 0 0 darkred;
    box-shadow: inset 0 100px 0 0 darkred;
}
.hidden{
    display:none;
}
.backgroundBlock {
    height:var(--wrapperAddItemBlockHeight);
    font-size: var(--baseSize12);
    padding: var(--baseSize16);
    border-radius: var(--borderRadiusThin);
    -webkit-box-shadow: 0 0 var(--baseSize16) var(--borderColor);
    background: var(--bgColor);
    width: 80%;
    margin: auto;
    overflow:scroll;
}
.backgroundBlock:not(#addItemBlock) {
    text-align: center;
}
.wrapperBackgroundBlock {
    display: none;
    margin-left: var(--menuBarWidth);
}
#searchImg {
    height: 80%;
    margin: auto .5rem;
}
/*
button.submit {
    margin-top: var(--baseSize16);
}
*/
search,
button.submit {
    margin-bottom: var(--baseSize16);
    transition: 0.8s;
    border: None;
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    height: var(--fieldHeight);
    border-radius: var(--borderRadiusThin);
    justify-content: center;
    align-content: center;
    align-items: center;
}
#searchInput {
    flex: 100;
    margin: 0 0 0 1rem;
    height: 100%;
    background:var(--borderColor-muted);
    color:var(--white);
    border:none;
    outline:none;
}
#wrapperModifyItemBlock,
#wrapperAddItemBlock {
    height:90%;
    display:none;
}
#modifyItemBlock,
#addItemBlock {
    height:var(--wrapperAddItemBlockHeight);
    display:flex;
    flex-direction:column;
}
#modifyItem{
}
#modifyItem,
#createNewItem {
    text-align: left;
    overflow: scroll;
}
#createNewItem {
    height: 100%;
    width: 100%;
    display: none;
}
#modifyItem input[type="number"]::-webkit-inner-spin-button,
#modifyItem input[type="number"]::-webkit-outer-spin-button,
#createNewItem input[type="number"]::-webkit-inner-spin-button,
#createNewItem input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance:none;
    margin:0;
}
#modifyItem input[type="number"],
#createNewItem input[type="number"]{
    -moz-appearance:textfield;
}
.validateOrCancel {
    display:flex;
    justify-content:center;
    margin:2rem 0;
}
.validateOrCancel img{
    height:3rem;
    border-radius:50%;
}
.cancelImg{
    margin-right:3rem;
}
.validateImg:hover{
    -webkit-box-shadow: 0 0 var(--baseSize8) var(--borderColor);
    background: var(--borderColor);
}
.cancelImg:hover{
    -webkit-box-shadow: 0 0 var(--baseSize8) firebrick;
    background: radial-gradient(circle, firebrick 0%,red 60%);
}
.wrapperBackArrow{
    display:flex;
}
.validateSelection,
.backArrow{
    height:3rem;
    margin:auto auto 0 auto;
}
.validateSelection:hover,
.backArrow:hover{
    -webkit-box-shadow: 0 0 var(--baseSize8) var(--borderColor);
    background: var(--borderColor);
    border-radius:50%;
}
#renameButton{
    position:relative;
}

@media (hover:none) and (pointer:coarse){
    *:not(.red):not(.card) > .submit:not(.red):active,
    *:not(.red):not(.card) > .submit:not(.red):hover{
        -webkit-box-shadow: initial;
        box-shadow: initial;
    }
    *:not(.red):not(.card) > .submit:not(.red).animate{
        -webkit-box-shadow: inset 0 100px 0 0 var(--orangeDeepColor);
    }
}