@import url("https://fonts.google.com/specimen/Varela+Round");
* {
  box-sizing: border-box;
}
body {
  background-image: url("catpaw.png");
  background-position: center;
}
img {
  width: 100%;
  height: auto;
}
.smallimage{
  max-width: 50%;
  max-height: 50%;
}
.row:after {
  content: "";
  clear: both;
  display: table;
}
[class*="col-"] {
  float: left;
  padding: 15px;
  width: 100%;
}
@media only screen and (min-width: 600px) {
  .main-box .main-box.top{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .top .box{
    margin: 10px 10px;
  }
  
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}
html {
  font-family: "Lucida Sans", sans-serif;
}
.header {
  background-color: #ffc170;
  color: #000033;
  padding: 15px;
  text-align: center;
}
 
.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.menu li {
  text-align: center;
  border: 2px solid#cc9042; /*i wanna make the border rounded D:*/
  border-radius: 12px;
  padding: 5px;
  margin-bottom: 7px;
  background-color :#ffc170;
  color: #000033;
  box-shadow: 10px 10px 5px gray;
}
.menu li:hover {
   background-color: #f6ad9d;
color: rgb(86, 41, 41);
box-shadow: 5px 5px 5px gray;
}

.aside {
  background-color: #33b5e5;
  padding: 15px;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
 
.footer {
  bottom:0;
  background-color: #ffc170;
  color: #000033;
  text-align: center;
  font-size: 12px;
  padding: 15px;
}

.koodi {
 background-color: #ffffff;
 width: 100%;
 border: 5px ;
 border-radius: 12px;
 padding: 10px;
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.kooditwo {
  background-color: #d18c57;
  width: 80%;
  border: 5px;
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }

.vari{
 color: SlateBlue;
 background-color: #e1e1fc;
 width: 100%;
 border: 5px aqua;
 padding: 10px;
 margin: 10px;
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
 
}
 
.esimerkki {
  background-color: RGB(248, 244, 253);
  width: 50%;
  border: 1px solid RGB(41, 20, 82);
  padding: 20px;
  margin: 20px;
  box-shadow: 7px 7px 5px grey;
}
 
.koodisini {
  color: darkblue;
  font-size: 130%;
}
 
.tulos {
  color: darkgreen;
  font-size: 120%;
}
.vari2{
	   color: Maroon;
     }
	 
.sini{
    color:Blue; 
	font-family: "Merriweather";
	}
	
table {
	border: 3px solid #996FA4;
	background-color: #DDD0EE;
	width: 100%;
	text-align: center;
	border-collapse: collapse;
	}
	
td {
	border: 3px solid #996FA4;
    padding: 3px 2px;
	}
	
.koodi1 {
 background-color: #000000;
 color: #ffffff;
 width: 100%;
 border: 5px aqua;
 padding: 10px;
 margin: 10px;
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

 .viesti {
   margin: auto; 
   background-color: #ffffff;
   width: 40%;
   border: 1px #6666d1;
   padding: 50px;
 }
 .teksti{
   text-align: center;	
 }
 .paluu{
   background-color: #ccccff;
   border: none;
   color: white;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 16px;
   margin: 4px 2px;
   cursor: pointer;
   padding: 7px;  
 }
 
 .menu1 ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #9999ff;
     }
 .menu1 li {
      float: left;
     }
 .menu1 li a {
      display: inline-block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
  }
  .menu1 li a:hover {
      background-color: #ccccff;
  }

  .container{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90vh;
  }
  .box{
    background: rgb(255, 255, 255);
    display: flex;
    flex-direction: column;
    padding: 25px 25px;
    border-radius: 20px;
    box-shadow: 0 0 128px 0 rgba(0,0,0,0.1),
                0 32px 64px -48px rgba(0,0,0,0.5);
  }
  .form-box{
      width: 450px;
      margin: 0px 10px;
  }
  .form-box header{
    font-size: 25px;
    font-weight: 600;
    padding-bottom: 10px;
    border-bottom: 1px solid white;
    margin-bottom: 10px;
  }
  .form-box form .field{
    display: flex;
    margin-bottom: 10px;
    flex-direction: column;
  }
  .form-box form .input input{
    height: 40px;
    width: 100%;
    font-size: 16px;
    padding: 0 10px;
    border-radius: 5px;
    border: 1px solid gray;
    outline: none;
  }
  .btn{
    height: 35px;
    background-color: #8b7354;
    border: 0;
    border-radius: 5px;
    color: #ffffff;
    font-size: 15px;
    cursor: pointer;
    transition: all .3s;
    margin-top: 10px;
    padding: 0px 10px;
  }
  .btn:hover{
    opacity: 0.80;
  }
  .submit{
    width: 100%;
  }
  .link{
    margin-bottom: 15px;
  }
  #viiva{text-decoration: none;}
  

/*****navigation***/
.nav{
  background-color: #ffd398 ;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  line-height: 60px;
  z-index: 100;
}
.right-links a{
  padding: 0 10px;
}
main{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 60px;
}
.main-box{
  display: flex;
  flex-direction: column;
  width: 70%;
}
.main-box.top{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.commentcontainer {
  background-color: white;
  border: 2px solid #d18c57;
  padding: 10px;
  border-radius: 5px;
}
.tablestyle {
  background-color: #f3a76e;
  width: 100%;
  border-collapse: collapse;
  border: 2px solid #000; /* Border color for the table */
}

.tablestyle th,
.tablestyle td {
  padding: 8px;
  border: 1px solid #000; /* Border color for cells */
}

.tablestyle th {
  background-color: #f2f2f2; /* Background color for header row */
}

.tablestyle tr:nth-child(even) {
  background-color: #f7c9a6; /* Alternate row color */
}