:root {
--neon-text-color: #F4E342;
--redneon-text-color: #FF69B4;
--blueneon-text-color: #7EC8E3;
 /* --neon-border-color: #F4E342;*/
}

body {
background: #240F0A;
background: -moz-radial-gradient(center, #240F0A 0%, #404040 0%, #000000 100%);
background: -webkit-radial-gradient(center, #240F0A 0%, #404040 0%, #000000 100%);
background: radial-gradient(ellipse at center, #240F0A 0%, #404040 0%, #000000 100%);
color: white;
font-family: sans-serif;
  height: 100vh;
  display:flex;
 /* background: azure;*/
 overflow: hidden;
 
}

* {
margin: 0;
}

.container{
  display: flex;
  flex-direction: column;
  z-index: 1;
}
.container::before,
.container::after {
  content: "";
  flex: 1;
}

/* just aesthetics */
.container{
  width:100vw;
  height: 100vh;
  margin: auto;
  overflow: hidden;
  z-index: 0;
}

.wide-element {
	padding: 20px;
	overflow-x: hidden;
	overflow-y: scroll;
}

.element{
  /*width: 50vw; height: 50vh;*/
  margin: 0 auto;
}

table {
	border: solid 1px #fff;
}

td,th {
	padding: 10px;
}

td.center {
	text-align: center;
}

td.center.category {
	background-color: #fff;
	color: #000 !important;
	font-weight: bold;
}

td.left, th.left {
	text-align: left;
}

td.right, th.right {
	text-align: right;
}

.bottom-message {
	display: block;
	
	text-align: center;
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	
	height: 50px;
}

.column-3 {
	width: 33vw;
	height: 100vh;
	float: left;
	padding: 20px;
	box-sizing: border-box;
	margin-top: 10px;
}
/* neon */
h1.flicker, h1.flicker4, h1.flicker3, h1.flickerred, h1.flickerblue, h1.flicker2 {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #F4E342, 0 0 20px #F4E342, 0 0 25px #F4E342, 0 0 30px #F4E342, 0 0 35px #F4E342;
font-family: 'Comfortaa', cursive;
/*animation: glow 1s ease-in-out infinite alternate;*/
animation: flicker 1.5s infinite alternate;
font-size: 4em;
}

h1.extralarge {
font-size: 6em;
}

.tilted {
transform: rotate(20deg);
display: inline-block;
margin-top: 5px;
}

.flicker {
animation: flicker 1.5s infinite alternate;
}

h1.flicker3 {
animation: flicker 5.5s infinite alternate;
}

h1.flicker4 {
animation: flicker 10.5s infinite alternate;
}

h1.flickerred {
	animation: flickerred 8.5s infinite alternate;
}

h1.flickerblue {
	animation: flickerblue 2.5s infinite alternate;
}

@keyframes neonspark  { 
0% { text-shadow: none; }
30% { text-shadow: 0 0 30px rgba(244,227,66,0.6); }
60% {
  text-shadow: 0 0 30px rgba(244,227,66,0.6),
      0 0 60px rgba(244,227,66,0.4); 
  }
80% { text-shadow: none; }
100% { 
    text-shadow: 0 0 30px rgba(244,227,66,0.6),
      0 0 60px rgba(244,227,66,0.4),
      0 0 100px rgba(244,227,66,0.2),
      0 0 90px rgba(244,227,66,0.1);
  }
}

@keyframes neonspark2  { 
0% { text-shadow: none; }
30% { text-shadow: 0 0 30px rgba(244,227,66,0.9); }
60% {
  text-shadow: 0 0 30px rgba(244,227,66,1.0),
      0 0 35px rgba(244,227,66,0.4); 
  }
80% { text-shadow: none; }
100% { 
    text-shadow: 0 0 30px rgba(244,227,66,0.1),
      0 0 60px rgba(244,227,66,0.4),
      0 0 100px rgba(244,227,66,0.2),
      0 0 90px rgba(244,227,66,0.1);
  }
}

.flicker {
animation: neonspark2 1s 3s forwards;
  text-shadow: 
    0 0 20px rgba(244,227,66,0.6),
    0 0 40px rgba(244,227,66,0.4),
    0 0 60px rgba(244,227,66,0.2),
    0 0 80px rgba(244,227,66,0.1); 
    
    }
    
.flickering {
animation: neonspark2 4s 3s infinite; 
}

.flicker2 {
animation: neonspark 2s 5s forwards;
  text-shadow: 
    0 0 20px rgba(244,227,66,0.6),
    0 0 40px rgba(244,227,66,0.4),
    0 0 60px rgba(244,227,66,0.2),
    0 0 80px rgba(244,227,66,0.1); 
    
    }
    
.flickering2 {
animation: neonspark1 1s 3s infinite; 
}

/* Animate neon flicker */
@keyframes flicker {
    
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
      
        text-shadow:
            -0.1rem -0.1rem 1rem #fff,
            0.1rem 0.1rem 1rem #fff,
            0 0 2rem var(--neon-text-color),
            0 0 4rem var(--neon-text-color),
            0 0 6rem var(--neon-text-color),
            0 0 8rem var(--neon-text-color),
            0 0 10rem var(--neon-text-color);
        
        box-shadow:
            0 0 .5rem #fff,
            inset 0 0 .5rem #fff,
            0 0 2rem var(--neon-border-color),
            inset 0 0 2rem var(--neon-border-color),
            0 0 4rem var(--neon-border-color),
            inset 0 0 4rem var(--neon-border-color);        
    }
    
    20%, 24%, 55% {        
        text-shadow: none;
        box-shadow: none;
    }    
}

@keyframes flickerred {
    
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
      
        text-shadow:
            -0.1rem -0.1rem 1rem #fff,
            0.1rem 0.1rem 1rem #fff,
            0 0 2rem var(--redneon-text-color),
            0 0 4rem var(--redneon-text-color),
            0 0 6rem var(--redneon-text-color),
            0 0 8rem var(--redneon-text-color),
            0 0 10rem var(--redneon-text-color);
      
    }
    
    20%, 24%, 55% {        
        text-shadow: none;
        box-shadow: none;
    }    
}

@keyframes flickerblue {
    
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
      
        text-shadow:
            -0.1rem -0.1rem 1rem #fff,
            0.1rem 0.1rem 1rem #fff,
            0 0 2rem var(--blueneon-text-color),
            0 0 4rem var(--blueneon-text-color),
            0 0 6rem var(--blueneon-text-color),
            0 0 8rem var(--blueneon-text-color),
            0 0 10rem var(--blueneon-text-color);
      
    }
    
    20%, 24%, 55% {        
        text-shadow: none;
        box-shadow: none;
    }    
}


