#grammarly-extension, .pro-writing-aid-extension {
  display: none !important;
}


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

.info {
color: black; /* Set the text color to black */
text-decoration: none; /* Remove underline */
font-weight: bold; /* Make the text bold */
font-size: 1.0em;
cursor: pointer;
}

.info:hover,
.info:active,
.info:visited {
color: black; /* Set the text color to black for hover, active, and visited states */
}

.info2 {
color: black; /* Set the text color to black */
text-decoration: none; /* Remove underline */
font-weight: bold; /* Make the text bold */
font-size: 1.2em;
cursor: pointer;

}

.info2:hover,
.info2:active,
.info2:visited {
color: black; /* Set the text color to black for hover, active, and visited states */
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    background: radial-gradient(circle, rgb(249, 247, 236) 15%,  rgb(239, 243, 224) 22%, rgb(239, 243, 224) 10%,rgba(248, 243, 182, 0.603) 48%);
  }

  #cont0 {
      width: 100%;
    height: 150px;
 
    align-items: center;
          justify-content: center;
    position: absolute;
    top: 20px;
          left: 0px;
          text-align: center;
z-index: 1000;
  }
  #cont1 {
      width: 100%;
    height: 220px;
 
    align-items: center;
          justify-content: center;
    position: absolute;
    bottom: 5px;
          left: 0px;
          text-align: center;
z-index: 4000;
  }
  #ie {
    width: 300px;
  }

  .eye-container {
    position: relative;
  }

  .eye {
    width: 100px;
    height: 100px;
    position: relative;
  
    border-radius: 50%;
    background: radial-gradient(circle, rgba(231, 207, 183, 0.813) 20%,   rgb(164, 164, 164) 50%);
    z-index: 1;
  }

  .pulse {
      animation: pulsate 2s infinite alternate;
  }
  .pulse2 {
      animation: pulsate2 5s infinite alternate;
  }

  .pupil {
    width: 18px;
    height: 18px;
    background-color: #070707;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

  }

  .eye-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
  }

  #topright {
    display: none;
 
  }
  #topleft {
    display: block;
 
  }

  .free {
    cursor: pointer;
  }

  #container {
          text-align: center;
          align-items: center;
          justify-content: center;
      }

      #timerM {
          font-size: 2em; /* Set your desired font size */
          display: block;
          margin-bottom: 20px;
          cursor: pointer;
      }

      #PP {
          font-size: 3.5em; /* Set your desired font size */
          display: block;
          cursor: pointer;
      }

      button {
          font-size: 1.5em; /* Set your desired font size */
          padding: 10px 20px;
          background-color: #3498db; /* Set your desired button color */
          color: #fff; /* Set your desired text color */
          border: none;
          cursor: pointer;
      }

   /* Hide the default checkbox */
   .toggle-checkbox {
          display: none;
      }

      /* Style the toggle switch label */
      .toggle-label {
          display: inline-block;
          cursor: pointer;
          width: 60px;
          height: 30px;
          background-color: #ccc;
          border-radius: 15px;
          position: relative;
      }

      /* Style the toggle switch handle */
      .toggle-handle {
          position: absolute;
          top: 2px;
          left: 2px;
          width: 26px;
          height: 26px;
          background-color: #fff;
          border-radius: 50%;
          transition: transform 0.3s ease;
      }

      #note {
          width: 400px;
          height: 200px;
    position: relative;  
    outline: none; /* Remove default focus outline */
          border: none;  /* Remove default border */
          padding: 10px;
          margin: 10px;
          overflow-y: auto;
          background-color: #fff;
      }

      #botright {
        display: block;
   
    }
    #botleft {
      display: block;
    }
    #im {
          color:#0c0c0c;
          display: block;
      }


      /* Style for the caret when the div is focused */
      #note:focus {
          border: 1px solid rgb(3, 3, 3); /* Add a border to indicate focus */
          box-shadow: 0 0 5px rgba(5, 5, 5, 0.5); /* Add a box shadow for focus effect */
      }


      /* Move the handle to the right when the checkbox is checked */
      .toggle-checkbox:checked + .toggle-label .toggle-handle {
          transform: translateX(30px);
      }

      .hidden {
          display: none;

      }

      .emoji {
          filter: grayscale(100%)  contrast(2.0); 
      }

      .point {
          cursor: pointer;
      }

      .fade {
  opacity: 1;
  visibility: visible;
  transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
}

.fade.hidden {
  opacity: 0;
  visibility: hidden;
}


  @keyframes pulsate {
    from {
      transform: scale(1);
    }
    to {
      transform: scale(1.1);
    }
  }

  @keyframes pulsate2 {
    from {
      transform: scale(1);
    }
    to {
      transform: scale(1.02);
    }
  }
}

