body {
	margin:20px;
	background: #D60104;
	vertical-align:middle;
	color:white;
	font-size:24px;
	font-family:BreeSerif-Regular;
}
@font-face { 
   font-family: 'BreeSerif-Regular'; 
   src: local('BreeSerif-Regular'), 
        local('BreeSerif-Regular'), 
        url('BreeSerif-Regular.ttf'); 
}
p {
	margin:0px;
	padding:0px;
	letter-spacing: 1px;
}
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:yellow;
	margin-bottom:30px;
	padding:0px;
	font-size:30px;
	line-height:35px;
	text-shadow: 2px 2px black;
}
.itemname {
	text-align:left;
	font-weight:bolder;
	color:yellow;
	margin:0px;
	padding:0px;
	font-size:29px;
	line-height:34px;
	text-shadow: 2px 2px black;
	float:left;
}
.description {
	text-align:left;
	font-weight:bold;
	margin:0px 0px 15px 0px;
	padding:0px;
	padding-right:30px;
	line-height:26px;
	text-shadow: 2px 2px black;
}
.price {
	text-align:left;
	font-weight:bolder;
	color:yellow;
	margin:0px;
	padding:0px;
	font-size:29px;
	line-height:34px;
	text-shadow: 2px 2px black;
    float:right;
    padding-right:30px;
}
.toppings {
    height:495px;
    background-color:#590102;
    margin-left:0px;
    margin-right:10px;
    margin-top:10px;
    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;
  }
}

@media only screen and (max-width: 900px) {
  #hidden {
    display:none;
  }
.header {
	text-align:center;
	font-weight:bolder;
	padding-bottom:0px;
	margin-bottom:30px;
	font-size:35px;
	line-height:35px;
	text-shadow: 4px 4px black;
}
.subheader {

	text-align:center;
	font-weight:bolder;
	color:yellow;
	margin-bottom:30px;
	padding:0px;
	font-size:15px;
	line-height:20px;
	text-shadow: 2px 2px black;
}
.itemname {
	text-align:left;
	font-weight:bolder;
	color:yellow;
	margin:0px;
	padding:0px;
	font-size:19px;
	line-height:21px;
	text-shadow: 2px 2px black;
	float:left;
}
.description {
	text-align:left;
	font-weight:bold;
	margin:0px 0px 15px 0px;
	padding:0px;
	padding-right:0px;
	font-size:17px;
	line-height:22px;
	text-shadow: 2px 2px black;
}
.price {
	text-align:left;
	font-weight:bolder;
	color:yellow;
	margin:0px;
	padding:0px;
	font-size:19px;
	line-height:21px;
	text-shadow: 2px 2px black;
    float:right;
    padding-right:0px;
}
.toppings {
    height:auto;
    padding-top:10px;
    padding-bottom:10px;
    margin-bottom:20px;
}
}