/* CSS Reset */
body, header, nav, main, footer, h1, div, img, ul, figure, figcaption, section, article, aside {
  margin: 0;
  padding: 0;
  border: 0;
  }
  


                    /* Style rules for body and images */
                    body {
                      background-color: #000;
                      }
                      img {
                      max-width: 100%;
                      display: block;
                      }
        * {
            box-sizing: border-box;
            }



    body {
    font-family: Arial;
    padding: 10px;
    background: #f1f1f1;
    font-size: 18px;
    }

                                
                                /* Header/Blog Title */
                                header {
                                background-color: #F1F1F1;
                                text-align: center;
                                padding: 20px;
                                }


                                header h1 {
                                font-size: 50px;
                                }


                                                            /* Style the top navigation bar */
                                                                    nav {
                                                                        overflow: hidden;
                                                                        background-color: #333;
                                                                        }
                                                                        /* Style the topnav links */
                                                                        nav a {
                                                                        float: left;
                                                                        display: block;
                                                                        color: #f2f2f2;
                                                                        text-align: center;
                                                                        padding: 14px 16px;
                                                                        text-decoration: none;
                                                                        }
                                                                        /* Change color on hover */
                                                                        nav a:hover {
                                                                        background-color: #ddd;
                                                                        color: black;
                                                                        }

                                                                        /* Create two unequal columns that floats next to
                            each other */
                            /* Left column */
                            .leftcolumn {
                                float: left;
                                width: 75%;
                                }
                                /* Right column */
                                .rightcolumn {
                                float: left;
                                width: 25%;
                                background-color: #f1f1f1;
                                padding-left: 20px;
                                }
                                /* Fake image */
                                .img {
                                background-color: #aaa;
                                width: 100%;
                                padding: 20px;
                                background-image: url(images/WebDev.jpg);
                                background-repeat: no-repeat;
                                }
                                .img1 {
                                    background-color: #aaa;
                                    width: 65%;
                                    padding: 20px;
                                    background-image: url(images/redoSelf.jpg);
                                    background-repeat: no-repeat;
                                    }
                                    .img2 {
                                        background-color: #aaa;
                                        width: 65%;
                                        padding: 20px;
                                        background-image: url(images/ItBackground.jpg);
                                        background-repeat: no-repeat;
                                        }
                                /* Add a card effect for articles */
                                .card {
                                background-color: rgb(153, 6, 6);
                                padding: 20px;
                                margin-top: 20px;
                                }
                                /* Clear floats after the columns */
                                .row:after {
                                content: "";
                                display: table;
                                clear: both;
                            }


                                     /* Add a card effect for articles */
                                     .card1 {
                                      background-color: rgb(134, 128, 128);
                                      padding: 20px;
                                      margin-top: 20px;
                                      }
                                      /* Clear floats after the columns */
                                      .row:after {
                                      content: "";
                                      display: table;
                                      clear: both;
                                  }

                                           /* Add a card effect for articles */
                                .card2 {
                                  background-color: rgb(255, 255, 255);
                                  padding: 20px;
                                  margin-top: 20px;
                                  }
                                  /* Clear floats after the columns */
                                  .row:after {
                                  content: "";
                                  display: table;
                                  clear: both;
                              }
  
      


                            


                            /* Footer */
                        footer {
                            padding: 20px;
                            text-align: center;
                            background: #ddd;
                            margin-top: 20px;
                            }


                                p.One{
                                    font-size: 25px;
                                }



                                caption.Caption{
                                    border: 2px solid black;
                                    background-color: brown;
                                    font-size: 25px;
                                  }
                                  table.Table{
                                    border:2px solid black;
                                    background-color: #800000;
                                    font-size: 20px;
                                  }

                                  h1.One {
                                    font-size: 25px;
                                    text-align: center;
                                   }   

                                   section.Section1{
                                    font-size: 22px;
                                    background-color: #7d7878;
                                   }

                                   th, td, table.ComputerUpgrade{
                                    border-color: #000000;
                                    border-style: double;
                                    text-align: center;
                                    border: 2px solid black;
                                    background-color: #7d7878;
                                   }



                                   caption.Caption{
                                    border: 2px solid black;
                                    background-color: brown;
                                    font-size: 25px;
                                  }

                                  h1.course{
                                    font-weight: bold;
                                    color: #000000;
                                  }

                                  h2.author{
                                    font-weight: bold;
                                    color: #030202;
                                  }

                                  button.button{
                                   
                                    height: 75px;
                                    width: 75px;
                                  }





                                  

              /* Media Query for Large Desktop Viewports */
          @media screen and (min-width: 1921px) {
            #container {
            width: 1920px;
            margin: 0 auto;
            }
            }
            /* Media Query for Print */
            @media print {
            body {
            background-color: #fff;
            color: #000;
            }
            }

            p.P1{

                font-weight: bold;
            }




            

#banner {
  background-color:yellow;
  text-align: center;
  }
  header {
  background-image: url(images/onePiece.jpg);
  background-repeat:no-repeat; /* Do not repeat the image */
  color: lightblue;
  background-size: cover; 
  
  
  /* Resize the background image to cover the entire container */

  /*Comments: You may use your own image from local. Go to W3schools : CSS : CSS Image-Sprites for
  more image from CSS. (https://www.w3schools.com/css/css_image_sprites.asp ) You may use other
  format like below: background-position:left-side; */

  
  }
  #banner h1 {
  color: red;
  }
  #banner h2.author {
  color: red;
  }
  #banner p.homepage {
  background-color:blue;
  }




                                                                                          /* For tablets: */
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each
other */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {
  width: 100%;
  padding: 0;
  }
  }


  /* For mobile phones: */
  /* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each
  other */
  @media screen and (max-width: 400px) {
  nav a {
  float: none;
  width: 100%;
  }
  }



      /* For mobile phones: */
      [class*="col-"] {
        width: 100%;
        }

                          @media only screen and (min-width: 600px) {
                          /* For tablets: */
                          .col-s-1 {width: 8.33%;}
                          .col-s-2 {width: 16.66%;}
                          .col-s-3 {width: 25%;}
                          .col-s-4 {width: 33.33%;}
                          .col-s-5 {width: 41.66%;}
                          .col-s-6 {width: 50%;}
                          .col-s-7 {width: 58.33%;}
                          .col-s-8 {width: 66.66%;}
                          .col-s-9 {width: 75%;}
                          .col-s-10 {width: 83.33%;}
                          .col-s-11 {width: 91.66%;}
                          .col-s-12 {width: 100%;}
                          }
                          
                                                      @media only screen and (min-width: 768px) {
                                                      /* For desktop: */
                                                      .col-1 {width: 8.33%;}
                                                      .col-2 {width: 16.66%;}
                                                      .col-3 {width: 25%;}
                                                      .col-4 {width: 33.33%;}
                                                      .col-5 {width: 41.66%;}
                                                      .col-6 {width: 50%;}
                                                      .col-7 {width: 58.33%;}
                                                      .col-8 {width: 66.66%;}
                                                      .col-9 {width: 75%;}
                                                      .col-10 {width: 83.33%;}
                                                      .col-11 {width: 91.66%;}
                                                      .col-12 {width: 100%;}
                                                      }