/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

{
    box-sizing: border-box;
}

body {
    margin: auto;
    width: 75%;
    background-image: url('pizza.webp');
    font-family: Comic Sans MS;
}


.container {
    display: grid;    
    grid-auto-flow: row;
    grid-template-columns: 300px 1fr;
    gap: 0px 0px;
    grid-template-areas:
      "sidebar header"
      "sidebar nav"
      "sidebar content"
      "footer footer";
}

.header {
    grid-area: header;
    background-color: white;
    text-align: center;
    font-size: 3em;
    color: #BB3E00;
    background-image: url(square.png);
    height: 288px;
}
  
.sidebar {
    grid-area: sidebar;
    background-color: #BB3E00;
    padding: 20px;
    color: white;
}
  
.nav {
    grid-area: nav;
    background-color: #BB3E00;
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
    height:61px;
}

li {
    float: left;
    width: 33.33%;
    font-size: 1.5em;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }

li a:hover {
    color:#BB3E00;
    background-color: white;
  }

ul {
    display: flex;
    flex-flow: row wrap;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    overflow:hidden;
    text-align: center;
}
  
.content {
    grid-area: content;
    background-color: white;
    padding: 0px 20px 20px 20px;
    margin: 0px;
    text-align: center;
    align-content: center;
    color:#BB3E00
}
  
.footer {
    grid-area: footer;
    height: 72px;
    background-image: url('tile.gif');
    text-align: center;
    font-size: 1.5em;
    padding: 20px;
}

@media only screen and (max-width: 992px) {
    body {
        width: 100%;
    }

    .container {
        display: grid;    
        gap: 0px 0px;
        grid-auto-flow: row;
        grid-template-areas:
          "header header"
          "nav nav"
          "sidebar sidebar"
          "content content"
          "footer footer";
    }
}

.centext {
    text-align: center;
}

.cenimg {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.revbox {
    background-color: white;
    color:#BB3E00;
    
}

.revbox p {
    margin: 0px;
}

.bold {
    font-weight: bold;
}

.tilt {
    animation: tilt 1s infinite linear;
  }
  
.pulse {
    animation: pulse 1s infinite linear;
  }
  
@keyframes tilt {
    0% {
      transform: rotate(-10deg);
    }
    50% {
      transform: rotate(10deg);
    }
    100% {
      transform: rotate(-10deg);
    }
}
  
@keyframes pulse {
    0% {
      transform: scale(0.95);
    }
    50% {
      transform: scale(1);
    }
    100% {
      transform: scale(0.95);
    }
}

.nopad {
    padding: 0px;
    margin: 0px;
}

.flip:hover {
	animation: flip 3s infinite linear;
}

@keyframes flip {
	0% {
		transform: rotateY(180deg);
	}
	
	50% {
		transform: rotateY(-180deg);
	}
	
	100% {
		transform: rotateY(180deg);
	}
}