@import url('https://fonts.googleapis.com/css2?family=Cinzel&display=swap');
* {
    margin: 0px;
    padding: 0px;
}
body {
    background-color: var(--white);
}
:root {
    font-family: 'Cinzel', serif;
    --blue: #14213D;
    --black: #000000;
    --yellow: #FCA311;
    --platinum: #E5E5E5;
    --white: #FFFFFF;
}
.header {
    /* display: flex;
    justify-content: center;
    align-items: center; */
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    font-size: 3.25rem;
    color: var(--blue);
    font-weight: bold;
    border-bottom: 0.25rem solid var(--black);
    margin-bottom: 10px;
    grid-column: 1/3;
    grid-row: 1/2;
}
.body-container {
    display: grid;
    grid-template-columns: 0.25fr 1fr;
    grid-template-rows: 0.15fr 1fr 0fr;
    background-color: var(--white);
    height: 100vh;
    z-index: 1;
}
.menu-container {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    grid-column: 1 / 2;
}
.menu-title {
    border-bottom: 0.25rem solid var(--yellow);
    color: var(--black);
    padding-bottom: 10px;
}
.menu-list {
    list-style: none;
    padding: 0px 15px 15px 5px;
    margin-left: 5px;
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--blue);
}
.menulist-item {
    display: flex;
    gap: 1rem;
    padding: 10px;
}
.menulist-item:hover {
    background-color: #14213d5f;
    border-radius: 5px;
    border-left: 0.25rem solid var(--blue);
    cursor: pointer;
    color: var(--yellow);
}
.content-container {
    grid-column: 2 / 4;
    max-height: 600px;
    padding: 15px;
}
.last-grid-row {
    grid-row: 3/4; 
    grid-column: 1/3;
}
.last-flex {
    background-color: var(--blue); 
   
    color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 0px; 
    padding-top: 5px;

    font-weight: bold;
}
.icon-container {
    display: flex;
    color: var(--white);
    padding-left: 24px; 
    justify-content: center;
    align-items: center;
    font-size: 15px;
    gap: 20px;
}
a, a:visited, a:hover, a:active {
    text-decoration: none;
    color: inherit;
}

.prjForm, .taskForm, .edit-form-container, .edit-task-container {
    display: none;
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    padding: 10px;
    border-radius: 5px;
    border: 0.25rem inset var(--blue);
    background-color: var(--yellow) ;
    text-align: center;
    top: 35%;
    left: 50%;
    font-family: 'Merriweather', serif;
}
.taskForm > div, .prjForm > div {
    color: var(--white);
    font-size: 1.25rem;
    padding: 10px;
    font-weight: 600;
}
.Btn {
    border-color: var(--yellow);
    align-self: center;
    font-size: 1rem;
    font-weight: bold;
    color: var(--white);
    background-color: var(--blue);
    border-radius: 5px;
    padding: 10px;
}
.Btn:hover {
    cursor: pointer;
    border-color: var(--blue);
    color: var(--blue);
    background-color: var(--yellow);
    border-radius: 5px;
}
.hide {
    display: none;
}
.show {
    display: flex;
}
.panelTitle {
    background-color: var(--blue);
    padding: 20px;
    font-size:2.3rem;
    color: var(--white);
    border-radius: 3px;
    margin-bottom: 10px;
    font-weight: bold;
}
.todoList {
    display: flex;
    flex-direction: column;
}
.project-list, .task-list {
    flex-direction: column;
    overflow: auto;
    height: 75%;
    max-height: 600px;
}
.prjTitle {
    font-family: 'Merriweather', serif;
    font-size: 1rem;
    padding: 5px;
    font-weight: bold;
    display: flex;
    width: 100%;
    color: var(--black);
}
.projects-container {
    max-height: 325px;
}
.taskTitle {
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 1rem;
    padding: 5px;
    font-weight: bold;
    border: 5px solid var(--yellow);
    border-radius: 15px;
    margin: 5px 0px 0px 5px;
    
    color: var(--black);
}
.taskTitle:hover {
    border: 5px solid var(--white);
    background-color: var(--platinum);
    color: var(--black);
    border-radius: 15px;
}
.doneTask {
    background-color: var(--blue);
    color: var(--white);
}
.doneTask:hover {
    border: 5px solid var(--white);
    background-color: var(--blue);
    color: var(--white);
    border-radius: 15px;
}
.notDoneTask {
    background-color: var(--white);
    color: var(--black);
}
.prjContainer:hover {
    background-color: #14213d5f;
    border-radius: 5px;
    border-left: 0.25rem solid var(--blue);
    cursor: pointer;
    color: var(--white);
}
.selectedPrj {
    background-color: #14213d5f;
    border-radius: 5px;
    border-left: 0.25rem solid var(--yellow);
    cursor: pointer;
    color: var(--white);
}
.task-btn {
    display: flex;
    justify-content: center;
    background-color: var(--white);
    color: var(--yellow);
    font-size: 2rem;
    font-weight: bold;
    border-radius: 5px;
    padding: 5px;
}
.task-btn:hover {
    background-color: #14213d5f;
    border-radius: 5px;
    border-left: 0.25rem solid var(--yellow);
    cursor: pointer;
    padding: 5px;
}
.label-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: var(--white);
    font-weight: bold;
}
.border-flare {
    border: 2.5px solid var(--white);
}
.frontTaskContainer {
    display: flex;
    width: 100%;
    gap: 15px;
}
.indvTaskTitle {
    display: flex;
    font-family: 'Merriweather', serif;
}
.check-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    border-color: var(--yellow);
    border-radius: 5px;
}
.check-btn:hover {
    cursor: pointer;
}
.date, .time {
    border: 5px;
    border-style: outset;
    padding: 3px;
}
.dataContainer {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    justify-content: flex-end;
}
.containerDescription {
    display: flex;
    flex-direction: column;
}
.taskDetails {
    font-size: 0.75rem;
    font-family: 'Merriweather', serif;
}
.fa-star:hover, .fa-trash:hover {
    cursor: pointer;
}
.importantBtn {
    font-size: 1.5rem;
    display: flex;
    padding: 5px;
}
.trashTaskBtn {
    font-size: 1.5rem;
    display: flex;
    padding: 5px;
}
.trashBtn {
    font-size: 1rem;
    display: flex;
    padding-right: 15px;
    z-index: 2;
    color: var(--black);
}
.prjEditBtn {
    padding-left:2.5%;
    padding-right: 2.5%;
    color: var(--black);
}
.trashBtn:hover, .trashTaskBtn:hover {
    animation: shake 0.5s;
    animation-iteration-count: infinite;
}
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
  }
.prjContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.optionsContainer {
    position: absolute;
    background-color: rgba(20,33,61, .4);
    display: flex;
    flex-direction: column;
    left:13rem;
    top: 25.5rem;
    padding: 8px;
    border: 3px solid var(--blue);
    border-radius: 20px;
}

.fa-linkedin:hover {
    text-shadow: none; 
    cursor: pointer;
    animation-name: counterspin;
    animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.fa-github:hover {
    text-shadow: none; 
    cursor: pointer;
    animation-name: spin;
    animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
 }
 @keyframes counterspin {
    0% {
      transform: rotate(360deg);
    }
    100% {
      transform: rotate(0deg);
    }
 }

input {
    font-weight: bold;
}
textarea {
    font-weight: bold;
}
.theme-btn {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  letter-spacing: 2px;
  text-decoration: none;
  text-transform: uppercase;
  color: #000;
  cursor: pointer;
  border: 3px solid;
  padding: 0.25em 0.5em;
  box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.theme-btn:active {
  box-shadow: 0px 0px 0px 0px;
  top: 5px;
  left: 5px;
}

@media (min-width: 768px) {
  .theme-btn {
    padding: 0.25em 0.75em;
  }
}

.theme-btn-container {
    display: flex;
        align-items: center;
        justify-content: center;
}
.header-title {
    display: flex;
    justify-content: center;
    align-items: center;
}
.start-menu-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 40%;
}
.inputLabel {
    color: var(--white);
    font-family:'Merriweather', serif;
    font-size: 1.5rem;
    padding: 2.5%;
}
.editPrjInput {
    height: 2rem;
    font-size: 1rem;
    margin: 2.5%;
}
.button-container {
    display: flex;
    gap:2.5rem;
    margin: 5%;
}
.taskEditBtn {
    font-size: 1.3rem;
    padding: 5%;
    margin-right: -5%;
}
.taskEditBtn:hover {
    cursor: pointer;
}
.input-container {
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    color: var(--white);
    font-weight: bold;
}

@media only screen and (max-width:1500px) {
    .task-list {
        flex-direction: column;
        overflow: auto;
        height: 75%;
        max-height: 305px;
    }
}
@media only screen and (min-width:1920px) {
    .task-list {
        flex-direction: column;
        overflow: auto;
        height: 75%;
        max-height: 775px;
    }
    .content-container {
        grid-column: 2 / 4;
        max-height: 775px;
        padding: 15px;
    }
}
.header-title-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3%;
}