@import url('https://fonts.googleapis.com/css2?family=Amarante&family=Delius&family=Indie+Flower&family=Pixelify+Sans:wght@400..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root{
    --background: #efe0cd;
    --primary: #78481b;
    --secondary: #c5a98f;
    --accent: #466d47;
    --text-color: #6d5432;
    --fade-color: #846c4b;
}
*{
    margin: 0;
    padding: 0;
    max-width: 700px;

}
html{
    font-family:"Indie Flower"; 
    font-size: 20pt;
    color: var(--text-color);
}

@media screen and (max-width: 700px) {

    .app{
    min-height: 90%;
    max-width: 600px;
    padding: 10px;
    background-color: var(--background);
    display: flex;
    flex-direction: column;
    align-items: center;

    h1{
margin: 0dvh .5dvh;
padding: none;
font-size: 8vw;
color: #78481b;
justify-self: center;
grid-area: h1;
/* border:red solid 2px; */
}

#topPoLeft{
    margin-bottom: 1dvh;
    width: 5vw;
    grid-area: poTopLeft;
}

#topPoRight{
    margin-bottom: 1dvh;
    width: 5vw;
    grid-area: poTopRight;
}


#date{
    font-size: 6vw;
    color: var(--fade-color);
    margin-bottom: 5px;
    justify-self: center;
    /* border:red solid 2px; */
}

    #itemInput{
    margin: 1px;
    padding: 5px;
    max-width: 290px;
    height: 35px;
   font-size: 3dvh;
   font-family:"Indie Flower";
   color: var(--text-color);
   border-radius: 5px;
   border: none;
   background-color: #fbf7f3;
}

#addTaskBtn{
    margin: 2px;
    display:inline;
    width: 5dvh;
    border: none;
    border-radius: 5px 15px 5px;
    font-size: 4dvh;
    background-color: var(--accent);
    color: beige;
     transition: transform .8s, background-color 0.8s ease;
}

.item{
    margin: 1dvh 0;
    max-width: 300px;
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-areas:
    "checkbox taskText deleteTask";  
    /* border: red solid 2px;  */
}

.taskText,.fa-solid, .fa-trash{
    margin-left: 1dvh;
    max-width: 290px;
    font-size: 15pt;
    grid-area: taskText;
    justify-self: flex-start;
    /* border: rgb(28, 145, 50) solid 2px;  */
    text-align: start;
}

#checkbox{
    margin-right: 2dvh;
    padding: none;
    justify-self: center;
    grid-area: checkbox;
    transition: transform .8s, background-color 0.8s ease;
}

.poDisplay{
    margin-right: 2px;
    width: 300px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
    "encouragementText poEmotion";
 /* border: red solid 2px; */   
}
.poEmotion{
width: 100px;
grid-area: poEmotion;
justify-self: flex-end;
/* border: red solid 2px; */
}

#idle{
    display: none;
    width: 100px;
}

#action{
    display: none;
    width: 95px;
}

#rest{
    display: flex;
    width: 95px;
}
.deleteBtn{
    margin: none;
    height: 8px;
    width: 8px;
    grid-area: deleteTask;
    justify-self: flex-end;
    /* border: rgb(28, 145, 50) solid 2px;  */
    color: #812e47;
}

.encouragementText{
padding: 1vw;
display: none;
grid-area: encouragementText;
justify-self: flex-end;
border: var(--text-color) dashed 3px; 
background-color: var(--secondary);
border-radius: 5px;
font-size: 4dvh;
color: var(--text-color);
width:fit-content;
height:fit-content;
}
}
}


body{
    min-height: 100vh;
    max-width: 700px;
    padding: 10px;
    background-color: var(--background);
    display: flex;
    flex-direction: column;
    align-items: center;
}

#appTitle{
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-areas: 
    "poTopLeft h1 poTopRight";
}

h1{
margin: 0dvh 2dvw;
padding: none;
font-size: 7dvh;
color: #78481b;
justify-self: center;
grid-area: h1;
/* border:red solid 2px; */
}

#topPoLeft{
    margin-bottom: 4dvh;
    width: 6vw;
    grid-area: poTopLeft;
}

#topPoRight{
    margin-bottom: 4dvh;
    width: 6vw;
    grid-area: poTopRight;
}


#date{
    font-size: 4vw;
    color: var(--fade-color);
    margin-bottom: 5px;
    justify-self: center;
    /* border:red solid 2px; */
}


button{
    font-family:"Indie Flower";
}

.toDoHeader{
    margin-bottom: 3dvh;
    display:flex;
    justify-content: center;
    width: 100%;
    /* border: red solid 2px; */
}

#itemInput{
padding: 5px;
   width: 560px; 
    max-width: 700px;
   height: 50px;
   font-size: 1rem;
   font-family:"Indie Flower";
   color: var(--text-color);
   border-radius: 5px;
   border: none;
   background-color: #fbf7f3;
}

#itemInput:focus{
    outline: none;
}

#addTaskBtn{
    display:inline;
    width: 6.5dvh;
    border: none;
    border-radius: 5px 20px 5px;
    font-size: 4.5dvh;
    background-color: var(--accent);
    color: beige;
     transition: transform .8s, background-color 0.8s ease;
}

#addTaskBtn:hover{
    background-color:#72965c;
    transform: scale(1.1);
}

.item{
    margin: 2dvh 0;
    width: 99%;
    max-width: 700px;
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-areas:
    "checkbox taskText deleteTask";  
    /* border: red solid 2px;  */
}

#checkbox{
    padding: none;
    justify-self: center;
    grid-area: checkbox;
    transition: transform .8s, background-color 0.8s ease;
}
#checkbox:hover{
background-color:#72965c;
 transform: scale(1.4);
}


.taskText{
    margin-left: 2dvh;
    width: 550px;
    max-width: 700px;
    grid-area: taskText;
    justify-self: flex-start;
    /* border: rgb(28, 145, 50) solid 2px;  */
    text-align: start;
}
.taskText,.fa-solid, .fa-trash{
    margin: none;
    grid-area: deleteTask;
    justify-self: flex-end;
    /* border: rgb(28, 145, 50) solid 2px;  */
    color: #812e47;
}

.poEmotion{
width: 120px;
grid-area: poEmotion;
justify-self: flex-end;
/* border: red solid 2px; */
}

#idle{
    display: none;
    width: 135px;
}

#action{
    display: none;
    width: 125px;
}

#rest{
    display: flex;
    width: 125px;
}

.poDisplay{
    max-width: 700px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
    "encouragementText poEmotion";
 /* border: red solid 2px; */   
}

.encouragementText{
padding: 1vw;
display: none;
grid-area: encouragementText;
justify-self: flex-end;
border: var(--text-color) dashed 3px; 
background-color: var(--secondary);
border-radius: 5px;
font-size: 3dvh;
color: var(--text-color);
width:fit-content;
height:fit-content;
}