@media only screen and (min-width: 768px) {
body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 88vh;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    background: radial-gradient(circle, rgb(249, 247, 236) 15%,  rgb(239, 243, 224) 22%, rgb(239, 243, 224) 10%,rgba(248, 243, 182, 0.603) 48%);
  }

  #cont1 {
      width: 100%;
    height: 300px;


    align-items: center;
          justify-content: center;
    position: absolute;
    bottom: 5px;
          left: 0px;
          text-align: center;
z-index: 1000;
  }

  .eye-container {
    position: relative;
  }

  .eye {
    width: 130px;
    height: 130px;
    position: relative;
  
    border-radius: 50%;
    background: radial-gradient(circle, rgba(231, 207, 183, 0.813) 20%,   rgb(164, 164, 164) 50%);
    z-index: 1;
  }

  .pulse {
      animation: pulsate 2s infinite alternate;
  }
  .pulse2 {
      animation: pulsate2 4.5s infinite alternate;
  }

  .pupil {
    width: 28px;
    height: 28px;
    background-color: #070707;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

  }

  .eye-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
  }

  #topright {
    position: fixed;
    top: 10px;
    right: 10px;
    padding: 10px;
 
  }
  #topleft {
    position: fixed;
    top: 10px;
    left: 10px;
    padding: 10px;
 
  }

  .free {
    cursor: pointer;
  }

  #container {
          text-align: center;
          align-items: center;
          justify-content: center;
      }

      #timerM {
          font-size: 2em; /* Set your desired font size */
          display: block;
          margin-bottom: 20px;
          cursor: pointer;
      }

      #PP {
          font-size: 3.5em; /* Set your desired font size */
          display: block;
          cursor: pointer;
      }

      button {
          font-size: 1.5em; /* Set your desired font size */
          padding: 10px 20px;
          background-color: #3498db; /* Set your desired button color */
          color: #fff; /* Set your desired text color */
          border: none;
          cursor: pointer;
      }

   /* Hide the default checkbox */
   .toggle-checkbox {
          display: none;
      }

      /* Style the toggle switch label */
      .toggle-label {
          display: inline-block;
          cursor: pointer;
          width: 60px;
          height: 30px;
          background-color: #ccc;
          border-radius: 15px;
          position: relative;
      }

      /* Style the toggle switch handle */
      .toggle-handle {
          position: absolute;
          top: 2px;
          left: 2px;
          width: 26px;
          height: 26px;
          background-color: #fff;
          border-radius: 50%;
          transition: transform 0.3s ease;
      }

      #note {
          width: 400px;
          height: 200px;
    position: relative;  
    outline: none; /* Remove default focus outline */
          border: none;  /* Remove default border */
          padding: 10px;
          margin: 10px;
          overflow-y: auto;
          background-color: #fff;
      }

      #botright {
      position: fixed;
      bottom: 10px;
      right: 10px;
      padding: 10px;
      z-index: 2000000;
   
    }
    #botleft {
      position: fixed;
      bottom: 10px;
      left: 10px;
      padding: 10px;
      z-index: 200000;
    }
    #im {
          color:#0c0c0c;
          position: block;
      
    
      }
      #im0 {
          color:#0c0c0c;
          position: block;
      
    
      }

   
        .info {
color: black; /* Set the text color to black */
text-decoration: none; /* Remove underline */
font-weight: bold; /* Make the text bold */
font-size: 1.0em;
cursor: pointer;
}

.info:hover,
.info:active,
.info:visited {
color: black; /* Set the text color to black for hover, active, and visited states */
}

.info2 {
color: black; /* Set the text color to black */
text-decoration: none; /* Remove underline */
font-weight: bold; /* Make the text bold */
font-size: 1.2em;
cursor: pointer;

}

.info2:hover,
.info2:active,
.info2:visited {
color: black; /* Set the text color to black for hover, active, and visited states */
}



      /* Style for the caret when the div is focused */
      #note:focus {
          border: 1px solid rgb(3, 3, 3); /* Add a border to indicate focus */
          box-shadow: 0 0 5px rgba(5, 5, 5, 0.5); /* Add a box shadow for focus effect */
      }


      /* Move the handle to the right when the checkbox is checked */
      .toggle-checkbox:checked + .toggle-label .toggle-handle {
          transform: translateX(30px);
      }

      .hidden {
          display: none;

      }

      .emoji {
          filter: grayscale(100%)  contrast(2.0); 
      }

      .point {
          cursor: pointer;
      }

      .fade {
  opacity: 1;
  visibility: visible;
  transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
}

.fade.hidden {
  opacity: 0;
  visibility: hidden;
}


  @keyframes pulsate {
    from {
      transform: scale(1);
    }
    to {
      transform: scale(1.1);
    }
  }

  @keyframes pulsate2 {
    from {
      transform: scale(1);
    }
    to {
      transform: scale(1.1);
    }
  }
}