html {
    min-width: 100%;
  }
  
  body{
    margin: 0px;
  }
  
  span {
    font-weight: bold;
  }
  
  a {
    cursor: crosshair;
    text-decoration: none;
  }
  
  /*KAARDID*/
  .taustapilt{
    display: none;
    position: relative;
    z-index: inherit;
    max-width: 90%;
    max-height: 69%;
  }
  
  .mobiilipilt{
    display: absolute;
    z-index: -99;
    top:0px;
    width: 100%;
    margin: 0px;
    padding: 0px;
  }
  
  @media only screen and (min-width: 768px) {
    .taustapilt {
      display: block;
      position: fixed;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      z-index: -100;
      min-width: 100vw;
      min-height: 100vh;
    }
  
    .mobiilipilt{
      display: none;
    }
  }
  
  /*SISU*/
  main {
    font-family: 'Times New Roman', serif;
    margin: 0px;
    width: 100%;
    padding-top: 30px;
    opacity: 0.9;
  }
  
  .paragraaf{
    padding: 1vh 8vw;
  }
  
  
  /*kolkaplika.newsletter*/
  h2 {
    font-weight: normal;
    margin-top: 20px;
    z-index: 800;
    margin-bottom: 0px;
    font-style: italic;
    font-size: 25px;
  }
  
  /*pealkiri*/
  h1 {
    width: 100%;
    padding-top: 60px;
    font-size: 35px;
    margin-top: inherit;
    margin-bottom:  10px;
  }
  
  /*autor*/
  h3 {
    margin: 5px;
    font-size: 16px;
    font-weight: normal;
    font-style: italic;
  }
  
  /*tutvustus*/
  h4{
    font-size: 18px;
    text-align: left;
    padding-bottom: 10px;
  }
  
  /*tekst*/
  p {
    font-size: 16px;
    text-align: left;
  }
  
  .viimane {
    padding-bottom: 40px;
  }
  
  
  @media only screen and (min-width: 768px) {
    main {
      width: 55%;
    }
  }
  
  @media only screen and (min-width: 1024px) {
    h1 {
      width: 160%;
      font-size: 40px;
      padding-top: 0px;
      margin-top: 60px;
      margin-bottom: 10px;
    }
    h2 {
      font-size: 30px;
    }
  
    h3 {
      font-size: 18px;
    }
  
    h4 {
      font-size: 20px;
    }
  
    p {
      font-size: 18px;
    }
  }
  
  /*LUULETUS*/
  .luuletus {
    padding: 1vh 8vw;
    z-index: 4;
    width: 80%;
    margin: 10px 0px;
  }
  
  .voorkeel{
    font-weight: bold;
    font-size: 18px;
  }
  
  .eestikeel{
    font-style: italic;
    font-size: 15px;
    padding: 1vh 10vw;
  }
  
  .luuletus-autor {
    text-decoration: overline;
    padding: 1vh 0vw;
    font-size: 15px;
    font-style: italic;
  }
  
  @media only screen and (min-width: 768px) {
    .luuletus{
        padding: 0vh 4vw;
        width: 100%;
    }
  
    .voorkeel {
        margin: 25px;
      padding: 0vh 4vw;
      font-size: 22px;
    }
  
    .eestikeel{
      font-style: italic;
      font-size: 20px;
      padding: 1vh 8vw;
      }
  
    .luuletus-autor {
      text-decoration: overline;
      padding: 1vh 8vw;
      font-size: 15px;
    }
  }
  
  /*FOOTNOTE*/
  a.footnote {
     text-decoration:none;
     background-color: #bbc4d2;
     padding-left: 2px;
     padding-right: 2px;
     margin-right: 2px;
  }
  
  a.footnote span {
     z-index: -1;
     width: 60%;
     opacity: 0;
     position: fixed;
     left: 15px;
     bottom: 20px;
     margin-left: 0px;
     margin-right: 18px;
     padding:14px 20px;
     border-radius:4px; box-shadow: 5px 5px 8px #CCC;
     border:1px solid #DCA;
     color: #f5f5f5;
     font-weight: normal;
     background-color: #231A0F;
     -webkit-transition: all 2s ease;
     -moz-transition: all 2s ease;
     -o-transition: all 2s ease;
     transition: all 2s ease;
  }
  
  a.footnote:hover span {
     z-index: 9;
     opacity: 1;
     -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
     -o-transition: all 1s ease;
     transition: all 1s ease;
  }
  
  
  /*JALUS*/
  footer {
    position: relative;
    bottom: 0px;
    right: 0px;
    left: 0px;
    padding:1vh 8vw 5vh;
    opacity: 0.8;
    margin:0px;
  }
  
  footer>p{
    width: 100%;
    font-size: 14px
  }
  
  .footer-link{
    color: #f5f5f5;
    font-weight: bold;
  }
  
  #autor {
    padding-top: 20px;
  }
  
  @media only screen and (min-width: 768px) {
    footer>p{
      width: 45%;
      font-size: 14px
    }
  }
  
  
  
  
  
  