/*.body-notepad{
   background-image: repeating-radial-gradient(red, yellow 10%, green 15%), url(images/26bgpattern.png);
  
}*/
.body-notepad{
   background-image: url(images/26LOWTRANSbgnubhelsinki.png);
}

.pn-container {
  display: flex;
  position: sticky;
  display: flex;
  flex-direction: row;
}
/*POMODORO NOTEPAD*/
.notepad-container {
  background-color: rgb(231, 255, 98);
  border-radius: 3px;
  border-style: solid;
  margin:20px;
  width: 1000px;
  margin-top: 1px;
  margin-bottom: 1px;
}
.input-box{
  position: relative;
  width:100%;
  max-width:500px ;

  /*background-color: #4da3e1; /* edit later*/
  outline: none;
  margin: 20px;
}
/*NOTEPAD EDITOr */
.note-editor{
  position: sticky;
  top: 10px;
  margin-right:10px;
  display: grid;
  grid-template-columns: 40px 40px 40px 40px 40px 40px;
  grid-template-rows: 40px 40px 40px 40px;
  background: rgba(38, 38, 39, 0.83);
  height: min-content;
  padding: 10px;
  border-radius: 3px;
  border-style: solid;
  flex-basis: 18%; 
}
.trash-notepad-icon{
  height: 26px;
  width: 26px ;
  background-color: white;
  padding: 5px;
  border: solid black;
  border-radius: 3px;
  cursor: pointer;
 grid-row: 2/4;
 grid-column: 1/2;
}
.save-icon{
  height: 26px;
  width: 26px ;
  background-color: white;
  padding: 5px;
  border: solid black;
  border-radius: 3px;
  cursor: pointer;
  grid-row: 3/4;
  grid-column: 1/2;
}
.color-selector-icon{
  height: 26px;
  width: 26px ;
  background-color: white;
  padding: 5px;
  border: solid black;
  border-radius: 3px;
  cursor: pointer;
  grid-row: 4/5;
  grid-column: 1/2;
}
.p-tool-selector{
  color:white;
  font-size: large;
  grid-row: 1/1 ;
  grid-column: 1/2;
}
.trash-notepad-icon:hover{
background-color: red;
}
.save-icon:hover{
background-color: rgb(215, 215, 215);
}
.color-selector-icon:hover{
background-color: rgb(215, 215, 215);
}
.notepad-icon:active{
background-color: rgb(217, 0, 0);
}
.save-icon:active{
background-color: rgb(0, 130, 217);
}
.color-selector-icon:active{
background-color: rgb(0, 130, 217);
}
.avater-menu{
  color:white;
  font-size: large;
  grid-row: 1/2 ;
  grid-column: 3/6;
}
.avatar1-gif{
  height: 106px;
  width: 106px ;
  background-color: white;
  padding: 5px;
  border: solid black;
  border-radius: 3px;
  grid-row: 2/5;
  grid-column: 3/5;
}
.right-arrow{
  height: 26px;
  width: 26px ;
  background-color: white;
  padding: 5px;
  border: solid black;
  border-radius: 3px;
  cursor: pointer;
 grid-row: 2/3;
grid-column: 6/6;
}
.right-arrow:hover{
background-color: rgb(215, 215, 215);
}
.right-arrow:active{
background-color: rgb(0, 130, 217);
}

/*POMODORO TIMER https://www.youtube.com/watch?v=sVSAklXy1uE*/
 
.pomo-containter{
  display: flex;
  flex-direction: column; 
  align-items: left;
  justify-content: space-around;
  background-color: rgb(231, 255, 98);
  border: 3px solid black;
  border-radius: 3px;
  padding: 5px;
  width:200px;
  margin-left: 5px;
  max-height: min-content;
  position: sticky;
  top: 10px;
  flex-basis: 18%;
}

h3{
  padding: 0%;
  color: black;
}
.timer{
  font-size: 20px;
  margin-top: 0px;
  color: black;
  
}
.timer-button{
font-family: "PixelFont";
border-radius: 0.5em;
background-color: black;
border-radius: 3;
cursor: pointer;
transition: 0.1s ease-in-out;
border: 3px solid black;
padding: 5px;
}
.timer-button:hover{
  transform: scale(1.2);
  color: white;
}
.timer-button:active{
  transform: scale(0.9);
  color: red;
}
#start {
  background-color: #4de17a;
}
#stop {
  background-color: #ff4f2c;
}
#reset {
  background-color: #4da3e1;
}
.footer-copyright{
  background-color: transparent;
  
}