:root {
  --colour01: rgb(0, 0, 0);
  --colour02: rgb(255, 255, 255);
  /* --colour03: rgb(255, 136, 57);
  --colour04: rgba(0, 0, 225, 0.949); */
  --border: inset 0.12rem var(--colour01);
}

body {
  /* margin: 40px; */
  /* display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; */
  /* max-width: 100%; */

  /* min-width needed to allow zoom in of the website without the containers being cut off
  granting users more precise crops and collage functions (image positioning, scaling etc.)
  1200px is the perfect size as it provides sufficient empty space on each sides of the container for visual clarity 
  Zooming in beyond 125% finds glitches where the website begins zooming towards the top-left of the page, due to containers being cut off by the screen's borders.
  Below 150% the zoom works as intended, i.e. zooming towards middle of the screen */
  min-width: 1200px;
  background-color: var(--colour02);
  color: var(--colour01);
  /* margin: 30px; */
  /* border: var(--border); */
}

h1 {
  text-align: center;
  font-family: cursive;
  font-weight: bolder;
  font-style: italic;
  font-size: 50px;
  padding-top: 50px;
  padding-bottom: 30px;
}

#cropped-image {
  display: block;
  max-width: 50%;
}

#workspace {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 45px;
  margin: 40px;
}

/* The positioning the pointing-down arrow is in the center, near-bottom of the page to signal that something extra is down where the arrow is pointing towards. 
To further enforce this idea, the arrow is animated with a subtle "bounce" motion to catch the users' attention.
As a result, the users are hopefully more inclined to discover what the arrow is signalling to, and as a result, scroll down to discover the keybind controls,
enhancing learnability, hence usability of my creative tool. */
#scroll-hint {
  position: relative;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 19px;
  height: 10px;
  opacity: 0.85;
  cursor: pointer;
  animation: bounce 1.5s infinite;
  transition: opacity 0.5s ease;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(7px);
  }
}

#inputImage {
  padding-top: 10px;
}

#trash {
  max-width: 15.5px;
  max-height: 15.5px;
}

#rclick-img {
  width: 25px;
  height: 36px;
}

#mwheel-img {
  width: 40px;
  height: 44px;
}

.icon-word {
  font-size: 13px;
  font-style: italic;
  padding-bottom: 2px;
}

#clear-btn {
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 3px;
  padding-right: 3px;
  /* Ease transitions used for visual smoothness and pleasantry */
  transition: background-color 0.1s ease;
}

/* Red and Amber colours specifically used for their semantics reference to traffic light colours
Red = DANGER/STOP = quickly and strongly makes users aware that something negative happened when clicking the clear-canvas button for the first time, making them re-think their decision.
Amber = Final Warning = more pleasant middle colour needed for defusion of the intense negative feeling the initial red created, acting as a smooth reversion back to normal state 

I decided to convey the modal through this design because it maintains
the minimalistic characteristic of my webpage and also retains users' immersion.
The expected pop-up confirmation type modal is quite visually disruptive,
and could be a frustration for users who may frequently use the clearCanvas function, to always be met with such an intense pop-up window leading to a decline in user satisfaction and experience.

My modal design, in comparison, is more
interactive, visually pleasing, fun and more novel pertaining to information design in how I convey the modal,
which I hope will evoke a positive reaction from first-time users.

However, this modal design may arise issues related to learnability, which consequently impairs usability. 
The issue is that the modal design is hidden behind a button that houses an icon,
which has no obvious visible instructions attached to it, to inform users of what the button does and how it does it.

As a result, user usability is impaired due to a lack of understanding of the button's function.
(As mentioned in the HTML file) To try and mitigate this, I added a title for the button, which displays its function if users hover over it.

However, I realise there is no information regarding the colours' meanings and is fully reliant on users' own intuition and curiosity to figure out their purpose.
Hence learnability and usability is completely dependent on users, when on the topic of my "traffic-light" modal design. */
#clear-btn.armed {
  background-color: rgba(255, 0, 0, 0.459);
}

#clear-btn.expired {
  background-color: rgba(255, 142, 50, 0.728);
  transition: background-color 0.3s ease;
}

.btn {
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 4px;
  padding-right: 4px;
}

#button-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
}

#left-buttons {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* I designed these buttons to be initally hidden ("visibility: hidden") 
to improve visual clarity and give a clear sense of direction for first-time users,
removing the need of extra visual instructions to guide users of what to do first.

This method of learnability is once again completely reliant on user intuition. 
However, this may develop a more intimate connection between my creative tool and users, as it encourages greater engagement and exploration,
leading to a more satisfying/fulfilling experience through users completing a challenge of figuring out how to use my creative tool, seemingly without any external help. 
More insight about "visibility: hidden" can be found in my javascript */
#cropButton,
#downloadButton,
#clearCanvasButton {
  display: inline-block;
  visibility: hidden;
  /* padding-top: 8px; */
}

#shapeToggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding-bottom: 50px;
}

.toggleBtn {
  width: 60px;
  height: 60px;
  cursor: pointer;
  border: 1.5px solid rgba(83, 83, 83, 0.363);
  /* border: 1.5px solid rgb(110, 233, 255); */
  background: rgba(78, 78, 78, 0.055);
  color: rgba(0, 0, 0, 0.26);
  border-radius: 12px;
  font-size: 40px;
  /* display: flex;
  align-items: center;
  justify-content: center; */
}

