body{
        background-image: url('kuvakuva.png'); 
        text-align:center; 
        font-family: Comic Sans MS; 
        color: grey;
              opacity: 0;
      transition: opacity 0.5s ease-in-out;
        
        }
    
        
   .loaded {
      opacity: 1;
    }
    
    
    
        .imputti{
            padding: 6px;
            
            }
    
    



    
    
    
    
    a{
        color: red;
        
    }
    
    

    
    
    
    
    
    
    
    h4{
        margin: 0;
        margin-bottom: 8px; 
        color: red;
        
    } 

    
    div{
        margin: 1px auto;
    }
    
    input {
        border-radius: 6px;
    }
    
    
    .input1{
        display: inline-block; 
        background-color:rgba(255, 106, 0, 0.07); 
        border: 0px solid grey; 
        border-radius: 11px; 
        padding: 2px 2px; 
        margin: 2px 0px;
        color: grey;
    }
    
    
    .output1{
        display: inline-block; 
        background-color:rgba(235, 188, 245, 0.0); 
        border: 1px dotted rgba(128, 128, 128, 0.5); 
        border-radius: 11px; 
        padding: 2px 2px; 
        margin: 2px 0px;
        color: grey;
    }
    
    
    .perus1{
        display: inline-block; 
        background-color:rgba(0, 0, 0, 0.03); 
        border: 0px solid black; 
        border-radius: 20px; 
        padding: 10px; 
        vertical-align: top;
    }
    
    
    
    
    
    
    
    
    
  /* Napin ulkoasu ja animaatiot */
    button.toggle {
      padding: 10px 20px;
      font-size: 14px;
      border: none;
      background-color: #ff0000;
      color: white;
      border-radius: 8px;
      cursor: pointer;
      transition: background-color 0.3s ease, transform 0.1s ease;
      text-shadow:
  -1px -1px 0 black,
   1px -1px 0 black,
  -1px  1px 0 black,
   1px  1px 0 black;
    }

    button.toggle:hover {
      background-color: #393939;
      transform: scale(1.05);
    }

    button.toggle:active {
      transform: scale(0.95);
    }

    .pulse {
      animation: pulse 0.3s ease;
    }

    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.08); }
      100% { transform: scale(1); }
    }

    /* Piilotettavat divit animaatiolla */
    .simple {
        display: none;
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transform: scaleY(0.95);
        transition: opacity 0.4s ease, max-height 0.4s ease, padding 0.3s ease;
        padding: 0 10px;
        margin-top: 0px;
        border: 0px solid #ccc;
        background-color: #f0f0f0;
        border-radius: 6px;
    }

    .simple.nayta {
      display: inline-block;
      opacity: 1;
      max-height: 5000px;
      padding: 6px;
      background-color:rgba(500, 0, 0, 0.04); 
      border: 0px solid black;
      border-radius: 20px;
      vertical-align: top;
      transform: scaleY(1);
      margin: 2px auto;
    } 
    
        .simple.inner {
        display: none;
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transform: scaleY(0.95);
        transition: opacity 0.5s ease, max-height 0.5s ease, padding 0.4s ease;
        padding: 0 10px;
        margin-top: 0px;
        border: 0px solid #ccc;
        background-color: #f0f0f0;
        border-radius: 6px;
    }

    .simple.inner.nayta {
      display: inline-block;
      opacity: 1;
      max-height: 5000px;
      padding: 6px;
      background-color:rgba(0, 0, 0, 0.04); 
      border: 0px solid red;
      border-radius: 20px;
      vertical-align: top;
      transform: scaleY(1);
      margin: 2px auto;
    } 
    
    
    
  
    
        .freedom.nayta {
      opacity: 0;
      max-height: 0;
      overflow: hidden;
      transition: opacity 0.5s ease, max-height 0.5s ease, padding 0.4s ease;
      padding: 0 10px;
      margin-top: 10px;
      border: 1px solid #ccc;
      background-color: #f0f0f0;
      border-radius: 6px;
    }

    .freedom {
      opacity: 1;
      max-height: 500px;
      padding: 10px;
    }
    
    

    
    

    
    
    
    
table, th, td {

    border: 2px solid red;

}










    button.sini {
      padding: 10px 20px;
      font-size: 20px;
      border: none;

      color: black;
      border-radius: 8px;
      cursor: pointer;
      transition: background-color 0.3s ease, transform 0.1s ease;
        display: inline-flex;
  align-items: center;  /* pystysuora keskitys */
  justify-content: center; /* vaakasuora keskitys */
      
      
      
    }

    button.sini:hover {

      transform: scale(1.05);
    }

    button.sini:active {
      transform: scale(0.95);
    }


    
    
    
    
    
    
    
    
    
        button.nordom {
      padding: 10px 20px;
      font-size: 14px;
      border: none;
      background-color: #ff0000;
      color: white;
      border-radius: 8px;
      cursor: pointer;
      transition: background-color 0.3s ease, transform 0.1s ease;
      transform: scale(0.99);
    }

    button.nordom:hover {
      background-color: #393939;
      transform: scale(1.06);
    }

    button.nordom:active {
      transform: scale(0.95);
    }

    .pulse {
      animation: pulse 0.3s ease;
    }

    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.08); }
      100% { transform: scale(1); }
    }