index.css

body {
  background-color: #87CEEB; /*background-image: url("snow3.jpg");*/
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  background-image: url("winter.jpg");
     }

h1{color:#191970;}

/* for HOME PAGE*/

    /* Container holding the image and the text */
.topic {
    position: relative;
    text-align: center;
    }

    /* Centered text */
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }

.hi {
    font-size: 40px;
    font-weight: bold;
    margin: 30px;
    background-color: #AFEEEE;
    border: 1px solid black;
    opacity: 0.7;
    }

.hi2 {
    font-family: "calibri";
    font-size: 20px;
    color: black;
    background-color: #ffffff;
    opacity: 0.7;
    }

/*FOR NAVIGATION BAR*/

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: black;
    }

li { float: left; }

   li a, .dropbtn {
       display: inline-block;
       color: white;
       text-align: center;
       padding: 14px 16px;
       text-decoration: none;
       }

  /*dropdown menu*/
   li a:hover, .dropdown:hover .dropbtn {
       background-color: pink;
       }

   li.dropdown {
       display: inline-block;
       }

   .dropdown-content {
       display: none;
       position: absolute;
       background-color: #f9f9f9;
       min-width: 160px;
       box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
       z-index: 1;
       }

   .dropdown-content a {
       color: black;
       padding: 12px 16px;
       text-decoration: none;
       display: block;
       text-align: left;
       }

   .dropdown-content a:hover {background-color: #f1f1f1}

   .dropdown:hover .dropdown-content {display: block;}

/*for SOCIAL MEDIA*/
.fa {
     float:right;
     padding: 15px;
     font-size: 30px;
     width: 20px;
     text-align: center;
     text-decoration: none;
     border-radius: 70%;
     }

   .fa:hover { opacity: 0.7; }

   .fa-facebook {
         background: #3B5998;
         color: white;
         }

   .fa-twitter {
         background: #55ACEE;
         color: white;
         }

   .fa-snapchat {
         background: #FFFF00;
         color: black;
         }

   .fa-pinterest {
         background: #FF0000;
         color: white;
         }

  .fa-instagram {
         background: #FF00FF;
         color: white;
         }

/* for FUN FACTS */

.funfact {padding: 50px 0px 100px 0px;}
.sadtruth{padding: 0px 0px 100px 0px;}

   /* Create three equal columns that floats next to each other */
 .fct {
        float: left;
        grid-template-columns: auto auto auto auto;
        grid-gap: 50px;
        width: 32.0%;
        height: auto;
        text-align: justify;
        text-align-last: center;
        padding: 10px;
        }

  p {  padding:14px; }

   /* Clear floats after the columns */
 .ffs:after {
       content: "";
       display: table;
       clear: both;
       }

  /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
     @media screen and (max-width: 500px) {
       .fct {width: 100%; }
       }


/*for PENGUIN PICS*/
 .container {
       position: relative;
       width: 25%;
       height: 300px;
       float: left;
       }

 .container1 {
       position: relative;
       width: 33.33%;
       height: 300px;
       float: left;
       }

 .container1:hover .image { opacity: 0.3; }
 .container1:hover .middle { opacity: 1; }

 .image {
       opacity: 1;
       display: block;
       width: 100%;
       height: 300px;
       transition: .5s ease;
       backface-visibility: hidden;
       border-radius: 8px;
       }

.middle {
       transition: .5s ease;
       opacity: 0;
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       -ms-transform: translate(-50%, -50%);
       text-align: center;
       }

.container:hover .image { opacity: 0.3; }
.container:hover .middle { opacity: 1; }

.text {
      background-color: #4CAF50;
      color: white;
      font-size: 16px;
      padding: 16px 32px;
      }

    /* The Modal (background) */
    .modal {
            display: none;
            position: fixed;
            z-index: 1;
            padding-top: 100px;
            left: 0;
            top: 0;
            width: 100%;
            height:100%;
            overflow: auto;
            background-color: black;
          }

      /* Modal Content */
    .modal-content {
            position: relative;
            background-color: #fefefe;
            margin: auto;
            padding: 0;
            width: 90%;
            max-width: 1200px;
            }


      /* The Close Button */
    .close {
            color: white;
            position: absolute;
            top: 10px;
            right: 25px;
            font-size: 35px;
            font-weight: bold;
            }

            .close:hover,
        .close:focus {
          color: #999;
          text-decoration: none;
          cursor: pointer;
        }

        /* Hide the slides by default */
        .mySlides {
          display: none;
        }

        /* Next & previous buttons */
        .prev,
        .next {
          cursor: pointer;
          position: absolute;
          top: 50%;
          width: auto;
          padding: 16px;
          margin-top: -50px;
          color: white;
          font-weight: bold;
          font-size: 20px;
          transition: 0.6s ease;
          border-radius: 0 3px 3px 0;
          user-select: none;
          -webkit-user-select: none;
        }

        /* Position the "next button" to the right */
        .next {
          right: 0;
          border-radius: 3px 0 0 3px;
        }

        /* On hover, add a black background color with a little bit see-through */
        .prev:hover,
        .next:hover {
          background-color: rgba(0, 0, 0, 0.8);
        }

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

        /* Caption text */
        .caption-container {
          text-align: center;
          background-color: black;
          padding: 2px 16px;
          color: white;
        }

        img.demo {
          opacity: 0.6;
        }

        .activate,
        .demo:hover {
          opacity: 1;
        }

        img.hover-shadow {
          transition: 0.3s;
        }

        .hover-shadow:hover {
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }
  /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
      @media screen and (max-width: 500px) {
        .container {width: 100%; }
          }

      @media screen and (max-width: 500px) {
        .container1 {width: 100%; }
          }


/*-- for SAVE PENGUINS --*/
.savepenguins{
        text-align: justify;
        text-align-last: center;
        }
    img {border-radius: 8px;}


/* FOR ABOUT US*/
  /* create three equal columns */

    .column {
         float: left;
         width: 33.33%;
         }

  /* Clear floats after the columns */
    .row:after {
         content: "";
         display: table;
         clear: both;
         }

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
      @media screen and (max-width: 600px) {
        .column {width: 100%; }
        }

    .column
        img { border-radius: 50%; }

    .center {
       display: block;
       margin-left: auto;
       margin-right: auto;
       width: 50%;
      }
      span {
          background-color: red;
      }

/*-- to the TOP BUTTON --*/

#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    left: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: red; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 12px; /* Rounded corners */
    transition: all 0.5s;
    font-size: 16px; /* Increase font size */
    }

#myBtn:hover {
    background-color: #555; /* Add a dark-grey background on hover */
    }

/*-- create footer --*/
.footer {
   position: not relative;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: black;
   color: white;
   text-align: center;
   }