/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */




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

  

  }






@keyframes infiniteScroll {
  from {transform: translateX(30%)}
  to {transform: translateX(-50%)}
  }
  
#scrolling-container {
  width: 100%;
  overflow-x: hidden;
  margin: 0 5px 0 0;
  }
  
  
.horizontal-scrolling-items {
  display: flex;
  font-size: 14px;
  font-family: 'Vieytes', sans-serif;
  color: #cbbee4;
  margin: 0 0 10px 0;
 
  width: 2500px;
  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 {

text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  overflow: hidden;
  display: block;

}


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



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






.container{
 max-width: 1220px;
 margin: 1px auto;
 position: relative;
 }
 

.col1 {
 float: left;
  width: 47%;
  margin: 0 0 0 15px;

}
.col2 {
 float: left; 
  width: 46%;
  margin: 0 15px 0 15px;


}

/* Clear floats after the columns */
.row:after {
  width:720px;
  display: table;
   clear: both;
  
}



  .chcol1{
  float: left;
  width: 198px;
  text-align: center;
  margin: 0 0 0 25px;
  }
  
  .chcol2{
  float: left;
  width: 198px;
  text-align: center;
  margin: 0 25px 0 25px;
  }
  
  .chcol3{
  float: left;
  width: 198px;
  text-align: center;
  }
  
#box1{
        float:left;
        width:250px;
        background-color:#f3edff;
        margin: 0px 2px 0px 0px;
        border-color:#cbbee4;
        border-style: solid;
        border-radius: 3px;
        padding: 0px 0px 0px 0px;
}

#box2{
        float:left;
        width:100%;
        max-width: 694px; 
        background-color:#f9f6ff;
        margin: 0px 2px 0px 2px;
        border-color:#cbbee4;
        border-style: solid;
        border-radius: 3px;
        padding: 10px 0px 20px 0px;
}

#box3{
        float:right;
        width: 250px;
        background-color:#f3edff;
        margin: 0px 0px 0px 2px;
        border-color:#cbbee4;
        border-style: solid;
        border-radius: 3px;
        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;
  text-transform: uppercase;
  }
 
 
h5 {
  color: #cbbee4;
  font-family: 'Vieytes', sans-serif;
  margin: 0 0 0 0px;
  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;

  }
 
 



.big-line {
  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------------------------------- */
  .vuokkogallery{
     float: left;
     padding: 20px 0 0 30px;
  shape-image-threshold: 0.9;
  shape-margin: 2%;
    } 
    

  /* ----------------------------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;
  
}



/* Add an active class to highlight the current page */
.navi-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;
}

.navi-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;
}

.navi-active:hover, .navi-inactive:hover {
  color: #af9bd5;
  background-color: transparent;
  text-decoration: underline;
}



 /* -----------------------------------------------Journal------------------------------------------------- */
 
#journalentry{
  background-color: #e8e1f6;
  border-radius: 3px;
  
  margin: 5px;
  padding: 8px 0 10px 0;
 
  border:1px solid #cbbee4;
  }
  
  .journal-line{
    height: 1px;
  background-color: transparent;
  width: 99%;
  border-color: transparent;
  margin: 0 auto;
  background-image: linear-gradient(left , #e8e1f6 2%, #E6E6E6 50%, #e8e1f6 98%);
  background-image: -o-linear-gradient(left , #e8e1f6 2%, #E6E6E6 50%, #e8e1f6 98%);
  background-image: -moz-linear-gradient(left , #e8e1f6 2%, #E6E6E6 50%, #e8e1f6 98%);
  background-image: -webkit-linear-gradient(left , #e8e1f6 2%, #E6E6E6 50%, #e8e1f6 98%);
  background-image: -ms-linear-gradient(left , #e8e1f6 2%, #E6E6E6 50%, #e8e1f6 98%);
  background-image: -webkit-gradient( linear, left bottom, right bottom, color-stop(0.02, #e8e1f6), color-stop(0.5, #cbbee4), color-stop(0.98, #e8e1f6) );
  
    }


 
 /* -------------------- Currenty Box --------------------------------------------------------------------- */
 #current{
   background-color: #e8e1f6;
   font-size:40px;
  padding: 5px 5px 0px 5px;
  margin: 8px 0 0 0;
  border:1px solid #cbbee4;
  border-radius: 3px;
 }
 
 .current-input{
   font-size: 14px;
   font-weight: lighter;
  color: #cbbee4;
  font-family: 'Vieytes', sans-serif;
  
   }
 
  .current-output{
   font-size: 14px;
   font-family: 'Vieytes', sans-serif;
   color: #af9bd5;
   padding: 0 0 7px 0;
   }
   
   .currently:link {color:#cbbee4;} 
.currently:hover {color: white;}
.currently:visited {color:#af9bd5;}

 
  /* ----------------------------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;}}