h1 {color:blue; text-align: center;} h2 {color:Black;}
.Background {
  padding: 1em;
  background-color: Lavender;
  margin-top: 50px;
  position: relative; 
  min-height: 550vh;
  /* Locks the minimum height */
}
.Header{
  margin-left: 430px;
}
.Text{
  margin-left: 80px;
  font-size: 30px;
  font-weight: bold;
  color: DarkGreen;
  text-transform: none;
  font-family: "Lucida Console", "Courier New", monospace;
  position: relative;
  
}
.LargeText{
  margin-left: 45px;
  font-size: 60px;
  font-weight: bold;
  color: DarkGreen;
  text-transform: none;
  font-family: "Times New Roman", Times, serif;
  width: 415px;
  height: 80px;
  background-color: pink;
  transform: rotate(-5deg);
  margin-left: 50px;
 
  
  
  
  
  /* adjusts the text to be smaller and further right  */
}


.box {
  border-style: solid;
  margin-left: 0px;
  border-width: 1px;
  display: block;
  width: 600px;
  height: 100px;
  background-color: orange;
  transition:
    width 2.5s,
    height 2.5s,
    background-color 2s,
    rotate 2s;
}
/* Applys a border around the object */

.box:hover {
  background-color: #ffcccc;
  width: 600px;
  height: 200px;
  rotate: 360deg;
  filter: drop-shadow(20px 20px 20px pink);
  
  
  
 
}
.Image{
  text-align: center; 
  margin-top: 100px;
  margin-bottom: 150px;
  transition: transform 2s ease;
  float: right;
  clear:both;
  
}
/* Moves the image based on the top and bottom margins */
.Image:hover {
  
  transform: scale(1.6);
  filter: drop-shadow(20px 20px 20px pink);
  margin-left: 50px;
  
  
  
  
 
}
a:link {
  color: blue; /* Unvisited link */
}
a:visited {
  color: purple; /* Visited link */
}
  
/* Inputs the url to the icon */

figure {
  border: 2px #cccccc solid;
  padding: 10px;
  margin: auto;
}
/* Inputs the url to the icon */

figcaption {
  background-color: black;
  color: white;
  font-style: italic;
  padding: 2px;
  text-align: center;
}
.container {
  display: inline-flex;
  background-color: DodgerBlue;
  transition: transform 2s ease;
}
/* Locks the position to inline flex */
.container:hover{
  background-color: MediumSlateBlue;
}

.container div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 24px;
}


.fixed {
  position: fixed;
  top: 20px;   
  right: 30px;
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.sticky {
  position: sticky;
  top: 0;
  background-color: green;
  margin: 5px;
  padding: 2px;
  font-size: 14px;
  border-radius: 5px;
  z-index: 100;
}
.sticky:hover {
  position: sticky;
  background-color: grey;
  margin: 20px;
  padding: 10px;
  font-size: 24px;
  border-radius: 5px;



  
  z-index: 100;
}

.static {
  position: static;
  margin: 5px;
  padding: 2px;
  border-radius: 5px;
}


/* adds a 20px padding to the flexbox */