@font-face {
  font-family: 'Anonymous Pro';
  src: url('../fonts/Anonymous Pro.woff2') format('woff2');
}

@font-face {
  font-family: 'PlayfairDisplay-ExtraBold';
  src: url('../fonts/PlayfairDisplay-ExtraBold.ttf') format('ttf');
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 20px;
    width: 100%;
}

body {
  min-height: 100vh;  
  width: 100%;
  font-family: 'Anonymous Pro', sans-serif;
  background: linear-gradient(170deg,rgba(0, 20, 205, 1), rgba(67, 10, 110, 0.671));
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header-container {  
  /* border: 1px solid #c9aa1f; */
  max-width: 90%;
  min-width: 80%;
  display: flex;
  justify-content: space-between; 
  margin-left: 0em;
  margin-right: 0em;
  margin-top: 0.0em;
  margin-bottom: 1em;
  /* align-items: flex-end;   */
}

.content {
  /* border: 1px solid #C91F37; */
  max-width: 90%;
  min-width: 80%;
  display: flex;
}

h1 {
  /* border: 1px solid #1fc92d; */
  font-size: 3rem;
  color: #805a9f;
  text-shadow: 2px 2px 4px rgba(64, 7, 71, 0.5);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  letter-spacing: -0.2rem;
  opacity: 60%;
  transition: all 0.5s ease;
}

.dot {
  margin-left: -0.45rem;
  margin-right: -0.4rem;
}

h1:hover{
  text-shadow: 2px 2px 4px rgba(64, 7, 71, 0.5);
  opacity: 100%;
  letter-spacing: 0rem;
}


.login-container {  
  /* border: 2px solid #fbff00; */
  display:flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 30%;  
}

.buttonlogin {
  border: 1px solid #e00b81;   
  font-family: 'Anonymous Pro', sans-serif;
  font-size: 1rem;
  color: #f7f2dc;
  background-color: #2d2263;
  height: 1.5em;
  width: 5em;
  border-radius: 1em;
  margin-right: 0em;
}

/* login token */
#tokenInput {
  font-size: 1rem;
  text-align: right;
  padding-right: 0.3rem;
  display:none;
  margin-top:1%;
  width:100%;
  border-radius: 0.4rem;
  border: none; 
  outline: none; 
  box-shadow: none; 
}

#emailMessage {
  font-size: 0.8rem;
  padding-right: 0.2rem;
  color:#f7f2dc;
  display:none;
}


/*  PANELS */
/* LEFT */
.left-panel {
  /* border: 1px dashed rgb(0, 0, 0); */
  max-width: 60%;
  flex-grow: 1;
  min-height: 100%; 
}

.frametask {
  font-family: 'Anonymous Pro', sans-serif;
  max-width: 100%;
  vertical-align: top;
  padding-top: 0.45rem;
  font-size: 1rem;
  padding-left: 0.6rem;
  color:#f7f2dc;
  background-color: rgba(255, 255, 255, 0.13);
  height: 2rem;
  width: 100%;
  resize: none;
  overflow-y:hidden;
  border-radius: 0.7rem;
  margin-bottom: 0.3rem;
  border: none; /* Zrušíme rámec */  
  outline: none; /* Zrušíme ohraničení při focení */
  box-shadow: none; /* Zrušíme box-shadow efekt */  
}

.frametask:focus {
  border: 0.1rem solid #f7f2dc;
  padding-left: 0.5rem;
  padding-top: 0.35rem;
  box-shadow: 0px 0px 0.2rem #f7f2dc;
  resize: none;
}

.framedetail {
  font-family: 'Anonymous Pro', sans-serif;
  font-size: 0.85rem;
  padding: 0.5rem;
  padding-left: 0.6rem;
  color: #f7f2dc;
  background-color: rgba(255, 255, 255, 0.13);
  min-height: 12.5rem; /* Nechte min-height pro případ, kdy je obsah textarea menší */
  width: 100%;
  border-radius: 0.7rem;
  margin-bottom: 0.3rem;
  display: flex;
  flex-direction: column;
  resize: vertical;
  border: none; /* Zrušíme rámec */
  outline: none; /* Zrušíme ohraničení při focení */
  box-shadow: none; /* Zrušíme box-shadow efekt */
  overflow-y: auto; /* Skrýt vertikální posuvník */
  box-shadow: 0px 0px 0.5rem #2d2263;



}
.framedetail:focus {
  border: 0.1rem solid #f7f2dc;
  padding: 0.4rem; /* padding bude 10 - border šířka pixelů */
  padding-left: 0.5rem;
  box-shadow: 0px 0px 0.2rem #f7f2dc;
}


/* RIGHT */
.right-panel {
  /* border: 1px dashed white; */
  max-width: 40%;
  flex-grow: 1;
  padding-left: 0.4rem;
}

