@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500&display=swap");
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  border-radius: 3px;
}

html {
  font-family: "Montserrat";
}

.mainContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.urlCard{
  margin: 2vw;
  margin-top: 4vw;
  border-style: solid;
  border-width: 1px;
  border-color: wheat;
  width: fit-content;
  padding: 2vw;
}

a {
  text-decoration: none;
    text-decoration: none;
    color: white;
    display: inline-block;
    background-size: 120% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
    -ms-background-clip: text;
    -ms-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    transition: all 0.15s cubic-bezier(0.68, -0.25, 0.265, 1.25);
    background-image: linear-gradient(45deg, #FD8BA9, #9A94E8, #2EDBF8, #F5F1C8, #FD8BA9);
}

.highShadow {
  box-shadow: var(--shadow-elevation-high);
}

.mediumShadow{
  box-shadow: var(--shadow-elevation-medium);
}

.areaDefiner{
  margin: 2vh;
}

:root {
  --shadow-color: 286deg 36% 56%;
  --shadow-elevation-low:
    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34),
    0.4px 0.8px 1px -1.2px hsl(var(--shadow-color) / 0.34),
    1px 2px 2.5px -2.5px hsl(var(--shadow-color) / 0.34);
  --shadow-elevation-medium:
    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.36),
    0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / 0.36),
    2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color) / 0.36),
    5px 10px 12.6px -2.5px hsl(var(--shadow-color) / 0.36);
  --shadow-elevation-high:
    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34),
    1.5px 2.9px 3.7px -0.4px hsl(var(--shadow-color) / 0.34),
    2.7px 5.4px 6.8px -0.7px hsl(var(--shadow-color) / 0.34),
    4.5px 8.9px 11.2px -1.1px hsl(var(--shadow-color) / 0.34),
    7.1px 14.3px 18px -1.4px hsl(var(--shadow-color) / 0.34),
    11.2px 22.3px 28.1px -1.8px hsl(var(--shadow-color) / 0.34),
    17px 33.9px 42.7px -2.1px hsl(var(--shadow-color) / 0.34),
    25px 50px 62.9px -2.5px hsl(var(--shadow-color) / 0.34);
}

img {
  max-width:100%;
  height:auto;
}

#progressBar {
  background-color: aquamarine;
  height: 100%;
}

#emptyProgressBar {
  background-color: aliceblue;
  width: 100%;
  height: 3vh;
}

#backgroundImage {
  border-radius: 4px;
}

.container {
  margin: 20px;
  border-style: solid;
  border-width: 1px;
  border-color: wheat;
  width: fit-content;
  padding: 20px;
}

.canvasContainer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px;
  /* background-color: aqua; */
}

.backgroundDiv {
  position: absolute;
  z-index: 0;
  border-radius: 8px;
}

#squareFactory{
  position: absolute;
  z-index: 2;
  bottom: 10px;  /* position the top  edge of the element at the middle of the parent */
  left: 10px;
  width: auto;
  height: auto;
}

#nameOfOccasionTextArea{
  position: absolute;
  z-index: 3;
  color: #ffffff;
  top: 2%;
  left: 3%;
}

svg {
  /* vertical-align:top; */
  display: block;
}