body {
	margin:20px;
	/*background: #D60104;
	background: -webkit-radial-gradient(center, #D60104, #590102);
	background: -moz-radial-gradient(center, #D60104, #590102);
	background: radial-gradient(ellipse at center, #D60104, #590102);*/
	background-color: #ff0000;
background-image: url("https://www.transparenttextures.com/patterns/dark-wood.png");
/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
    color:white;
	font-family: "Bree Serif", serif;
    font-weight: 400;
    font-style: normal;
    font-size:26px;
}

:root {
    --primary-color: #C62828;   /* red */
    --secondary-color: #FFCE1B; /* yellow */
}

p {
	margin:0px;
	padding:0px;
}
img {
        height:150px;
        width:auto;
        border:2px solid #FFFFFF;
        border-radius:10px;
}
.header {
	text-align:center;
	font-weight:bolder;
	padding-bottom:0px;
	margin-bottom:30px;
	font-size:65px;
	line-height:65px;
	text-shadow: 4px 4px black;
}
.subheader {

	text-align:center;
	font-weight:bolder;
	color:var(--secondary-color);
	margin-bottom:30px;
	padding:0px;
	font-size:30px;
	line-height:35px;
	text-shadow: 2px 2px black;
}

.promoheader {
    text-align:center;
	font-weight:bolder;
	padding-bottom:10px;
	font-size:40px;
	line-height:40px;
	text-shadow: 4px 4px black;
}

.itemname {
	text-align:left;
	font-weight:bolder;
	color:var(--secondary-color);
	margin:0px;
	padding:0px;
	font-size:29px;
	line-height:29px;
	text-shadow: 2px 2px black;
	float:left;
}
.description {
	text-align:left;
	font-weight:bold;
	margin:0px 0px 15px 0px;
	padding:0px;
	padding-right:30px;
    font-size:26px;
	line-height:26px;
	text-shadow: 2px 2px black;
}
.price {
	text-align:left;
	font-weight:bolder;
	color:var(--secondary-color);
	margin:0px;
	padding:0px;
	font-size:29px;
	line-height:29px;
	text-shadow: 2px 2px black;
    float:right;
    padding-right:30px;
}
.toppings {
    height:auto;
    padding:10px 0px 10px 0px;
    background-color:#590102;
    margin-left:0px;
    margin-right:0px;
    margin-top:10px;
    margin-bottom:20px;
    border:4px solid #FFFFFF;
}
.marching-ants-border {
  /* Dimensions for example */
  padding: 10px;
  box-sizing: border-box;
  position: relative; /* Needed for positioning pseudo-element if you go that route, but not for this method */

  /* --- Key properties for the effect --- */
  /* Define multiple backgrounds (top, bottom, left, right) using linear gradients */
  background:
    linear-gradient(to right, white 50%, transparent 50%) repeat-x,
    linear-gradient(to right, white 50%, transparent 50%) repeat-x,
    linear-gradient(to bottom, white 50%, transparent 50%) repeat-y,
    linear-gradient(to bottom, white 50%, transparent 50%) repeat-y;
  
  /* Set size of the dashes and gaps (e.g., 10px dash, 10px gap, total size 20px) */
  background-size: 20px 4px, 20px 4px, 4px 20px, 4px 20px;
  
  /* Initial positions for the backgrounds */
  background-position: 0 0, 0 100%, 0 0, 100% 0;

  /* Apply the animation */
  animation: marching-ants 1s linear infinite;
}

@keyframes marching-ants {
  0% {
    /* Start positions */
    background-position: 0 0, 0 100%, 0 0, 100% 0;
  }
  100% {
    /* Move the backgrounds by a distance equal to the dash/gap size (20px * 2 = 40px) */
    /* Adjust signs to control direction (clockwise/counter-clockwise) */
    background-position: 40px 0, -40px 100%, 0 -40px, 100% 40px;
  }
}

.hotdog1 {
    order: 1;
}

.hotdog2 {
    order: 2;
}

.hotdog3 {
    order: 3;
}

.hotdog4 {
    order: 4;
}

@media only screen and (max-width: 900px) {
#hidden {
    display:none;
  }
  
body {
    font-size:15px;
    margin:10px;
}

.header {
	text-align:center;
	font-weight:bolder;
	padding-bottom:0px;
	margin-bottom:10px;
	font-size:30px;
	line-height:30px;
	text-shadow: 2px 2px black;
}
.subheader {
    text-align:center;
	font-weight:bolder;
	color:var(--secondary-color);
	margin-bottom:30px;
	padding:0px;
	font-size:20px;
	line-height:20px;
	text-shadow: 1px 1px black;
}
  
.promoheader {
    text-align:center;
	font-weight:bolder;
	padding-bottom:10px;
	font-size:30px;
	line-height:30px;
	text-shadow: 2px 2px black;
}
  
.itemname {
	text-align:left;
	font-weight:bolder;
	color:var(--secondary-color);
	margin:0px;
	padding:0px;
	font-size:16px;
	line-height:16px;
	text-shadow: 1px 1px black;
	float:left;
}
.description {
	text-align:left;
	font-weight:bold;
	margin:0px 0px 15px 0px;
	padding:0px;
	padding-right:0px;
	font-size:14px;
	line-height:14px;
	text-shadow: 1px 1px black;
}
.price {
	text-align:left;
	font-weight:bolder;
	color:var(--secondary-color);
	margin:0px;
	padding:0px;
	font-size:16px;
	line-height:16px;
	text-shadow: 1px 1px black;
    float:right;
    padding-right:0px;
}
  
.hotdog1 {
    order: 2;
}

.hotdog2 {
    order: 1;
}

.hotdog3 {
    order: 4;
}

.hotdog4 {
    order: 3;
}
 
.toppings {
    padding:10px 0px 10px 0px;
}
  
}