/*@keyframes glow {
  from {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #F4E342, 0 0 20px #F4E342, 0 0 25px #F4E342, 0 0 30px #F4E342, 0 0 35px #F4E342;
  }
  to {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #F4E342, 0 0 40px #F4E342, 0 0 50px #F4E342, 0 0 60px #F4E342, 0 0 70px #F4E342;
  }
}
/* neon */

/* Animated H1 */
.ml9 {
  position: relative;
  font-weight: 200;
  font-size: 4em;
}

.ml9 .text-wrapper {
  position: relative;
  display: inline-block;
  padding-top: 0.2em;
  padding-right: 0.05em;
  padding-bottom: 0.1em;
  overflow: hidden;
}

.ml9 .letter {
  transform-origin: 50% 100%;
  display: inline-block;
  line-height: 1em;
}
/* end Animated H1 */

.listing {
	margin-top: 15px;
	font-size: 4em;
	padding-bottom: 15px;
	border-bottom: 5px solid white;
	display: block;
	font-family: 'Amatic SC', cursive;
}

.listing_small {
	margin-top: 10px;
	font-size: 3em;
	padding-bottom: 10px;
	border-bottom: 5px solid white;
	display: block;
	font-family: 'Amatic SC', cursive;
}

.nobottom {
	border-bottom: 0 !important;
}

.addbottom {
	border-bottom: 5px solid white;
}

.moveup {
	margin-top: -20px;
}

.minilisting {
	margin-top: 20px;
	font-size: 2.8em;
	display: block;
	text-align: center;
	font-family: 'Amatic SC', cursive;
}

.extralisting {
font-size: 2.5em;
	display: block;
	text-align: center;
	font-family: 'Amatic SC', cursive;
}

.listing.last,.extralisting.last,.listing_small.last {
	margin-bottom: 30px;
}

.listing.center {
	text-align: center;
}

.price {
	float: right;
}

.title-box {
text-transform: uppercase;
}

.allergens {
	position: absolute;
	width: 63vw;
	padding: 20px;
	
	bottom: 35px;
	left: 10px;
	text-transform: uppercase;
}

.allergen-text {
	display: block;
	text-align: center;
	font-size: 1.8em;
}

.top-border-title {
	display: block;
	text-align: center;
	margin-top: -55px;
	font-size: 2em;
	font-family: 'Comfortaa', cursive;
	text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #F4E342, 0 0 20px #F4E342, 0 0 25px #F4E342, 0 0 30px #F4E342, 0 0 35px #F4E342;
}
.row {
	width: 100%;
	padding: 20px;
	text-align: center;
	margin-bottom: -20px;
}

.smalllinebreak {
	line-height: 2em;
}

.spin-image {
-webkit-animation:spin 10s linear infinite;
    -moz-animation:spin 10s linear infinite;
    animation:spin 10s linear infinite;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.column-30 {
	width: 31%;
	float: left;
	margin-right: 10px;
  padding-bottom: 20px;
}

.yellowline {
	border-bottom: solid 5px #fffbe4;
	display: block;
}

.oglemonline {
	border-bottom: solid 5px #f4ff5e;
	display: block;
}

.raspberryline {
	border-bottom: solid 5px #ed3bb2;
	display: block;
}

.passionline {
	border-bottom: solid 5px #ed9f74;
	display: block;
}

.pinkline {
	border-bottom: solid 5px pink;
	display: block;
}

.brownline {
	border-bottom: solid 5px #a36b52;
	display: block;
}

.purpleline {
	border-bottom: solid 5px #D17B40;
	display: block;
}

.greenline {
	border-bottom: solid 5px #a2e884;
	display: block;
}

.bottom_image {
	position: absolute;
	bottom: 0;
	margin-bottom: -500px;
	z-index: 1;
	width: 60%;
	
	animation: MoveUpDown 3s linear infinite;
}

.bottom_image_2 {
	position: absolute;
	bottom: 0;
	margin-bottom: -100px;
	z-index: 1;
	width: 30%;
}


@keyframes MoveUpDown {
  0%, 100% {
    margin-bottom: -500px;
  }
  50% {
    margin-bottom: -490px;
  }
}


.strikeout { text-decoration: line-through !important; color: #525252 !important; }

.switch-toggle {
  width: 10em;
}

.switch-toggle label:not(.disabled) {
  cursor: pointer;
}

.disabled {
	background-color: #cdcdcd;
}

.extratop {
	margin-top: 50px;
}