p{margin-left: 10; 
margin-right: 10;
font-family: Arial, Helvetica, sans-serif;
}

h5{ text-align: right;}

/*background background*/

div#background{
    background-image: url("BA8.webp");
    height: auto;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    display:flex;
    margin-left: auto;
    margin-right: auto;
}

/*Nolan history*/

div#sectionone{
    
    background-color: rebeccapurple;
    height: auto;
    width: 400px;
    
    border-right: 5px solid white;
    border-radius: 2px;
    
}

/*BIG Christopher Nolan*/

.titleone{
    background-color: ;
    text-align: center;
    
}

.hrone{ width: 90%;
    border: 5px solid white;
  border-radius: 5px;
}
.hrtwo{ width: 80%;
    border: 2px solid white;
  border-radius: 2px;
}

/*picture for CA1isoon*/

.pictureone{
    width: 300;
    height: 300;
    background-image: url("BA2.webp");
    background-size: cover;
    margin: auto;
    border: 5px solid white;
    border-radius: 2px;
}

/*picture for CA1_Nolan*/

.picturetwo{
    width: 300;
    height: 300;
    background-image: url("BA9.webp");
    background-size: cover;
    margin: auto;
    border: 5px solid white;
    border-radius: 2px;
}

/*Information */

.history{
    width: 300;
    height: auto;
    margin: auto;
    border: 5px solid white;
    border-radius: 2px;
    
    
}

/*Layout for CA1_Nolan*/

.one{
    width: 400;
    height: 300;
    background-image: url("BA10.webp");
    background-size: cover;
    margin: auto;
    margin-top: 50;
    margin-bottom: 50;
    border: 5px solid white;
    border-radius: 2px;}
.two{
    background-color: rebeccapurple;
    width: auto;
    height: auto;
    margin: auto;
    border: 5px solid white;
    border-radius: 2px;}

/*Layout for CA1Isoon*/

div#sectiontwo{
    
    background-color:;
    height: auto;
    width: 1000;
    margin-left: 10;
    
    
}

div.titlemovie{
    
    background-color: ;
    height: 50;
    width: 260;
    margin: 10;
    margin-bottom: 0;
    text-align: ;
    
}

div.movie{
    
    background-color: ;
    height: 50;
    width: 400;
    margin: 10;
    float:left;
    margin-top: 160;
    margin-left: 100;
    
}

div.video{
    
    background-color: ;
    height: 200;
    width: 360;
    border: 2px solid white;
    border-radius: 2px;
    margin: 10;
    float:left;
    
}


div.shotstory{
    
    background-color: rebeccapurple;
    height: auto;
    width: 785;
    border: 2px solid white;
    border-radius: 2px;
    margin: 10;
    float:left;
    margin-left: 100;
}

/*make link change color
because I have to let the viewer know that it can go to another page.*/

/*link for video Trailer*/
div.video:hover, div.video:active {
    border: 3px solid red;}

/*link for scripts*/

  .custom-link {
    color: white; 
    text-decoration: none; 
  }



  .custom-link:hover {
    color: red; 
  }

/*link for mine page */

div.pictureone:hover, div.pictureone:active {
    border: 3px solid red;}

div.picturetwo:hover, div.picturetwo:active {
    border: 3px solid red;}

/*link for button
and every Scripts page has a button that takes us back to the top. 
and 
I would like to make a button that will take you to different chapters, but Nolan's script makes my computer freeze every time I edit the code. sorry(+_+)*/
.fixed-button {
    color: white; 
    text-decoration: none; 
  }

  .fixed-button:hover {
     
    background-color: aqua;
  }
/*The reason I put so many (breakpoints) is so that the audience can read it in every padform.*/
/*breakpoint 1*/

@media only screen and (max-width: 1300px) {
  div#sectiontwo {text-align: ;
      width: auto;
        margin-left: auto;
    margin-right: auto;    
}
    div.movie{
    margin-left: 10;
}

div.shotstory{
    margin-left: 10;
}
}

/*breakpoint 2*/

@media only screen and (max-width: 1100px) {
    
    div#sectiontwo{
    width: 100%
    
    }
    div.movie{
    
    
    width: 200;
    margin: 10;
    float:none;
    margin-top: 50;
    
    
}

div.video{
    
    background-color: ;
    height: 200;
    width: 360;
    border: 2px solid white;
    border-radius: 2px;
    margin: auto;
    margin-left: 10;
    float:none;
    margin-right: 100;
    
}


div.shotstory{
    
    background-color: rebeccapurple;
    height: auto;
    width: 360;
    border: 2px solid white;
    border-radius: 2px;
    margin: 10;
    float:none;
    margin-left: 10;
}
    
}

/*breakpoint 3*/

@media only screen and (max-width: 800px) {
    
  div#background{

    height: auto;
    width: auto;
    display:flow-root;
    margin-left: 0;
    margin-right: 0;
        
}
      div#sectionone{
    background: rgba(207, 189, 162, 0);
    height: auto;
    width: auto;
    border-right: none;
    border-radius: none;
    margin: 0;
          justify-content: center;
}
    
    div#sectiontwo{
    
    background-color:;
    height: auto;
    width: auto;
    margin-left: auto;
    min-width: auto;
    justify-content: center;
}

div.titlemovie{
    
    background-color: ;
    height: 50;
    width: auto;
    margin: auto;
    margin-bottom: 0;
    text-align: center;
    margin-top: 50;
    
}

div.movie{
    
    background-color: ;
    height: 50;
    width: auto;
    margin: auto;
    float: none;
    margin-top: 50;
    margin-left: auto;
    text-align: center;
}

div.video{
    
    background-color: ;
    height: 200;
    width: 360;
    border: 2px solid white;
    border-radius: 2px;
    margin: auto;
    float:none;
    margin-top: 10;
    
}


div.shotstory{
    
    background-color: rebeccapurple;
    height: auto;
    width: auto;
    border: 2px solid white;
    border-radius: 2px;
    margin: auto;
    float:none;
    
    margin-top: 50;
    
}
   

    
}