html{
   height: 100vh;
   width: 100vw;
   overflow-x: hidden;
}
body{
   height: 100vh;
   width: 100vw;
   background-color: rgba(255, 255, 255, 1);     
}
.folio{
height: auto;
left: 10%;
right: 10%;
position: absolute;
display: inline-grid;
justify-items: center;

/*
width:fit-content;  | edge - ei toimi siksi display:inline-blog or table | width:auto 
width: -moz-fit-content; */
background-color: rgb(255, 255, 255);
overflow: hidden;
}
a{
left: 45%;
position: unset;
font-size:24px;
line-height: normal;
color: rgba(27,27,27,0.6);
text-decoration: none
}
h1{
color: rgb(0, 0, 0);
background-color: rgba(255, 255, 255);
text-align:left;
margin-left:inherit; 
height: 15%;
font-size: 45px;
text-decoration: unset; 
font-family: 'Special Elite', cursive;
}
/*
hr{
left: 15%;
position: absolute;
width: 50%;
border-color: rgb(0, 0, 0);
background-color: rgb(0, 0, 0);
color: rgb(0, 0, 0);
height: 1px;
border: 0;
margin: 1em 0;
padding: 0;
} */
.verho{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color:rgba(0,0,0,0.8);
display: none;
}
#box{
left: 10%;
right: 10%;
position: relative;
height: 100%;
width: 80%;
background-color:rgba(255,255,255,1);
}
#open {
  display: block;
}
#menuArrow{
  color: rgb(109, 105, 105);
  font-size: 50px;
  font-family: Nanum Gothic;
  cursor: pointer;
  position: fixed;
  left: 95%;
  top: 50%;
  z-index: 2;
}
#screen{
position: relative;
/*left: 10%;
right: 10%;
border: 1px solid black;
height: 100%;
width: 80%;*/
width: 100%;
/*height: 300vh; */
border: none;
}
#screeni{
  position: relative;
  overflow: auto;
  height: 100%;
  width: 100%;
}

#comFrame{
border: 0;
left:2%;
}
#exit{
  position: absolute;
  top: 1%;
  left: 1%;
  background-color: #86cd52ad;
  border-radius: 5px;
  color: rgb(255, 255, 255);
  padding: 12px 16px;
  font-size: 16px;
  cursor: pointer;
}
#caption{
  cursor: pointer;
  margin-left: 10%;
}
#caption +span{
  margin-left: 
  50px;color:darkgray;
  font-family: 'Nanum Gothic';
  font-size: 40px;
  font-weight: 100;  
  font-weight: 100;
}
#caption +span span{
  font-size: 20px; 
  color: #646464; 
  top: -5px; 
  margin-left: -7px;
  position: relative; 
  cursor: pointer;
}
#searchBar{
  position: absolute;
  top: 7%;
  right: 4%;
  width: 30%;
  height: auto;
  padding: 4px;
  background-color: rgb(255,255,255);
  border-radius: 10px;
  border-style: solid;
  outline: none;
  border: #d1aebbfc;
  border-style: solid;
  }
#summary{
  position: relative; 
  margin-left: 50px;
  font-family: 'Special Elite';
  color: #423b33;
}
#index{
  position: relative;
  top: 18%;
  margin-left: 100%;
  height: auto;
  padding: 1%;
  background-color: rgba(255,255, 255, 0.0);
  border-radius: 25px;
  }
#index span {  
  text-align: left;
  margin: 0;  
  /* overflow: hidden;*/
  font-size: x-large;
  font-style: italic;
  color: rgba(0,0,0,1);;
  
}
#index ul {
  list-style-type: none;
  text-align: left;
  margin: 0;  
 /* overflow: hidden;*/
   display: block;
  background-color:rgba(247,247,247,1);  
}
#index ul a:hover {    
  background-color:rgb(120, 180, 84);  
}
li {
font-family: 'Special Elite';
font-size: large;
color: #000;
margin-top: 1rem;
}
#index li {   
  font-size: larger;
  color: rgb(192, 185, 185);
 /* list-style-type: none; */
}
#index li:hover {
  background-color: rgb(119, 84, 180);
}
#index li a {
  display: contents;
  font-size: medium; 
  color: rgba(0,0,0,1);
}
#index li a:hover {
  background-color: rgb(120,180,84);
}
#indexTitle{
  font-family:Special Elite; 
  left: inherit;  
  position: relative;
  color: black;  
}
#sideLine{
  display: flex;
  align-items: center;
  flex-direction: column;
}
#sideLine a{
  font-size: x-large;
  font-family: 'Special Elite';
  padding: 20px;
  top: 50px;
}
#sideLine li{
  list-style: none;
}

#low{
position: absolute;
left: 70vw;
top: 12%;
/* width: 100%; */
height: 10%;
padding-top: 1%;
}
#low ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 1);
}
#low li {
  float: left;
}
#low li a {
  display: block;
  color: rgb(0, 0, 0);
  text-align: center;
  padding: 16px;
  text-decoration: none;
}
#low li a:hover {
  background-color: rgb(168, 225, 243);
}
#commentForm {
  display: table;
  position: static; 
  margin-left: 10%;
  top: 30%;
}
#comment{
  position:relative;
  
}
#showComments {
  width: 50%; 
  color: white;
  margin-left: auto;
  margin-right: auto;   
}
#cSend {
  border: none;
  color: rgb(255,255,255);
  background: rgb(212, 21, 85);
  padding: 3px 10px;
}
#commAria{
  background: rgb(0 0 0 / 0.9);
  position: fixed;  
  height: 100%;
  width: 100%;
  left: 0;
  top: 30%;
  display: none;
}
.closeCommAriaBtn{  
  display: table;
  position: relative;
  color: white;
  font-size: 45px; 
  cursor: pointer;
}
#bookMarks{
  font-family: 'Special Elite';
  position: relative;
  left: 5%;
  color: #000;
  font-size: x-large;
  list-style: disc;
}
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  color: bisque;
  background-color: #111111eb;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 18px;
  color: #818181;
  display: block;
  transition: 0.3s;
  left: auto;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
  color: white;
  cursor: pointer;
}
.sidemenu {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 100%;
  color: bisque;
  background-color: #eaf1f3d6;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 0px;
  display: block;
}

.sidemenu a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 18px;
  color: #460707;
  display: block;
  transition: 0.3s;
  left: auto;
}

.sidemenu a:hover {
  color: #000;
}

.sidemenu .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
@media screen and (max-width: 800px) {
  #low {
      left: 90%;        
  }
  #searchBar {
    top: 1%;
    left: 50%;
    width: 40%;
  }
  #index {
  position: absolute;
  left: 90%;
  width: 80%;
  }
}
@media screen and (max-width: 600px) {
  #menuArrow{
  left: 90%;
  }
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

.note{
  cursor: pointer;
}
#hline {
   /* border: 0;
    height: 0; 
    box-shadow: 0 0 10px 1px red; 
    left: 4%;
    width: 60%; */
 /*   
    height: 12px;
    border: 0;
    background-color: #ff00003d; */
    border: 0;
    height: 6px;
    background: rgb(51, 51, 51);
    background-image: linear-gradient(to right, rgb(253, 253, 253), rgb(211, 233, 243), rgb(253, 253, 253));
}
img:hover{
  /*-webkit-transition: all 0.5s; */
  -ms-transform: scale(2);
  -webkit-transform: scale(2);
  -o-transform: scale(2);
  transform: scale(2);  
  transition: all 0.5s; 
  }
  footer p{
  color: steelblue;
  float: left;
  }