body{
    background-image: linear-gradient(to right, skyblue, lightskyblue, skyblue);
    border: 10px solid gold;
    padding: 10px;
    width: 80%;
    margin:auto;
    font-family:Arial, Helvetica, sans-serif;
    border-radius: 20px;
}

#bronze {
  background-image: linear-gradient(to right, brown, gray,brown);
  border: 10px solid seashell;
  padding: 10px;
  width: 80%;
  margin:auto;
  font-family:Arial, Helvetica, sans-serif;
  border-radius: 20px;
}

#silver {
    background-image: linear-gradient(to right, gray,silver, gray);
    border: 10px solid darkcyan;
    padding: 10px;
    width: 80%;
    margin:auto;
    font-family:Arial, Helvetica, sans-serif;
    border-radius: 20px;
}


#gold {
    background-image: linear-gradient(to right, goldenrod, gold, goldenrod);
    border: 10px solid burlywood;
    padding: 10px;
    width: 80%;
    margin:auto;
    font-family:Arial, Helvetica, sans-serif;
    border-radius: 20px;
}

#platinum {
  background-image: linear-gradient(to right, midnightblue, skyblue,midnightblue);
    border: 10px solid palevioletred;
    padding: 10px;
    width: 80%;
    margin:auto;
    font-family:Arial, Helvetica, sans-serif;
    border-radius: 20px;
}

/* Images are centered */
img{
    margin:auto;
    display: block; 
}
/* Images are centered */

/* Paragraphs for each page*/

.open{
  transform: skew(5deg);
  color: black;
  text-shadow: 1px 1px 1px #747474;  
}

p{
  color: white;
  text-shadow: 1px 1px 1px #000000
}

.silverp{
  color:black;
  text-shadow: 1px 1px 1px #747474;
}


.goldp{
  color:black;
  text-shadow: 1px 1px 1px #747474;
}

.top{
  color: black;
  text-shadow: 1px 1px 1px #747474;
}

.findingnemo{
  color: white;
  text-shadow: 1px 1px 1px #000000;
  font-family: "Staatliches", sans-serif;  
  font-weight: 700;
  font-style: italic;
}
/* End of paragraphs */



/* Beginning Navigation */
.nav1{
  list-style-type: none;
  background-color:gold;  
  padding: 20px;
  top: 10px;
  position: fixed;
  border-radius: 20px;
  box-shadow:2px 2px 2px #000000;
}
.nav2{
  list-style-type: none;
  background-color:palevioletred;  
  padding: 20px;
  top: 10px;
  position: fixed;
  border-radius: 20px;
  box-shadow:2px 2px 2px #000000;
}
.nav3{
  list-style-type: none;
  background-color:greenyellow;  
  padding: 20px;
  top: 10px;
  position: fixed;
  border-radius: 20px;
  box-shadow:2px 2px 2px #000000;
}
.nav4{
  list-style-type: none;
    background-color:skyblue;  
    padding: 20px;
    top: 10px;
    position: fixed;
    border-radius: 20px;
    box-shadow:2px 2px 2px #000000;
}
.nav5{
  list-style-type: none;
  background-color:khaki;  
  padding: 20px;
  top: 10px;
  position: fixed;
  border-radius: 20px;
  box-shadow:2px 2px 2px #000000;
}
li{
  display: inline;
  padding: 5px;
  text-transform: uppercase;
  font-family: 'Times New Roman', Times, serif;
  font-size: x-large
}

/*End Navigation*/





/* The quote divs are decorated based on the colors of the characters who say them/or the main character of the movie*/

