.popup {
  background-color: rgb(150,150,150);
  border-radius: 1rem;
  border: rgb(120,120,120) 0.5rem solid;
  width: max-content;
  padding: 0.5rem 1rem 1rem 1rem;
  z-index: 99;
  position: fixed;
  opacity: 0;
  top: -300px;
  transform: translateY(calc(50% + 56px));
  opacity: 0;
  display: none;
  transition: height 0.3s, width 0.3s, opacity 0.4s, top 0.4s, display 0.45s;
  transition-behavior: allow-discrete;
}

.popup:popover-open {
  top: -100vh;
  opacity: 1;
  display: block;
  transform: translateY(calc(50% + 56px));

  @starting-style {
    top: -200%;
    opacity: 0;
  }
}

.background-cover {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 98;
  background-color: rgba(80, 80, 80, 0);
  backdrop-filter: blur(0);
  pointer-events: all;
  display: none;
  transition: background-color 0.2s, backdrop-filter 0.2s, display 0.2s;
  transition-behavior: allow-discrete;
}

body:has(.popup:popover-open) .background-cover {
  background-color: rgba(80, 80, 80, 0.8);
  backdrop-filter: blur(2px);
  display: block;

  @starting-style {
    background-color: rgba(80, 80, 80, 0);
    backdrop-filter: blur(0);
  }
}

.popup h1 {
  text-align:center;
  margin-block-start: 0.3em;
  margin-block-end: 0.3em;
  color:white;
}

#new-task-popup form{
  display: block;
  text-align: left;
}

#new-task-popup input, #edit-task-popup input{
  margin:0.5rem 0;
}

.mobile-menu, .dateinfo{
  position: fixed;
  user-select: none;
  background-color: rgb(150, 150, 150);
  padding: 10px;
  border: 0px;
  margin: 1px;
  border-radius: 10px;
  color: rgb(255,255,255);
  font-size: 2ch;
  width: fit-content;
  font-family: 'League Spartan','Arial';
}

.dateinfo{
  top:4rem;
  right:2%;
  font-weight:bold;
  font-size:2ch;
  display:block;
  line-height: 1;
}

.dateinfo p{
  margin-top:0.1rem;
  margin-bottom:0.1rem;
}

.dateinfo p.fulldate{
  margin-bottom:0.3rem;
  font-size:2.3ch;
}

.dateinfo p.fulltime{
  font-size:2ch;
}

.mobile-menu{
  bottom: 5%;
  right: 5%;
  transition: background-color 0.5s;
  border:rgb(110,110,110) 0.3rem solid;
}

.mobile-menu-popup {
  width: 50px;
  background-color: rgb(185,185,185);
  border:rgb(120,120,120) 0.3rem solid;
  color: #fff;
  text-align: center;
  backdrop-filter: blur(10px);
  border-radius: 0.8rem;
  padding: 10px 0px;
  position: absolute;
  transition: bottom 0.3s, opacity 0.4s, display 0.2s;
  transition-behavior: allow-discrete;
}

.mobile-menu-popup[data-open="false"] {
  right: 5%;
  bottom: 5%;
  opacity: 0;
  display: none;
}

.mobile-menu-popup[data-open="true"] {
  right: 5%;
  bottom: 15%;
  opacity: 1;
  display: block;
  transition: bottom 0.3s, opacity 0.4s, display 0.2s;

  @starting-style {
    bottom: 5%;
    opacity: 0;
  }
}

.mobile-menu-popup ul{
  margin-block-start:0;
  margin-block-end:0;
  padding-inline-start:0;
  list-style-type:none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.mobile-menu-popup button{
  all: unset;
  font-size:2ch;
  margin:0;
  border-radius:5px;
  padding: 3px;
  transition:0.15s;
  aspect-ratio:1/1;
  display:flex;
  align-items:center;
  justify-content:center;
}

.mobile-menu-popup :is(button:hover, button:focus-visible), 
.mobile-menu:is(:hover, :focus-visible, .active){
  background-color:rgb(110, 110, 110);
  transition: background-color 0.3s;
  cursor:pointer;
}


@media only screen and (max-width:775px){
  .dateinfo{
    top:0.3rem;
    padding:4px;
    background-color: rgba(0,0,0,0);
    border:none;
    font-size:1.6ch;
    text-align:right;
    transition: background-color 0.5s;
  }
}

@media only screen and (max-width:360px) {
  .dateinfo{
    display:none;
  }
}

@media only screen and (min-width:775px){
  [data-accent="Red"] .dateinfo{
    background:linear-gradient(90deg, rgb(170,0,0) 0%, #b93d2a 100%);
    border:rgb(150,0,0) 4.8px solid;
  }
  
  [data-accent="Orange"] .dateinfo{
    background:linear-gradient(90deg, rgb(170,100,0) 0%, #ea9a36 100%);
    border:rgb(150,90,0) 4.8px solid;
  }
  
  [data-accent="Yellow"] .dateinfo{
    background:linear-gradient(90deg, rgb(160,160,0) 0%, #c8af37 100%);
    border:rgb(150,150,0) 4.8px solid;
  }
  
  [data-accent="Green"] .dateinfo{
    background:linear-gradient(90deg, rgb(0,140,0) 0%, #42be43 100%);
    border:rgb(0,120,0) 4.8px solid;
  }
  
  [data-accent="Blue"] .dateinfo{
    background:linear-gradient(90deg, rgb(0,120,220) 0%, #639abc 100%);
    border:rgb(0,90,200) 4.8px solid;
  }
  
  [data-accent="Violet"] .dateinfo{
    background:linear-gradient(90deg, rgb(80,0,200) 0%, #9571d5 100%);
    border:rgb(60,0,180) 4.8px solid;
  }
}