/*https://www.youtube.com/watch?v=RlkiUib1o_I*/
.leftsidebar{
  position:relative;
margin:5px 5px 5px 5px;


}
/*.leftsidebarbotton{
position:absolute;
    display: inline-block;
    height:50px;
    padding: 2px;
    margin: 2px;
    vertical-align: top;
    width: 200px;
  border: 5px;

}*/

.button-krūmrozes{
  background-image: url("../iedalijuma-bildes/krumrozes.jpg")!important;
  background-size: cover;
  border-radius: 10px;
  position: relative;
  /*background-color: var(--background-color);*/
  border: 2px solid  #ffffcc;
    width: 100%;
  height: 5rem;
  margin:5px 5px 5px 5px;
}



.button-floribundrozes{
  background-image: url("../iedalijuma-bildes/floribundrozes.jpg")!important;
  background-size: cover;
  border-radius: 10px;
  position: relative;
  background-color: var(--background-color);
  border: 2px solid #ffffcc;
  width: 100%;
  height: 5rem;
  margin:5px 5px 5px 5px;
}

.button-poliantrozes{
  background-image: url("../iedalijuma-bildes/poliantrozes.jpg")!important;
  background-size: cover;
  border-radius: 10px;
  position: relative;
  background-color: var(--background-color);
  border: 2px solid #ffffcc;
  position:flex;
  width: 100%;
  height: 5rem;
  margin:5px 5px 5px 5px;
}
.button-miniatūrrozes{
  background-image: url("../iedalijuma-bildes/miniatūrrozes.jpg")!important;
  background-size: cover;
  border-radius: 10px;
  position: relative;
  background-color: var(--background-color);
  border: 2px solid #ffffcc;
  position:flex;
  width: 100%;
  height: 5rem;
  margin:5px 5px 5px 5px;
  }
.button-vīteņrozes{
  background-image: url("../iedalijuma-bildes/vīteņrozes.jpg")!important;
  background-size: cover;
  border-radius: 10px;
  position: relative;
  background-color: var(--background-color);
  border: 2px solid #ffffcc;
  position:flex;
  width: 100%;
  height: 5rem;
  margin:5px 5px 5px 5px;
}
.button-klājeniskās-rozes{
  background-image: url("../iedalijuma-bildes/klajeniskas-rozes.jpg")!important;
  background-size: cover;
  border-radius: 10px;
  position: relative;
  background-color: var(--background-color);
  border: 2px solid #ffffcc;
  position:flex;
  width: 100%;
  height: 5rem;
  margin:5px 5px 5px 5px;
}
.button-tējhibrīdrozes{
  background-image: url("../iedalijuma-bildes/tejhibridrozes.jpg")!important;
  background-size: cover;
  border-radius: 10px;
  position: relative;
  background-color: var(--background-color);
  border: 2px solid #ffffcc;
  position:flex;
  width: 100%;
  height: 5rem;
  margin:5px 5px 5px 5px;

}
.button-muskusrozes{
  background-image: url("../iedalijuma-bildes/muskusrozes.jpg")!important;
  background-size: cover;
  border-radius: 10px;
  position: relative;
  background-color: var(--background-color);
  border: 2px solid #ffffcc;
  position:flex;
  width: 100%;
  height: 5rem;
  margin:5px 5px 5px 5px;

}
.button-parka-rozes{
  background-image: url("../iedalijuma-bildes/parka-rozes.jpg")!important;
  background-size: cover;
  border-radius: 10px;
  position: relative;
  background-color: var(--background-color);
  border: 2px solid #ffffcc;
  position:flex;
  width: 100%;
  height: 5rem;
  margin:5px 5px 5px 5px;
}

  .button::before{
    content: "";
      position: absolute;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
    background-color: rgba(255, 255, 255, 0.63);
  }
  .button h1 {
    position: relative;
    text-align: top;
    font-family: "Sofia",sans-serif;
    /*font-family: 'Imperial Script';*/
    font-size: 40px;
    font-style: italic;
    color:black;
  }
  .button:hover{
    color:white;
    font-size:32px;
    background-color: #FFCE00;
    transform: scale(1.1);
    transition: top,left,right,bottom,500ms ease-in-out;
  }
  .button h1:hover{
    color:black;
    transform: scale(1.4);
    transition: top,left,right,bottom,500ms ease-in-out;
  }
.button h1:active{
box-shadow: black;

}
  /*  --background-color:#FFCE00;
    --border-size:4px;
    .button-krūmrozes::before{
      content:"";
      position: absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
      z-index:-1;
      border: var(--border-size) solid var(--background-color);
      transition: top,left,right,bottom,100ms ease-in-out;
    }
.button-krūmrozes:hover::before;
.button-krūmrozes:focus::before {
  top: calc(var(--border-size)*-2;
  left: calc(var(--border-size)*-2;
  right: calc(var(--border-size)*-2;
  bottom: calc(var(--border-size)*-2;
}*/

/*@media screen and(max-width: 600px){
  #leftsidebar{
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}*/