.frametasks {  
  background-color: rgba(255, 255, 255, 0.07);
  height: 50%; 
  width: 100%;
  border-radius: 0.7rem;
  padding-top: 0.4rem;
  max-width: 100%;  
  min-height: 100%; 
}

.task-item {
  font-family: 'Anonymous Pro', sans-serif;
  word-wrap: break-word;
  display: flex;
  align-items: center;
  min-height: 1.8rem;
  padding-left: 1rem;
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;

  border-radius: 0.7rem;  
  transform: scale(1); /* Výchozí transformace */
  transition: all 0.15s ease-in-out; /* Transformace s efektem "ease-in" */
  transform-origin: 0 100;
  margin-left: 0.4rem;
  margin-right: 0.4rem;
  margin-bottom: 0.3rem;


}

.task-item:hover {  
    transform: translateX(-10%);
    cursor: pointer;    
}


/* BUTTONS */
.button-container {
  /* border: 1px solid yellow; */
  margin-top: 5px;
  display: flex;
  justify-content: space-between;
  /* align-items: flex-end; */
  align-items: center;
}

.buttonadd {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0rem;
  padding: 0.8rem 1rem;
  background-color: #2d2263;
  font: inherit;
  color: #f7f2dc;
  font-size: 1rem;
  font-weight: 600;  
  overflow: hidden;
  transition: all 0.3s ease cubic-bezier(0.23, 1, 0.320, 1);
  border: none;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-radius: 2rem; 
  box-shadow:  3px 3px 4px rgb(62, 28, 117);
  min-width: 6em;
}

.buttonadd span {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
}

.buttonadd::before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  translate: 0 105%;
  background-color: #37C91F;  
  transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
}
.buttonadd:hover::before {
  translate: 0 0;
}
.buttonadd:hover{
  box-shadow:  4px 4px 20px rgba(55, 201, 31, 0.5); 
}

.buttonadd:hover svg {
  fill: #f7f2dc;  
}

.buttonadd:active {
  transform: scale(0.8);
  box-shadow:  0px 0px 0px rgb(21, 29, 65);
}

.buttondelete {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0px;
  padding: 0.8rem 1rem;
  background-color: #2d2263;
  font: inherit;
  color: #f7f2dc;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 2rem;
  overflow: hidden;
  transition: all 0.3s ease cubic-bezier(0.23, 1, 0.320, 1);
  border: none;
  outline: none; 
  box-shadow: none; 
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  box-shadow:  3px 3px 4px rgb(62, 28, 117);
  min-width: 6em;
}

.buttondelete span {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
}

.buttondelete::before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  translate: 0 105%;
  background-color: #C91F37;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
}

.buttondelete:hover {
  animation: shake 0.2s linear 1;
}

.buttondelete:hover::before {
  translate: 0 0;
}

.buttondelete:hover svg {
  fill: #f7f2dc;
}

.buttondelete:active {
  transform: scale(0.8);
  box-shadow:  0px 0px 0px rgb(21, 29, 65);
}

@keyframes shake {
  0% {
    rotate: 0deg;
  }

  33% {
    rotate: 10deg;
  }

  66% {
    rotate: -10deg;
  }

  100% {
    rotate: 10deg;
  }
}

/* toto je jen textové pole vedle pickeru */
.colorpicker {
  display: none;
}


/* /// items deleted  */
.deleted {
  opacity: 0;
  transform: scale(0);
  transition: opacity 1.1s ease-in-out, transform 0.1s ease-in-out;
  animation: rotate 0.4s linear infinite; /* Animace rotace */
  transform-origin: center center; /* Určení středu rotace */
}

/* Definice keyframes pro rotaci */
@keyframes rotate {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}



/* Pokud je šířka menší než 1024px */
@media screen and (max-width: 1023px) {
  .content {
    flex-direction: column;
  }
  .left-panel, .right-panel {   
    max-width: 100%;  
  } 
    
  h1 {
    font-size: 2rem;
  }
}

/* Styly pro rozlišení menší než 1440px */
@media (min-width: 1080px) and (max-width: 1439px) {
  /* Styly pro rozlišení menší než 1440px (včetně) */

  /* Styly pro mobilní zařízení  .mobile . content{} */
  /* .mobile .content {
    flex-direction: column;    
    min-width: 97%;
    }
    .mobile .header-container {      
    min-width: 97%;
    }

    .mobile .buttonlogin {   
      font-size: 2rem;
      height: 1.5em;
      width: 5em;
      border-radius: 1em;      
    }

    .mobile .frametask {
      font-size: 2rem;
      height: 3rem;
    }

    .mobile .framedetail {
      font-size: 2rem;
      height: 3rem;
      margin: 0px;
    }

    .mobile .button-container {
      border: 1px solid yellow;

      margin-bottom: 1rem;
      display: flex;
      position: relative;

    }
    .mobile .buttonadd, .mobile .buttondelete{
      border: 1px solid rgb(255, 2, 221);
      font-size: 1.5rem;
      width: 10%;
    }

    .mobile .frametasks {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
    }

    .mobile .task-item {
      min-height: 5rem;
      min-width: 90%;
      font-size: 2rem;
      border-radius: 2rem;  
      max-width: 90%;
      align-items: center;
      padding: 1rem;
      margin-bottom: 0.6rem;
    }

    .mobile .left-panel, .mobile .right-panel {   
    max-width: 100%;   
  }  */
} 