.quote1{  
  background-color:gold;
  border: 2px solid dodgerblue;
  width: 40%;
  border-radius: 20px;
  box-shadow:2px 2px 2px #000000;
  padding: 3px;
}
.quote2{
  background-color:darkcyan;
  border: 2px solid orangered;
  width: 40%;
  border-radius: 20px;
  box-shadow:2px 2px 2px #000000;
  padding: 3px;
}
.quote3{
  background-color:sienna;
  border: 2px solid seagreen;
  width: 40%;
  border-radius: 20px;
  box-shadow:2px 2px 2px #000000;
  padding: 3px;
}
.quote4{
  background-color:red;
  border: 2px solid yellow;
  width: 40%;
  border-radius: 20px;
  box-shadow:2px 2px 2px #000000;
  padding: 3px;
}
.quote5{
  background-color:skyblue;
  border: 2px solid pink;
  width: 50%;
  border-radius: 20px;
  box-shadow:2px 2px 2px #000000;
  padding: 3px;
}
.quote6{
  background-color:orangered;
  border: 2px solid orange;
  width: 40%;
  border-radius: 20px;
  box-shadow:2px 2px 2px #000000;
  padding: 3px;
}
.quote7{
  background-color:mediumseagreen;
  border: 2px solid darkseagreen;
  width: 30%;
  border-radius: 20px;
  box-shadow:2px 2px 2px #000000;
  padding: 3px;
}
.quote8{
  background-color:lightskyblue;
  border: 2px solid black;
  width: 60%;
  border-radius: 20px;
  box-shadow:2px 2px 2px #000000;
  padding: 3px;
}
.quote9{
  background-color:greenyellow;
  border: 2px solid tomato;
  width: 30%;
  border-radius: 20px;
  box-shadow:2px 2px 2px #000000;
  padding: 3px;
}
.quote10{
  background-color:lightskyblue;
  border: 2px solid aquamarine;
  width: 50%;
  border-radius: 20px;
  box-shadow:2px 2px 2px #000000;
  padding: 3px;
}
.quote11{
  background-color:orangered;
  border: 2px solid bisque;
  width: 40%;
  border-radius: 20px;
  box-shadow:2px 2px 2px #000000;
  padding: 3px;
}
.quote12{
  background-color:blue;
  border: 2px solid yellow;
  width: 50%;
  border-radius: 20px;
  box-shadow:2px 2px 2px #000000;
  padding: 3px;
}
.quote13{
  background-color:lightsalmon;
  border: 2px solid gold;
  width: 30%;
  border-radius: 20px;
  box-shadow:2px 2px 2px #000000;
  padding: 3px;
}
.quote14{
  background-color:lightgreen;
  border: 2px solid mediumpurple;
  width: 40%;
  border-radius: 20px;
  box-shadow:2px 2px 2px #000000;
  padding: 3px;
}
.quote15{
  background-color:dodgerblue;
  border: 2px solid azure;
  width: 30%;
  border-radius: 20px;
  box-shadow:2px 2px 2px #000000;
  padding: 3px;
}
.quote16{
  background-color:steelblue;
  border: 2px solid pink;
  width: 40%;
  border-radius: 20px;
  box-shadow:2px 2px 2px #000000;
  padding: 3px;
}
.quote17{
  background-color:indianred;
  border: 2px solid azure;
  width: 30%;
  border-radius: 20px;
  box-shadow:2px 2px 2px #000000;
  padding: 3px;
}
.quote18{
  background-color:deepskyblue;
  border: 2px solid mediumpurple;
  width: 60%;
  border-radius: 20px;
  box-shadow:2px 2px 2px #000000;
  padding: 3px;
}
.quote19{
  background-color:lightskyblue;
  border: 2px solid darkblue;
  width: 50%;
  border-radius: 20px;
  box-shadow:2px 2px 2px #000000;
  padding: 3px;
}
.quote20{
  background-color:bisque;
  border: 2px solid saddlebrown;
  width: 40%;
  border-radius: 20px;
  box-shadow:2px 2px 2px #000000;
  padding: 3px;
}
.quote21{
  background-color: beige;
  border: 2px solid red;
  width: 60%;
  border-radius: 20px;
  box-shadow:2px 2px 2px #000000;
  padding: 3px;
}
.quote22{
  background-color: skyblue;
  border: 2px solid whitesmoke;
  width: 50%;
  border-radius: 20px;
  box-shadow:2px 2px 2px #000000;
  padding: 3px;
}
.quote23{
  background-color:crimson;
  border: 2px solid gold;
  width: 30%;
  border-radius: 20px;
  box-shadow:2px 2px 2px #000000;
  padding: 3px;
}
.quote24{
  background-color:greenyellow;
  border: 2px solid azure;
  width: 50%;
  border-radius: 20px;
  box-shadow:2px 2px 2px #000000;
  padding: 3px;
}
.quote25{
  background-color:goldenrod;
  border: 2px solid darkgrey;
  width: 40%;
  border-radius: 20px;
  box-shadow:2px 2px 2px #000000;
  padding: 3px;
}
.quote26{
  background-color:gold;
  border: 2px solid crimson;
  width: 30%;
  border-radius: 20px;
  box-shadow:2px 2px 2px #000000;
  padding: 3px;
}
.quote27{
  background-color:violet;
  border: 2px solid brown;
  width: 40%;
  border-radius: 20px;
  box-shadow:2px 2px 2px #000000;
  padding: 3px;
}
.quote28{
  background-color:orange;
  border: 2px solid whitesmoke;
  width: 30%;
  border-radius: 20px;
  box-shadow:2px 2px 2px #000000;
  padding: 3px;
  transform:skew(5deg)
}
/*End of quotes*/


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

  body {
     border: 10px solid blue;
     padding: 1px;
     width: 50%;
     margin:auto;
     font-family:'Times New Roman', Times, serif;
     border-radius: 20px;
    background-image: linear-gradient(to right, black, lightgray, black);
  }

.intro{
     color:aliceblue;
        font-family: "Bebas Neue", sans-serif;
        font-weight: 700;
        font-style: normal;
      }
}