/*simple reset*/
* {
    margin: 0;  /*kaikkea mitä on koko sivulla sininen tähti */
    padding: 0;
    border: 0;
    outline: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -box-sizing: border-box;
  }
  
  /* luokka sata tähteä index sissä kaikki class star on ilmoitettu . star */
  .star {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    background: #f6f6f6;
    overflow: hidden;
    z-index: -2;
    animation: glitter 4.5s linear 0s infinite normal;
    -webkit-animation: glitter 4.5s linear 0s infinite normal;
    -moz-animation: glitter 4.5s linear 0s infinite normal;
    -ms-animation: glitter 4.5s linear 0s infinite normal;
    -o-animation: glitter 4.5s linear 0s infinite normal;
  }
  .star-top,
  .star-bottom {
    position: relative;
    display: block;
  }
  .star-top:before,
  .star-top:after,
  .star-bottom:before,
  .star-bottom:after {
    content: '';
    width: 48px;
    height: 48px;
    background: #212121;
    border-radius: 50%;
    position: absolute;
  }
  /*CSS3 pseudo class for positioning curves*/

  .star-top:before {
    top: -24px;
    left: -24px;
  }
  .star-top:after {
    bottom: -24px;
    left: 24px;
  }
  .star-bottom:before {
    top: 24px;
    left: -24px;
  }
  .star-bottom:after {
    top: 24px;
    left: 24px;
  }
  /*CSS3 keyframes for glittering effect*/
  
  @-webkit-keyframes glitter {
    0% {
      -webkit-transform: scale(1);
      opacity: 1;
    }
    25% {
      -webkit-transform: scale(0.5);
      opacity: 0;
    }
    50% {
      -webkit-transform: scale(1);
      opacity: 1;
    }
    75% {
      -webkit-transform: scale(0.5);
      opacity: 0;
    }
    100% {
      -webkit-transform: scale(1);
      opacity: 1;
    }
  }
  @-moz-keyframes glitter {
    0% {
      -moz-transform: scale(1);
      opacity: 1;
    }
    25% {
      -moz-transform: scale(0.5);
      opacity: 0;
    }
    50% {
      -moz-transform: scale(1);
      opacity: 1;
    }
    75% {
      -moz-transform: scale(0.5);
      opacity: 0;
    }
    100% {
      -moz-transform: scale(1);
      opacity: 1;
  }
  }






 
  /* toiseksi tärkein otsikko jossa voi muuttaa fronttia sekä kokoa */
  h2 {
    text-align: center;
    margin-top: 92px;
    z-index: 999999;
    position: relative;
    font-size: 45px;
    font-family: arial sans-serif;
  }
  h2 a {
    color: #fff;
  }
  body {
    background: #212121;
      text-align: center;
  background: #000;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  }
  #mainContent{
    padding: 10%; 
    
  }
  #background_image{
    /* margin-top: 10%; */
    padding: 10%;
    /* padding-bottom: 10%; */
    width:100%;
    background-color: #fff;
}
#textcontent{
  color: #fff;
  background-color: #000;
  font-weight: 400;
  margin-top: 24px;
  
  /* width:80%; */
}
#tunnit{
  font-size: large;
}
@media screen and (min-width:480px){
  #mainContent{
    width: 80%; 
    margin: auto;
    
  } 
}
  /* @media screen and (max-width:480px){
      #contentbox {
          position:relative;
              padding:32px 8px 12px;
              background-color:#fff;
              border-radius:6px;
              max-width: 500px;
              margin: 0 auto;
              text-align: center;
              margin-top: 60px;
      }
      #background_image{
          width:300;
      }

      #textcontent{
        color: #fff;
        background-color: #3498db;
        font-weight: 400;
        margin-top: 24px;   
        }

      #mainContent{
        max-width: 500px;
        }   
  } */
  /* @media screen and (min-width: 481px){
      #contentbox {
          position:relative;
              padding:32px 8px 12px;
              background-color:#fff;
              border-radius:6px;
              max-width: 1024px;
              
              text-align: center;
              margin-top: 60px;
      }

      #background_image{
          width:auto;
          height:600;
      }

      #textcontent{
        color: #fff;
        background-color: #000000;
        font-weight: 400;
        margin-top: 24px;   
        }

     #mainContent{
      max-width: 1024px;
      margin: 0 auto;
     }   
      
  } */
  p {
    text-align: justify;
    padding: 5px;
  
  }
  h1 {
    margin: 10px;
    text-align: left;
  }
  
  #contentbox a {
  color: #2A7BB1;
  text-decoration: none;
  }
  
  #contentbox a:hover {
  color: #3498db;
  text-decoration: none;
  }
  
hr{
  /*   Viiva loppuun väri valk. ja siinä 1 px  leveyttä    */
  border-top: 1px solid rgb(255, 255, 255);
  padding: 10px;
  
}

footer{
  margin-bottom: 100px;
  color:#fff;
  background-color: rgb(0, 0, 0);
  display: block;
  font-size: 10px;
}

.footerInfo{
 text-align: center; 
}
ul{
  list-style: none;
  text-align: left;
}
li{
  margin: 5px;
}