[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  z-index: 1;
  position: absolute;
  bottom: auto;
  top: 110%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.75);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  /* This code, which allows me shorten the time-delay between hover and information pop-up, is the SOLE reason I created a custom tool-tip

  As I mentioned in the HTML, having the information pop-up instantly enhances user learnability as it quickly informs them of the button's purpose.
  This is particularly crucial in the case of the clearCanvasButton where its function is quite abnormal, making it less intuitive for first-time users,
  leading to a higher chance of users accidentally deleting their canvas simply due to curiosity of what the button does,
  or frustration from the button not doing anything after the first-click.

  The increase chance of accidentally executing the clearCanvas function is quite literally the opposite of what I was intending when designing the traffic-light type modal for the button. */
  transition: opacity 0.15s ease;
}

[data-tooltip]:hover::after {
  opacity: 1;
}

#clear-btn::after {
  bottom: auto;
  top: 50%;
  left: auto;
  right: 125%;
  transform: translateY(-50%);
}

#squareToggle {
  padding-bottom: 8px;
}

#circleToggle {
  padding-bottom: 5px;
}

.toggleBtn.active {
  background: rgb(59, 70, 73);
  color: rgb(110, 233, 255);
}

body.circle-mode .cropper-view-box,
body.circle-mode .cropper-face {
  border-radius: 50%;
}

#cropperContainer {
  background-color: rgb(233, 233, 233);
  box-shadow: 0px 0px 0px 1.5px rgb(0, 0, 0);
  border-radius: 5px;
  width: 500px;
  height: 500px;
  overflow: hidden;
  position: relative;
}

#croppedImage {
  max-width: 100%;
  display: block;
}

#cropped-container {
  background-color: rgb(233, 233, 233);
  width: 500px;
  height: 500px;
  /* Used Box-Shadow for outline of the container instead of "outline" and "border" 
  Because box-shadow doesn't blur the reality between what the user sees and the downloaded image
  i.e. a cropped image is unseen on user's screen when dragged to edge of the canvas
  but when downloaded, that cropped image bleeds onto the canvas*/
  box-shadow: 0px 0px 0px 1.5px rgb(0, 0, 0);
  /* outline: 2px solid var(--colour01); */
  /* border: var(--border); */
  border-radius: 5px;
  overflow: hidden;
}

.cropper-point.point-se {
  width: 5px !important;
  height: 5px !important;
}

#controls-title {
  text-align: center;
  font-family: cursive;
  /* font-style: italic; */
  /* font-weight: bolder; */
  font-size: 29px;
  padding-top: 50px;
  padding-bottom: 25px;
}

#guide {
  display: flex;
  justify-content: center;
  gap: 9.4rem;
}

/* I finally conjured a keybind manual design that I am proud of */
/* Separation of the keybinds to be placed under their respective containers */
/* ONCE AGAIN, learnability is fully reliant on users' intuition, if they can make the connection between keybind and container, and that those keybinds ONLY work for that specific container.
However, if my design is intuitive enough, learnability is GREATLY enhanced, all the while maintaining the minimalistic style and visual clarity.  */
#cropper-keybinds {
  display: flex;
  align-items: center;
  flex-direction: column;
  /* Makes it stick to the left of the container
  Comment padding-right out to center it */
  /* padding-right: 40.6rem; */
  /* gap: 2rem; */
  gap: 15px;
  margin-bottom: 50px;
}

#collage-keybinds {
  display: flex;
  align-items: center;
  flex-direction: column;
  /* Makes it stick to the left of the container
  Comment padding-right out to center it */
  /* padding-right: 40.6rem; */
  padding-right: 2px;
  /* gap: 2rem; */
  gap: 15px;
  margin-bottom: 50px;
}

.guide-row {
  display: flex;
  gap: 0px;
  width: 500px;
}

#cropper-keybinds .guide-row .keybind {
  min-width: 80px;
}

.guide-row .keybind {
  min-width: 180px;
  display: flex;
  gap: 6px;
  font-size: 16px;
}

.key-desc {
  font-size: 17px;
  display: flex;
  align-items: center;
}

.key {
  background-color: rgba(250, 250, 250, 0.808);
  border: 0.12rem;
  /* border: inset, 0.12rem; */
  border-color: rgba(255, 255, 255, 0.418);
  box-shadow: 1px 1px 0px 1px rgba(0, 0, 0, 0.082);
  border-radius: 5px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 16px;
  padding-right: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: auto;
}

.icon-key {
  background-color: rgba(250, 250, 250, 0.808);
  border: 0.12rem;
  /* border: inset, 0.12rem; */
  border-color: rgba(255, 255, 255, 0.418);
  box-shadow: 1px 1px 0px 1px rgba(0, 0, 0, 0.082);
  max-width: 58px;
  max-height: 74.2px;
  border-radius: 5px;
  padding-top: 10px;
  padding-bottom: 12px;
  padding-left: 16px;
  padding-right: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: auto;
}

/* Connect words are a smaller font-size than "key" and "key-descriptions" as to not distract users from the main subject
and to improve visual clarity. */
.connect-word {
  font-size: 13px;
  padding-top: 14px;
  font-style: italic;
}