@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {

  --ht-element-height: 30px;

}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Lato', sans-serif;
  margin: 0;
  background-color: var(--tinyprogs-bg-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;  
}



/****************************************  Main area   ***********************/

.tp-main {
    background-color: var(--tinyprogs-bg-color);
    width: 90%;
    max-width: 1600px;
    padding: 10px;
}

h1 {
  text-align: center;
}
/****************************************  Specific area   ***********************/
.tp-flex-1 {
  flex: 1;
}


.hanoi-towers-outer-container {
  /*background-color: bisque;*/
  width: 800px;
  position:relative;
  margin:auto;
}

@media (max-width: 800px) {
  .hanoi-towers-outer-container{
    width: 95%;
  }
}
/*------------------------------------------ Header area -------------------------------------*/
.hanoi-towers-header-container{
  padding: 5px;
  display:flex;
  align-items:center;
  margin-bottom:10px;
}

.hanoi-towers-header-container span{
  padding-right: 20px;
}

.ht-header-img {
  width: 24px;
  height: 25px;
  padding: 3px;
}

.ht-img-btn {
  height: 25px;  
  width: 25px;
  background-color:  darkgoldenrod;
  padding: 3px;
  border-radius: 5px;
  margin-left:5px;
  border: 1px solid black;
}
.ht-img-btn:hover, .ht-img-btn:focus {
  background-color:  orangered;
}
/*------------------------------------------ Modal divs area -------------------------------------*/
.ht-modal {
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,65%);
  display: none; /*show:flex*/
  justify-content: center;
  align-items: center;
}

.ht-modal.show {
  display: flex;
}

.ht-modal-content {
  background-color: bisque;
  width: 50%;
  padding: 20px;
  border-radius: 20px;
  transform:scale(20%);
  transition: 2s ease-in-out;
}




/********************************* Towers area ***************/



.ht-modal-content h2 {
  margin-top: 0;
  text-align: center;
  padding-bottom: 5px;
  border-bottom: 2px solid gray;
}

.ht-modal-content h3 {
  text-align: center;
}

.ht-modal-content p {
  text-align: center;
}


.ht-modal.show .ht-modal-content {
  transform:scale(100%);
  transition: 2s ease-in-out;
}


.tp-modal-settings-row {
  display: flex;
  align-items: center;
  padding: 4px;
}

#ht-disk-count-range {
  flex: 1;
  margin: 0 20px;
}

.tp-modal-btn {
  flex: 1;
  margin: 15px 15px 0;
  padding: 5px 5px;
  background-color: darkgoldenrod;
  border-radius: 10px;
}


.hanoi-towers-container {
  width: 100%;
  height: calc(13*var(--ht-element-height));
  position:relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border-bottom: 10px solid brown;
}

.ht-column-contanier {
  width: 100%;
  height: 100%;
  border-radius: 30px 30px 0px 0px;
  position: relative;
}

.ht-column-contanier:hover, .allow-green {
  background-color: rgba(64,255,64,50%);
}

.ht-column-contanier.ht-deny:hover, .deny-red{
  background-color:rgba(255,128,128,40%)
}

.ht-column {
  margin: auto;
  margin-top: auto;
  width: 5%;
  height:  calc(9*var(--ht-element-height));
  background-color: brown;
  position: absolute;
  bottom: 0px;
  left: 47.5%;
  border-radius: 30px 30px 0px 0px;
}





.ht-element {
  height: calc(var(--ht-element-height));
  width: 25%;
  background-color: rgb(39, 125, 196);
  pointer-events: none;
  border-radius: 7px;
  border: 2px solid black;
  left:0%;
  position:absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
}



/* 0 is the biggest */
.ht-element.ht-size-0 {
  width: 30%;
}
.ht-element.ht-size-1 {
  width: 26%;
}
.ht-element.ht-size-2 {
  width: 22%;
}
.ht-element.ht-size-3 {
  width: 18%;
}
.ht-element.ht-size-4 {
  width: 14%;
}
.ht-element.ht-size-5 {
  width: 10%;
}
.ht-element.ht-size-6 {
  width: 6%;
}
.ht-element.ht-size-7 {
  width: 3%;
}
.ht-pos-y-0 {
  /*position:absolute;*/
  top: calc(100% - 1*var(--ht-element-height));
  /*top: calc(100% - 30px);*/
  /*transition: top 0.5s ease-out;*/

}

.ht-pos-y-1 {
  /*position:absolute;*/
  top: calc(100% - 2*var(--ht-element-height));
  /*transition: all 0.5s ease-out;*/
  /*transition: top 0.5s ease-out;*/

}


.ht-pos-y-2 {
  /*position:absolute;*/
  top: calc(100% - 3*var(--ht-element-height));
  /*transition: top 0.5s ease-out;*/

}

.ht-pos-y-3 {
  top: calc(100% - 4*var(--ht-element-height));
}
.ht-pos-y-4 {
  top: calc(100% - 5*var(--ht-element-height));
}
.ht-pos-y-5 {
  top: calc(100% - 6*var(--ht-element-height));
}
.ht-pos-y-6 {
  top: calc(100% - 7*var(--ht-element-height));
}
.ht-pos-y-7 {
  top: calc(100% - 8*var(--ht-element-height));
}

.ht-element.lift-up {
  top:0px;
  transform: translate(-50%, 0);
  transition: all 0.5s ease-out;  
}

.ht-element.ht-pos-x-left {
  left:16.5%;
  transform: translate(-50%, 0);
  transition: left 0.1s ease ,
              top 0.4s ease 0.1s;

}

.ht-element.ht-pos-x-middle {
  left:50%;
  transform: translate(-50%, 0);
  transition: left 0.1s ease ,
              top 0.4s ease 0.1s;

}

.ht-element.ht-pos-x-right {
  left:83.5%;
  transform: translate(-50%, 0);
  transition: left 0.1s ease ,
              top 0.4s ease 0.1s;


}


.ht-element.lift-up {
  top: calc(100% - 12*var(--ht-element-height));
  transform: translate(-50%, 0);
  transition: all 0.5s ease-out;  
}

/*
.ht-position-y-top {
  margin-top: 0px;
}*/
/*
.ht-element.ht-size-2.lift-up {
  animation-duration: 3s;
  animation-name: liftup;
  bottom:500px;
}

@keyframes liftup {
  
  from {
    position:absolute;
    bottom:0px;
  }

  to {
    position:absolute;
    bottom:500px;
  }
}

*/