html, body {
     margin: 0;
     padding: 0;
     border: 0;
     height: 100%;
     font-size: 100%;
 }

 .tausta-ruutu {
     background-color: #FFFFFA;
     
     background-attachment: relative;
     background-position: bottom right, top left;
     background-repeat: no-repeat;
     background-size: 34%, 40%;
     height: 100%;
 }

 .container {
     width: 100%;
     height: 100%;
     /*smooth scroll*/
     /*max-width: 1200px;*/
     margin-left: auto;
     margin-right: auto;
     scroll-behavior: smooth;
 }

 .text-container {
     max-width: 800px;
     max-height: 1080px;
     margin: auto;
     z-index: 200;
 }
 li:hover, a:hover {
    color: #191919
 }


 


 .center {
     position: relative;
     top: 50%;
     left: 50%;
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
 }

 h1 {
     text-align: left;
     font-family:'Chakra Petch', sans-serif, "Courier New";
     font-size: 32px;
     color: #191919;
     animation-duration: 2s;
 }

 h2 {
     text-align: center;
     font-family: 'Chakra Petch', sans-serif, "Courier New";
     font-size: 32px;
     color: #191919;
     margin-top: 70px;

 }

 img.v {
     float: left;
     margin-left: 80px;
     margin-top: -60px;
 }
 img.k {
    float: center;
    margin-left: 500px;
    margin-top: 60px;
}
.social {
width: 30%;
}
 ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
     background-color:  #FFFFFA;
     overflow: hidden;
     position: fixed;
     top: 0;
     width: 100%;
     z-index: 500;
     animation-duration: 2s;
     align-items: flex-start;
 }

 li {
     float: left;
     padding: 30px 56px 0px 56px;
 }

 .navi {
     box-sizing: border-box;
/*display: block;*/
     font-family: 'Chakra Petch', sans-serif, "Courier New";
     font-size: 17px;
     color: #999;
    align-items: center; 
     text-align: center;
 }

/* li a:hover {
     background-color: #AFD645;
     
 }*/

 section {
     display: grid;
/*      flex-direction: column; */
     /*     align-items: center; */
     /*   justify-content: center; */
     /*    text-align: left; */
     width: 100%;
     height: 100vh;
     background-color: #FFFFFA;
    
     background-attachment: relative;
     background-position: bottom right, top left;
     background-repeat: no-repeat;
     background-size: 34%, 40%;
     height: 100%;
     scroll-snap-align: center;
 }

 @media (max-width: 600px) {
     li a {
         display: block;
         font-family: 'Chakra Petch', sans-serif, "Courier New";
         font-size: 106%;
         color: #999;
         padding: 14px 26px;
         text-align: center;
     }
     h1 {
         text-align: left;
         font-size: 106%;
     }
 }

 /* .svg{
position: absolute;
bottom: -100vh;
transform-style: preserve-3d;
} */

 /* #/* tausta-kaavat {
    background-image: url(kuvat/kolmiokys.svg), url(kuvat/kaava2.svg), url(kuvat/kolmiolasku.svg), url(kuvat/suttu.svg);
    background-position: 1% 99%, 27% 97%, 100% 3%, 77% 1%;
    background-repeat: no-repeat;
    background-size: 20%, 14%, 20%, 10%;
    height: 100%; 
}*/