.topbar#topbarmin {
    height: 50px;
    border-bottom-width: 3px;
    border-style: solid;
    border-color: black;
    background-color: black;
}
.topbarmob#topbarmin {
    height: 50px;
}
#topbarmax {
    height: 110px;
    background-color: transparent;
}
.topbar {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100vw;
    overflow: hidden;
    border: 0px;
    z-index: 5;
}
.topbarmob {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100vw;
    border: 0px;
    z-index: 5;
}
.transistion {
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
#logo {
    position: absolute;
    top: 5%;
    left: 5px;
}
.name {
    position: absolute;
    margin: 0px;
    color:  rgb(180, 0, 0);
    font-family: Nunito;
    font-weight: bolder;
    text-shadow: -1px -1px 0 #ff5656, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    letter-spacing: 2px;
}
#namemin {
    top: 8px;
    font-size: 30px;
    left: 60px;
}
#namemax {
    top: 27px;
    font-size: 50px;
    left: 110px;
}
.story {
    right: 600px;
    top: 0px;
}
.recipies {
    right: 400px;
    top: 0px;
}
.sauces {
    right: 200px;
    top: 0px;
}
.order {
    right: 0px;
    top: 0px;
}
.storymob {
    left: 20%;
    top: 0vh;
}
.recipiesmob {
    left: 20%;
    top: 20vh;
}
.saucesmob {
    left: 20%;
    top: 40vh;
}
.ordermob {
    left: 20%;
    top: 60vh;
}
.bottommob {
    left: 20%;
    top: 80vh;
    position: absolute;
    width: 80%;
    height: 20vh;
    border: 0px;
    border-left: 3px;
    border-style: solid;
    border-color: rgb(171, 0, 0);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color:  rgb(180, 0, 0);
    font-size: 75px;
}
.box {
    position: absolute;
    width: 200px;
    height: min(100%, 80px);
    border: 0px;
    border-left: 3px;
    border-style: solid;
    border-color: rgb(171, 0, 0);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color:  rgb(180, 0, 0);
    font-size: 25px;
}
.boxmob {
    position: absolute;
    width: 80%;
    height: 20vh;
    border: 0px;
    border-left: 3px;
    border-style: solid;
    border-color: rgb(171, 0, 0);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color:  rgb(180, 0, 0);
    font-size: 8vw;
}
#sidebarmob {
    position: absolute;
    width: 100%;
}
#darkenmob {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100vw;
    height: 100%;
    z-index: 5;
    background-color: rgba(0, 0, 0, 0.4);
}
#sidebarbutton {
    width: 20%;
    height: 20vw;
    background-color: rgb(180, 0, 0);
    text-align: center;
    align-content: center;
    border-radius: 0px 0px 0px 30px;
}
#sidebarbuttontext {
    font-size: 20vw;
}
#box:hover {
    background-color: rgb(140, 0, 0);
}
#boxtext {
    position: absolute;
    margin: 0px;
    color: black;
    font-family: Nunito;
    font-weight: bolder;
}
#note {
    font-size: 25px;
    color: rgb(200, 200, 200);
    font-family: Nunito;
    font-weight: bolder;
    margin: 2px;
    margin-top: 15px;
    border-color:  rgb(255, 255, 255);
}
#triangle {
    position: absolute;
    right: 802px;
    top: 0px;
    width: 80px;
    height: 80px;
    background: rgb(180, 0, 0);
    border-radius: 0px 0px 0px 80px;
}
#mainmin {
    width: 250px;
}
#mainminmob {
    width: 250px;
    border-radius: 0px 0px 30px;
}
#mainmax {
    width: 400px;
    border-radius: 0px 0px 30px;
}
.main {
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    width: auto;
}
.main:hover {
    background-color: rgba(140, 0, 0, 0.2);
}
footer {
    margin-top: 0px;
    width: 100vw;
    text-align: center;
    display: grid;
    grid-template-rows: 10px auto;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-template-columns: 33.3vw 33.4vw 33.3vw; 
    grid-row-start: 1;
    grid-row-end: 3;
    overflow-wrap: break-word;
}
footer span, footer a {
    font-size: auto;
    font-family: Nunito;
    font-weight: bolder;
    color: rgb(180, 0, 0);
    height: auto;
}
footer div {
    font-family: Nunito;
    font-weight: bolder;
    color: rgb(180, 0, 0);
    height: auto;
    display: inline-block;
    margin: 0px;
    background-color: black;
    padding: 5px;
}
null {
    height: auto;
    display: inline-block;
}
body {
    background-color: rgb(180, 180, 180);
    min-height: 100%;
    overflow-x: hidden;
}
.maincolor {
    background-color: rgb(150, 150, 150);
}
.snow {
    background: url('images/snow.png');
    width: 100%;
    height: 44px;
    margin-bottom: -20px;
    margin-top: -20px;
}
.lights {
    background: url('images/light.png');
    background-position: -25px;
    width: 100%;
    height: 43px;
    margin-bottom: 25px;
}