/*--------------------------MOBILE----------------------------*/




body {
  
  background-image: url("https://i.imgur.com/yvGVTTF.png");
  background-color: #6554d6;
  color: black;
  font-family: Verdana;
 width:auto;

  

  }



/*-------------------- Scrollaava päivitysjuttu -----------------------*/

@keyframes infiniteScroll {
  from {transform: translateX(30%)}
  to {transform: translateX(-50%)}
  }
  
#scrolling-container {
  width: 100%;
  overflow-x: hidden;
  margin: 6px 0 0 0;
  }
  
  
.horizontal-scrolling-items {
  display: flex;
  font-size: 13px;
  font-family: 'Vieytes', sans-serif;
  color: #cbbee4;
  margin: 0 0 10px 0;
 
  width: 1300px;
  animation-name: infiniteScroll;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  }
  
  
.horizontal-scrolling-items__item {
  white-space: nowrap;
  }




ul, li {
  
  list-style-type: none;
  }

#header {
  background-image:url("https://i.imgur.com/7BplpiD.png");
  text-align: center;
  width: 100%;
  overflow: hidden;
  display: block;

}


#container {
text-align: center;
margin: 0 auto;
position: relative;
color: white;
width: 2500px;
display: grid;
grid-template-columns: 600px 600px 600px;
}



#main {
 width: 100%;
 display: block;
 margin: auto;
 text-align: center;
 overflow-x: hidden;
 }






.container{
 max-width: 629px;
 margin: 1px auto;
 position: relative;
 }
  
#box1{
        float:left;
        width:98%;
        background-color:#f3edff;
        margin: 0px 1px 0px 1px;
        border-color:#cbbee4;
        border-style: solid;
        border-radius: 1px;
        padding: 0px 0px 0px 0px;
}

#box2{
        float:left;
        width:98%;
        max-width: 694px; 
        background-color:#f9f6ff;
        margin: 0px 1px 0px 1px;
        border-color:#cbbee4;
        border-style: solid;
        border-radius: 1px;
        padding: 00px 0px 00px 0px;
}

#box3{
        float:right;
        width: 98%;
        background-color:#f3edff;
        margin: 0px 1px 0px 1px;
        border-color:#cbbee4;
        border-style: solid;
        border-radius: 1px;
        padding: 0px 0px 0px 0px;
}


/* ---------------Tekstit--------------- */

h1 {
  color: #af9bd5;
  font-family:'AuX DotBitC Xtra', sans-serif;
  font-size: 30px;
  margin: 15px 0 10px 0;
  text-align: center;
  }
  
h2 {
  color: #cbbee4;
  font-family:'AuX DotBitC Xtra', sans-serif;
  font-size: 25px;
  margin: 15px 0 10px 0;
  text-align: center;
  letter-spacing: 0px;
  }
  
h3 {
  color: #cbbee4;
  font-family: 'AuX DotBitC Xtra', sans-serif;
  margin: 17px 0 0 0;
  font-size: 25px;
  }
 
 
h5 {
  color: #cbbee4;
  font-family: 'Vieytes', sans-serif;
  margin: 0 0 0 20px;
  text-align: left;
  font-size: 14px;
  }
  
  
h6 {
  color: #cbbee4;
  font-family: 'Vieytes', sans-serif;
  margin: 0 0 0 0px;
  text-align: center;
  font-size: 14px;
  letter-spacing: 0px;

  }
  
  p {
  color: #af9bd5;
  font-family: 'Vieytes', sans-serif;
  margin: 0 0 0 0px;
  text-align: center;
  font-size: 14px;
  letter-spacing: 0px;

  }
 
 



hr {
  height: 1px;
  background-color: #E6E6E6;
  width: 99%;
  border-color: transparent;
  margin: 0 auto;
  background-image: linear-gradient(left , #f9f6ff 2%, #E6E6E6 50%, #f9f6ff 98%);
  background-image: -o-linear-gradient(left , #f9f6ff 2%, #E6E6E6 50%, #f9f6ff 98%);
  background-image: -moz-linear-gradient(left , #f9f6ff 2%, #E6E6E6 50%, #f9f6ff 98%);
  background-image: -webkit-linear-gradient(left , #f9f6ff 2%, #E6E6E6 50%, #f9f6ff 98%);
  background-image: -ms-linear-gradient(left , #f9f6ff 2%, #E6E6E6 50%, #f9f6ff 98%);
  background-image: -webkit-gradient( linear, left bottom, right bottom, color-stop(0.02, #f9f6ff), color-stop(0.5, #cbbee4), color-stop(0.98, #f9f6ff) );
  }
  
  
  
.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  }
  
  
  #welcome-message{
    width: 600px;
    text-align: center;
    margin: 0 auto;
  }
 /* ----------------------------Kuvat------------------------------- */
 
 .avatar img{
   border-radius: 3px;
   }
   
   
   
   
   
   
   
     /* ----------------------------Pagedoll------------------------------- */
   
   @media only screen and (min-width:360px){
    .pgdoll {
    background-repeat:no-repeat; position:fixed; z-index:100; cursor:default;
    bottom: 20px; left: 200px;
 
    background-image: url(https://i.imgur.com/SmsiDmm.gif);
    height: 200px;
    width: auto;
    }
}
@media only screen and (max-width:992px){
    .pgdoll{display:none;}
}
  /* ----------------------------Napit------------------------------- */
  
.button-overlay {
  position: relative;
  top: 0%;
  left: 0%;
  display: inline-block;
  width: 250px;
  height: 50px;
  text-align: center;
  align-items: center;
  
}

.button-overlay button {
  position: absolute;
  top: 50%;
  left: 52%;
  transform: translate(-50%, -50%);
  padding: 0;
  background-color: transparent;
  border-radius: 5px;
  border-color: transparent;
  box-shadow: none;
  text-align: center;
  align-items: center;
  width: 200px;
  height: 50px;
  
}



.a {
  position: relative;
  top: 0%;
  left: 0%;
  width: 200px;
  height: 50px;
  text-align: center;
  margin: 0 auto;
  align-items: center;
 
}

/* Add an active class to highlight the current page */
.active {
  color: #af9bd5;
  width: 200px;
  height: 50px;
  font-family: 'Vieytes', sans-serif;
  margin: 0 auto;
  position: relative;
  top: 0%;
  left: 0%;
  text-align: center;
  align-items: center;
  font-size: 14px;
  letter-spacing: 10px;
  text-decoration: none;
  padding: 0;
  text-shadow: #af9bd5 0,5px 0 10px;
}

.inactive {
  color: white;
  width: 200px;
  height: 50px;
  align-items: center;
  position: relative;
  top: 0%;
  left: 0%;
  font-family: 'Vieytes', sans-serif;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  font-size: 14px;
  letter-spacing: 10px;
  text-decoration: none;
}

 /* ----------------------------Vieraskirja------------------------------- */
 
 
  /* -------------------- Currenty Box --------------------------------------------------------------------- */
 .current {
   background-color: red;
   border-radius: 0px;
   color: green;
   font-size:40px;
  
  margin: 0px;
  padding: 0px 0 0px 0;
 
  border:1px solid #cbbee4;
 }
 
 
 
 
  /* ----------------------------Mobile responsive------------------------------- */
   .mobileHide { display: inline;}

   /* Smartphone Portrait and Landscape */

   @media only screen

   and (min-device-width : 320px)

   and (max-device-width : 480px){  .mobileHide { display: none;}}