@media (max-width: 600px) {

  .mobile body {
    /* border: 1px solid rgb(17, 255, 0); */
    margin: 0px;
    padding:0px;
  }

  .mobile .left-panel {
  /* border: 1px solid rgb(255, 2, 221);   */
  min-width: 100%;
  }

  .mobile h1 {
    display:none;
  }

  .mobile .content {
    /* border: 1px solid rgb(255, 255, 255); */
    min-width: 100%;    
    scale: 95%;
  }
  .mobile .login-container{
    margin-bottom: 0rem;
    min-width: 100%;
    scale: 95%;
    
  }
  .mobile .buttonlogin {
    height: 1.5rem;
    
  }
  
  .mobile .header-container{
    /* border: 1px solid rgb(255, 0, 0); */
    display: flex;
    justify-content: flex-end;
    min-width: 100%;
    margin:0;
  }
  .mobile #tokenInput{
    /* border: 1px solid rgb(255, 0, 0); */
    font-size: 1.1rem;
    min-height: 2rem;
    /* width: 100%; */
    border-radius: 2rem;
    padding-right: 1rem;
    padding-left: 1rem;  
    margin-top: 0.5rem;
  }
  .mobile #emailMessage{
    font-size: 1rem;    
    padding-right: 1rem;
    padding-left: 1rem;  
    padding-top: 0.4rem;  
  }

  .mobile .frametask ,.mobile .framedetail{
    font-size: 1rem;
    border-radius: 1rem;    
    padding: 0.4rem; 
    box-shadow: 0px 0px 0rem #f7f2dc;
    height: auto;   
  }

  .mobile .frametask:focus ,.mobile .framedetail:focus{
    font-size: 1rem;
    border-radius: 1rem;
    border: 0.1rem solid #f7f2dc;
    padding: 0.3rem;    
    box-shadow: 0px 0px 0.2rem #f7f2dc;    
  }

  .mobile .button-container {
    /* border: 1px solid yellow; */
    margin-bottom: 1rem;      

  }
  .mobile .buttonadd, .mobile .buttondelete{    
    /* border: 1px solid rgb(255, 2, 221); */
    font-size: 1rem;
    padding: 0px; 
    height:1.8rem;   
  }
  .mobile .task-item:hover {  
    transform: translateX(-5%);
    cursor: pointer;    
}

}


/* SMART WATCHES */
@media (max-width: 200px) {

  body {
    /* border: 1px solid rgb(17, 255, 0); */
    margin: 0px;
    padding:0px;    
    
  }

  .left-panel {
  /* border: 1px solid rgb(255, 2, 221);   */
  min-width: 100%;
  }

  h1 {
    display:none;
  }

  .content {
    /* border: 1px solid rgb(255, 255, 255); */
    min-width: 100%; 
    height: fit-content;   
    
  }
  .login-container{
    margin-bottom: 0rem;
    align-items: center;
  }
  .buttonlogin {
    height: 1.5rem;
    
  }
  
  .header-container{
    /* border: 1px solid rgb(255, 0, 0); */
    display: flex;
    justify-content:center;
    margin:0; 
    width: 100%;
  }
  #tokenInput{
    /* border: 1px solid rgb(255, 0, 0); */
    font-size: 1rem;
    text-wrap: wrap;
    
    /* width: 100%; */
    border-radius: 2rem;
    padding-right: 1rem;
    padding-left: 1rem;  
    /* margin-top: 0.5rem; */
  }
  #emailMessage{
    font-size: 1rem;    
  }


  .frametask , .framedetail{
    
    font-size: 0.8rem;  
    padding: 0.2rem; 
    box-shadow: 0px 0px 0rem #f7f2dc; 
    border-radius: 0.7rem;

  }

  .frametask:focus ,.framedetail:focus{
    font-size: 0.8rem;
    border-radius: 0.7rem;
    border: 0.1rem solid #f7f2dc;
    padding: 0.1rem; 
    box-shadow: 0px 0px 0.2rem #f7f2dc;
  
  }

  .button-container {
    /* border: 1px solid yellow; */
    display: flex;
    flex-direction: column;

  }
  .buttonadd,  .buttondelete{    
    /* border: 1px solid rgb(255, 2, 221); */
    font-size: 1rem;
    padding: 0px; 
    height:2rem;
    margin-bottom: 0.2rem;  
  }
  .task-item:hover {  
    transform: translateX(-5%);
    cursor: pointer;    
}

}