home.css

  body{
      margin: 0;
      padding: 0;
  }

  #box1{
      height: 120vh;
      width: 100%;
      background-image: url(i1.jpg);
      background-size: cover;
      display: table;
      background-attachment: fixed;
  }

  #box2{
      height: 130vh;
      width: 100%;
      background-image: url(i2.jpg);
      background-size: cover;
      display: table;
      background-attachment: fixed;
  }

  #box3{
      height: 122vh;
      width: 100%;
      background-image: url(snake.gif);
      background-size: cover;
      display: table;
      background-attachment: fixed;
  }

  #box4{
          height: 100vh;
          width: 100%;
          background-image: url(pong.gif);
          background-size: cover;
          display: table;
          background-attachment: fixed;
  }

  #box5{
      width: 100%;
      background-size: cover;
      display: table;
      background-attachment: fixed;
    }

  h1{
      font-family: Futura, "Trebuchet MS";

      text-shadow: 2px 2px black;


         0 3px 0 lightblue,
         0 5px 0 black,
         0 6px 1px rgba(0,0,0,.1),
         0 0 5px rgba(0,0,0,.1),
         0 1px 3px rgba(0,0,0,.3),
         0 3px 5px rgba(0,0,0,.2),
         0 5px 10px rgba(0,0,0,.25),
         0 10px 10px rgba(0,0,0,.2),
         0 20px 20px rgba(0,0,0,.25);

      font-size: 55px;
      color:#ade6e6;
      margin: 50px;
      text-align: center;
      display: table-cell;
      vertical-align:middle;
      padding:hsl(0, 90%, 80%); px:100;
    }

  a{
    color: lightblue;
  }

  .topnav {
    position: relative;
    background-color: #333;
    overflow: hidden;
    z-index: 99;
  }

  /* Style the links inside the navigation bar */
  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  /* Change the color of links on hover */
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }

  /* Add a color to the active/current link */
  .topnav a.active {
    background-color: #4CAF50;
    color: white;
  }

  /* Centered section inside the top navigation */
  .topnav-centered a {
    float: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* Right-aligned section inside the top navigation */
  .topnav-right {
    float: right;
  }



  /* Responsive navigation menu - display links on top of each other instead of next to each other (for mobile devices) */
  @media screen and (max-width: 600px) {
    .topnav a, .topnav-right {
      float: none;
      display: block;
    }

    .topnav-centered a {
      position: relative;
      top: 0;
      left: 0;
      transform: none;
    }
  }


  /*---------------------NEWS(articles)-------------------*/
    .art-boxed{
      border: 2px solid green;
      padding: 10px;
      color: white;
    }
  /*--------------------------------------------*/
  * {box-sizing: border-box;}
  body {font-family: Verdana, sans-serif;}
  .background_home{
    background-image: url(Back2_home.jpg) ;
    height: 12000 vh;
  }
  .mySlides {display: none;}
  img {vertical-align: middle;}

  /* Slideshow container */
  .slideshow-container {
    padding-top: 50px;
    padding-right: auto;
    padding-bottom: 50px;
    padding-left: auto;
    width:90%;
    height: 1200px;
    position: relative;
    margin: auto;
    text-align:center;
    }

  /* Caption text */
  .text {
    color: #f2f2f2;
    font-size: 35px;
    padding: 8px 8px;
    position: absolute;
    bottom: 60px;
    width: 100%;
    text-align: center;
  }

  /* Number text (1/3 etc) */
  .numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
  }

  /* The dots/bullets/indicators */
  .dot {
    height: 15px;
    width: 15px;
    margin: -100 2 60px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }

  .active {
    background-color: #717171;
  }

  /* Fading animation */
  .fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
  }
  img {
    object-fit: cover;
}

  @-webkit-keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
  }

  @keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
  }

  /* On smaller screens, decrease text size */
  @media only screen and (max-width: 300px) {
    .text {font-size: 11px}
  }