@charset "UTF-8";

body {
      font-family: sans-serif;
      margin: 0;
      font-size: 18px;
      line-height: 24px;
      background-color: #1a1a1a; /* dark spooky background */
      color: #f2f2f2;
    }

    /* making a box to put all the content in except footer, then center content and constrain width sometimes called a page-wrap*/
    .container {
      max-width: 1000px;
      margin: 0 auto;
    }

    header{
      text-align: center;
      margin-bottom: 50px;
	margin-top: 50px;

    }

    
    header img{
      width: 300px;
	  animation: fade 3s 1; /* name of animation / duration / number of times */
    }

@keyframes fade {
  0% { opacity: 0; } /* start point */
  100% { opacity: 1; } /* end point */
}

    
    img{
      max-width: 100%;
      height:auto;
      border-radius: 6px;
    }
.hero {
      background:linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0.5)), url("images/ghost-brownies.png");
      background-size: cover;
      background-position: center;
      text-align: center;
      padding: 80px 20px;
      
      color: #ff7518;
      text-shadow: 2px 2px #000;
      border-radius: 8px;
      margin-bottom: 40px;
    }    

    h1 {
      font-size: 32px;
	  line-height: 40px;
	  text-align: center;
      color: #ff7518; /* pumpkin orange */
      text-shadow: 2px 2px #000;
    }

.deal{
  font-size: 45px;
}

form{
  background-color: rgba(119, 4, 167, .65);
  padding: 32px;
  border-radius: 25px;
  box-shadow: 0 10px 25px rgba(0,0,0, .65);
  width: 320px;
  margin-left: auto;
  margin-right: auto;
}

.form-group{
  margin-bottom: 20px;
  text-align: left;
}

label{
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
}

input{
  width: 95%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 16px;
}

input:focus{
  border-color: orange;
  outline: none;
}

button{
  width: 70%;
  padding: 10px 20px;
  margin-top: 10px;
  background-color: greenyellow;
  color: black;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;

}

button:hover{
  background-color: orange;
}










main{
	padding-left: 20px;
	padding-right: 20px;
}

    
    .float-demo{
      max-width: 700px;
      margin: 40px auto 0 auto;
      padding: 0 20px;
    }

.float-demo p{
	font-size: 16px;
}

   
    .float-demo img {
      float: left;
      margin: 0 15px 15px 0;
      width: 150px;
      height: auto;
      border-radius: 8px;
      border: 2px solid #ff7518;
	 transition: transform 0.6s ease; /* smooth rotation animation */
      transform: rotate(0deg);   /* default state (no rotation) */
    }

    .float-demo img:hover {
      transform: rotate(3deg) scale(1.03); /* rotate slightly and grow just a touch */
    }

       /* Clear floats - when somethiing floats it becomes invisible to the box holding it creating weird wrapping things - this rule let's the containing box see the floating things inside so it acts normal in short, just add the "clearfix" class to the html of any box that contains floating things */
    
    .clearfix::after {
      content: "";
      display: table;
      clear: both;
    }


    /* Flexbox demo */
    .flex-container {
      display: flex;
      flex-direction: column; /* stack on mobile */
      gap: 25px;
      margin-top: 30px;
    }

  
    .flex-item {
      background-color: #ff7518; /* pumpkin orange */
      color: #1a1a1a; /* dark text for contrast */
      padding: 20px;
      text-align: center;
      border-radius: 8px;
      font-weight: bold;
      font-size: 24px;
      flex: 1; /* tells each flex item to take up the same amount of space */
		transition: transform 0.2s, box-shadow 0.2s;
    }

    .flex-item:hover {
      transform: scale(1.05);
      box-shadow: 0 0 10px #ff7518;
    }

  /* Footer */
    footer {
      background-image: url("images/footer.png");
      background-size: cover;
      background-position: center;
      text-align: center;
      padding: 150px 20px;
      color: #ff7518;
      text-shadow: 1px 1px #000;
      margin-top: 50px;
    }


/* smoke effect */
    .smoke {
      position: fixed; /* positions the element fixed to the page so stuff scrolls over the top */
      inset: 0; /* shorthand for top: 0; right: 0; bottom: 0; left: 0; fills the screen */
      z-index: -100; /* puts the smoke behind everything esle. requeires a position to be set on the image. a negative number puts it further from the viewer. A positive number brings it closer to the viewer */
      
      /* creates three overlapping faint circles: Make a very faint white circle starting 20% from the left and 20% from the top, fading out to transparent at 40% radius, positioned at the top-left of the element. */
      background: 
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.02), transparent 40%) 0 0,
        radial-gradient(circle at 80% 30%, rgba(128, 0, 128, .15), transparent 40%) 0 0,
        radial-gradient(circle at 50% 80%, rgba(255,255,255,0.07), transparent 40%) 0 0;

      background-size: 200% 200%;  /* makes the gradients larger than the element, so movement looks smoother */
      animation: drift 15s ease-in-out infinite alternate; /* applies the 'drift' animation (below) to move the gradients slowly */
      filter: blur(60px);      /* blurs everything to make it look like soft smoke instead of sharp circles */
    }

    /* ======== Keyframe animation ======== */
    @keyframes drift {
      0% { /* each percentage defines a stage in the animation */
        background-position: 0% 0%, 50% 50%, 100% 100%; /* starting positions of each gradient */
      }
      50% { /* halfway through the animation, move them around */
        background-position: 100% 50%, 0% 100%, 50% 0%;
      }
      100% { /* final positions (then it reverses smoothly because of 'alternate') */
        background-position: 50% 100%, 100% 0%, 0% 50%;
      }
    }


    /* Desktop styles */
    @media (min-width: 1000px) {
      .flex-container {
        flex-direction: row; /* sit side-by-side */
      } 
		
		main{
			padding-left: 50px;
			padding-right: 50px;
		}
      
        footer{
		padding-bottom: 350px;
            
        }
      
      .hero{
        display: flex;
        padding-right: 100px;
        padding-left: 100px;
      }
      
      form{
        margin-right: 0;
      }
      
      h1{
        margin-top: 100px;
      }
      
      
      

    }