@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

body {
  font-size: 1.5rem;
  background-color: #141416 !important;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body > iframe {
  display: none;
}

a {
  color: #5f64b5 !important;
  text-decoration: none !important;
}

#footer {
  font-size: large;
  text-align: center;
  bottom: 0;
  width: 100%;
  color: #353945;
  padding: 50px 50px 50px 100px;
}

.App {
  color: #fcfcfd;
  text-align: center;
  background-color: "blue";
}

html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
body {
  color: rgba(0, 0, 0, 0.87);
  margin: 0;
  font-size: 0.875rem;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  line-height: 1.43;
  letter-spacing: 0.01071em;
  background-color: #fafafa;
}
@media print {
  body {
    background-color: #fff;
  }
}

.Paper-root {
  color: rgba(0, 0, 0, 0.87);
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  background-color: #fff;
}
.Paper-rounded {
  border-radius: 4px;
}
.Paper-outlined {
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.TouchRipple-root {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  overflow: hidden;
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}

.ButtonBase-root {
  color: inherit;
  border: 0;
  cursor: pointer;
  margin: 0;
  display: inline-flex;
  outline: 0;
  padding: 0;
  position: relative;
  align-items: center;
  user-select: none;
  border-radius: 0;
  vertical-align: middle;
  -moz-appearance: none;
  justify-content: center;
  text-decoration: none;
  background-color: transparent;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.ButtonBase-root::-moz-focus-inner {
  border-style: none;
}
@media print {
  .ButtonBase-root {
    -webkit-print-color-adjust: exact;
  }
}

.Chip-root {
  border: none;
  cursor: default;
  height: 32px;
  display: inline-flex;
  outline: 0;
  padding: 0;
  font-size: 0.8125rem;
  box-sizing: border-box;
  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  align-items: center;
  font-family: "Raleway", "Helvetica", "Arial", sans-serif;
  white-space: nowrap;
  vertical-align: middle;
  justify-content: center;
  text-decoration: none;
}
.Chip-clickable {
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.Chip-clickable:hover,
.Chip-clickable:focus {
  background-color: rgb(206, 206, 206);
}
.Chip-clickable:active {
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}
.Chip-outlined {
  border: 1px solid rgba(0, 0, 0, 0.23);
  background-color: transparent;
}
.Chip-clickable.Chip-outlined:hover,
.Chip-clickable.Chip-outlined:focus {
  background-color: rgba(0, 0, 0, 0.04);
}
.Chip-label {
  overflow: hidden;
  white-space: nowrap;
  padding-left: 12px;
  padding-right: 12px;
  text-overflow: ellipsis;
}

.Typography-root {
  margin: 0;
}
.Typography-h3 {
  font-size: 3rem;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  line-height: 1.167;
  letter-spacing: 0em;
}
.Typography-gutterBottom {
  margin-bottom: 0.35em;
}

.bottom-space {
  margin-top: -7vh;
  margin-bottom: 1vh;
}

.grid-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}
.grid-item {
  margin: 0;
  box-sizing: border-box;
}
.grid-justify-content-xs-center {
  justify-content: center;
}
.grid-spacing-xs-2 {
  width: calc(100% + 16px);
  margin: -8px;
}
.grid-spacing-xs-2 > .grid-item {
  padding: 8px;
}
.grid-spacing-xs-5 {
  width: calc(100% + 40px);
  margin: -20px;
}
.grid-spacing-xs-5 > .grid-item {
  padding: 20px;
}
.grid-grid-xs-12 {
  flex-grow: 0;
  max-width: 100%;
  flex-basis: 100%;
}

.nftImg {
  height: 20rem;
  image-rendering: pixelated;
}

.CardContent-root {
  padding: 16px;
}

.Card-root {
  overflow: hidden;
}

.root-1 {
  color: white;
  height: 100%;
  flex-grow: 1;
  background: #141416;
}
.chip-5 {
  height: 40px;
  padding: 5px;
  font-size: 14px;
  font-weight: bold;
  border-color: #353945;
  border-width: 2px;
  word-spacing: 1.1px;
  border-radius: 20px;
  letter-spacing: 1.1px;
}

.purple-text {
  color: #5f64b5 !important;
}

.body-7 {
  justify-content: center;
  margin-left: 200px;
  margin-right: 200px;
  margin-bottom: 100px;
}

.price-input {
  margin-top: 10px;
  margin-bottom: -10px;
}
.up-9 {
  margin-top: 40px;
}
.title-12 {
  font-weight: medium;
  padding-top: 50px;
  word-spacing: 1.1px;
  letter-spacing: 1.1px;
}
.bodys-13 {
  color: #777e90;
  max-width: 300px;
  margin-top: 20px;
  margin-bottom: 20px;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

.Paper-root {
  color: rgba(0, 0, 0, 0.87);
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  background-color: #fff;
}
.Paper-elevation4 {
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

.AppBar-root {
  width: 100%;
  display: flex;
  z-index: 1100;
  box-sizing: border-box;
  flex-shrink: 0;
  flex-direction: column;
}
.AppBar-positionStatic {
  position: static;
}
.AppBar-colorPrimary {
  color: #fcfcfd;
  background-color: #adadb300;
}

.Toolbar-root {
  display: flex;
  position: relative;
  align-items: center;
}
.Toolbar-gutters {
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 600px) {
  .Toolbar-gutters {
    padding-left: 24px;
    padding-right: 24px;
  }
}
.Toolbar-regular {
  min-height: 56px;
}
@media (min-width: 0px) and (orientation: landscape) {
  .Toolbar-regular {
    min-height: 48px;
  }
}
@media (min-width: 600px) {
  .Toolbar-regular {
    min-height: 64px;
  }
}

.TouchRipple-root {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  overflow: hidden;
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}

.ButtonBase-root {
  color: inherit;
  border: 0;
  cursor: pointer;
  margin: 0;
  display: inline-flex;
  outline: 0;
  padding: 0;
  position: relative;
  align-items: center;
  user-select: none;
  border-radius: 0;
  vertical-align: middle;
  -moz-appearance: none;
  justify-content: center;
  text-decoration: none;
  background-color: transparent;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.ButtonBase-root::-moz-focus-inner {
  border-style: none;
}
@media print {
  .ButtonBase-root {
    -webkit-print-color-adjust: exact;
  }
}

.Button-root {
  color: rgba(0, 0, 0, 0.87);
  padding: 6px 16px;
  font-size: 0.875rem;
  min-width: 64px;
  box-sizing: border-box;
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-weight: 500;
  line-height: 1.75;
  border-radius: 4px;
  letter-spacing: 0.02857em;
  text-transform: uppercase;
}
.Button-root:hover {
  text-decoration: none;
  background-color: rgba(0, 0, 0, 0.04);
}
@media (hover: none) {
  .Button-root:hover {
    background-color: transparent;
  }
}
.Button-label {
  width: 100%;
  display: inherit;
  align-items: inherit;
  justify-content: inherit;
}
.Button-text {
  padding: 6px 8px;
}

.app-root-1 {
  flex-grow: 1;
}
.header-navButtons-3 {
  color: #777e90;
  font-size: 20px;
  margin-right: 8px;
  text-transform: none;
}
.header-left-4 {
  margin-left: 16px;
}
.header-empty-6 {
  flex-grow: 1;
}
.header-space-8 {
  margin-right: 16px;
}
.header-vertical-9 {
  height: 35px;
  border-left: 0.5px solid #ffffff;
  margin-right: 16px;
}
.header-logo-11 {
  margin-right: 1px;
  height: 50px;
  width: 55px;
}

.header-logo-text {
  font-size: 20px;
}

.header-appBar-13 {
  height: 80px;
  border-bottom: 0.4px solid #353945;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

.form-InputBase-root {
  color: rgba(255, 255, 255, 0.87);
  cursor: text;
  display: inline-flex;
  position: relative;
  font-size: 1rem;
  box-sizing: border-box;
  align-items: center;
  font-family: "Raleway", "Helvetica", "Arial", sans-serif;
  font-weight: bolder;
  line-height: 1.1876em;
  letter-spacing: 0.00938em;
  background-color: rgba(0, 0, 0, 0.5);
}
.form-InputBase-multiline {
  padding: 6px 0 7px;
}
.form-InputBase-fullWidth {
  width: 100%;
}
.form-InputBase-input {
  font: inherit;
  color: currentColor;
  width: 100%;
  border: 0;
  height: 1.1876em;
  margin: 0;
  display: block;
  padding: 6px 0 7px;
  min-width: 0;
  background: none;
  box-sizing: content-box;
  animation-name: mui-auto-fill-cancel;
  letter-spacing: inherit;
  animation-duration: 10ms;
  -webkit-tap-highlight-color: transparent;
}
.form-InputBase-input::-webkit-input-placeholder {
  color: currentColor;
  opacity: 0.42;
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
.form-InputBase-input::-moz-placeholder {
  color: currentColor;
  opacity: 0.42;
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
.form-InputBase-input:-ms-input-placeholder {
  color: currentColor;
  opacity: 0.42;
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
.form-InputBase-input::-ms-input-placeholder {
  color: currentColor;
  opacity: 0.42;
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
.form-InputBase-input:focus {
  outline: 0;
}
.form-InputBase-input:invalid {
  box-shadow: none;
}
label[data-shrink="false"]
  + .form-InputBase-formControl
  .form-InputBase-input::-webkit-input-placeholder {
  opacity: 0 !important;
}
label[data-shrink="false"]
  + .form-InputBase-formControl
  .form-InputBase-input::-moz-placeholder {
  opacity: 0 !important;
}
label[data-shrink="false"]
  + .form-InputBase-formControl
  .form-InputBase-input:-ms-input-placeholder {
  opacity: 0 !important;
}
label[data-shrink="false"]
  + .form-InputBase-formControl
  .form-InputBase-input::-ms-input-placeholder {
  opacity: 0 !important;
}
label[data-shrink="false"]
  + .form-InputBase-formControl
  .form-InputBase-input:focus::-webkit-input-placeholder {
  opacity: 0.42;
}
label[data-shrink="false"]
  + .form-InputBase-formControl
  .form-InputBase-input:focus::-moz-placeholder {
  opacity: 0.42;
}
label[data-shrink="false"]
  + .form-InputBase-formControl
  .form-InputBase-input:focus:-ms-input-placeholder {
  opacity: 0.42;
}
label[data-shrink="false"]
  + .form-InputBase-formControl
  .form-InputBase-input:focus::-ms-input-placeholder {
  opacity: 0.42;
}
.form-InputBase-inputMultiline {
  height: auto;
  resize: none;
  padding: 0;
}

.PrivateNotchedOutline-root-60 {
  top: 0px; /*Changed Private Notched Outline*/
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0 8px;
  overflow: hidden;
  position: absolute;
  border-style: solid;
  border-width: 1px;
  border-radius: inherit;
  pointer-events: none;
}
.PrivateNotchedOutline-legendLabelled-62 {
  width: auto;
  height: 11px;
  display: block;
  padding: 0;
  font-size: 0.75em;
  max-width: 0.01px;
  text-align: left;
  transition: max-width 50ms cubic-bezier(0, 0, 0.2, 1) 0ms;
  visibility: hidden;
}
.PrivateNotchedOutline-legendLabelled-62 > span {
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
}

.form-OutlinedInput-root {
  position: relative;
  /*border-radius: 12px;*/
}

.form-OutlinedInput-notchedOutline {
  border-color: rgba(6,181,187, 0.5);
  border-width: 2px;
  color: rgba(197, 191, 191, 0.548);
  transition: border-color 0.51s ease;
}
 
.form-FormControl-root input[type="text"] {
  box-shadow: 0 0 20px rgb(6, 181, 187,0.5);
  color: #0affb3  !important;
  text-shadow: 0 0 8px rgba(0, 255,179, 0.6);
  animation: glowpulse 2s infinite;
  font-weight: 500;
  letter-spacing: 0.5px;
}

input::placeholder {
  opacity: 0.8 !important;
  font-weight: 500;
}

@keyframes glowpulse{
  0%{box-shadow: 0 0 5px rgb(6, 181, 187,0.8);}
  50%{box-shadow: 0 0 20px rgb(6, 181, 187,0.8), 0 0 30px rgb(6, 181, 187,0.8);}
  100%{box-shadow: 0 0 5px rgb(6, 181, 187,0.8);}
}

.form-OutlinedInput-root:hover .form-OutlinedInput-notchedOutline {
  border-color: rgba(6,181,187, 0.9) !important;
  box-shadow: 0 0 25px rgba(6,181,187,0.7); 

}
@media (hover: none) {
  .form-OutlinedInput-root:hover .form-OutlinedInput-notchedOutline {
    border-color: rgba(6,181,187, 0.5) !important;
  }
}
.form-OutlinedInput-multiline {
  padding: 18.5px 14px;
}

.upload-container {
  width: 100%;
  text-align: left;
  display:flex;
  justify-content: center;
  position: relative;
  margin-bottom: 10px;
}



.upload {
  padding: 18.5px 0px !important;
  width: 220px;
  height: 70px;
  overflow: hidden; 
  opacity: 0;
  position: absolute;
  z-index: -1;
}

.upload_visible{
  background-color: rgba(0, 0, 0, 0.04);
  border: 1px solid #00ffb3;
  box-shadow: 0 0 10px rgba(0, 255,179,0.5);
  border-radius: 2px;
  transition: all 0.3s ease;
  font-family: "Raleway", serif;
  text-align: center;
  padding-top: 2px;
  border-radius: 2px;
  box-sizing: border-box;
  width: 7rem;
  height: 2rem;
  overflow: hidden;
}

.upload_visible:hover, .upload_visible:focus{
  background-color: rgba(0, 255,179,0.2);
  box-shadow: 0 0 15px rgba(0,255,179,0.7);
}

.error-gradient{
  box-shadow: 0 0 50px rgba(255, 0, 0, 0.5);
  animation: errorGlowPulse infinite ease-in;
}

@keyframes errorGlowPulse {
  0%{box-shadow: 0 0 20px rgba(187, 6, 6, 0.9);}
  50%{box-shadow: 0 0 100px rgba(187, 6, 6, 0.9), 0 0 30px rgba(187, 6, 6, 0.8);}
  100%{box-shadow: 0 0 50px rgba(187, 6, 6, 0.8);}
}

.form-FormControl-root input[type="text"].error-gradient{
  box-shadow: 0 0 50px rgba(255, 0, 0, 0.5);
  color: #0affb3  !important;
  text-shadow: 0 0 8px rgba(255, 0, 0, 0.6);
  animation: errorGlowPulse 2s infinite;
  font-weight: 500;
  letter-spacing: 0.5px;
}
 

.file-name {
  margin-left: 10px;
  color: rgba(0,255,179,0.8);
  font-family: "Raleway", serif;
  text-shadow: 0 0 5px rgba(0,255,179,0.3);
  pointer-events: none;
}

.form-OutlinedInput-input {
  padding: 18.5px 14px;
}
.form-OutlinedInput-inputMultiline {
  padding: 0;
}

.form-FormLabel-root {
  color: rgba(250, 249, 249, 0.54);
  padding: 0;
  font-size: 1rem;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.00938em;
}

.form-InputLabel-root {
  display: block;
  transform-origin: top left;
}
.form-InputLabel-formControl {
  top: 0;
  left: 0;
  position: absolute;
  transform: translate(0, 24px) scale(1);
}
.form-InputLabel-animated {
  transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
    transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}
.form-InputLabel-outlined {
  z-index: 1;
  transform: translate(14px, 20px) scale(1);
  pointer-events: none;
}

.form-FormControl-root {
  border: 0;
  margin: 0;
  display: inline-flex;
  padding: 0;
  position: relative;
  min-width: 0;
  flex-direction: column;
  vertical-align: top;
}
.form-FormControl-marginNormal {
  margin-top: 16px;
  margin-bottom: 8px;
}
.form-FormControl-fullWidth {
  width: 100%;
}

.form-SvgIcon-root {
  fill: currentColor;
  width: 1em;
  height: 1em;
  display: inline-block;
  font-size: 1.5rem;
  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  flex-shrink: 0;
  user-select: none;
}

.form-Typography-root {
  margin: 0;
}
.form-Typography-h3 {
  font-size: 3rem;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  line-height: 1.167;
  letter-spacing: 0em;
}
.form-Typography-subtitle1 {
  font-size: 1rem;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.00938em;
}
.form-Typography-gutterBottom {
  margin-bottom: 0.35em;
}

.form-Toolbar-root {
  display: flex;
  position: relative;
  align-items: center;
}
.form-Toolbar-gutters {
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 600px) {
  .form-Toolbar-gutters {
    padding-left: 24px;
    padding-right: 24px;
  }
}
.form-Toolbar-regular {
  min-height: 56px;
}
@media (min-width: 0px) and (orientation: landscape) {
  .form-Toolbar-regular {
    min-height: 48px;
  }
}
@media (min-width: 600px) {
  .form-Toolbar-regular {
    min-height: 64px;
  }
}

.form-TouchRipple-root {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  overflow: hidden;
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}

.form-ButtonBase-root {
  color: inherit;
  border: 0;
  cursor: pointer;
  margin: 0;
  display: inline-flex;
  outline: 0;
  padding: 0;
  position: relative;
  align-items: center;
  user-select: none;
  border-radius: 0;
  vertical-align: middle;
  -moz-appearance: none;
  justify-content: center;
  text-decoration: none;
  background-color: transparent;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.form-ButtonBase-root::-moz-focus-inner {
  border-style: none;
}
@media print {
  .form-ButtonBase-root {
    -webkit-print-color-adjust: exact;
  }
}

.form-Chip-root {
  color: #fff;
  border: none;
  cursor: default;
  height: 32px;
  display: inline-flex;
  outline: 0;
  padding: 0;
  font-size: 0.8125rem;
  box-sizing: border-box;
  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  align-items: center;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  white-space: nowrap;
  border-radius: 16px;
  vertical-align: middle;
  justify-content: center;
  text-decoration: none;
  background-color: #e0e0e0;
}
.form-Chip-root .form-Chip-avatar {
  color: #616161;
  width: 24px;
  height: 24px;
  font-size: 0.75rem;
  margin-left: 5px;
  margin-right: -6px;
}
.form-Chip-clickable {
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.form-Chip-clickable:hover,
.form-Chip-clickable:focus {
  background-color: rgb(206, 206, 206);
}
.form-Chip-clickable:active {
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}
.form-Chip-outlined {
  border: 1px solid rgba(0, 0, 0, 0.23);
  background-color: transparent;
}
.form-Chip-outlined .form-Chip-avatar {
  margin-left: 4px;
}
.form-Chip-label {
  overflow: hidden;
  white-space: nowrap;
  padding-left: 12px;
  padding-right: 12px;
  text-overflow: ellipsis;
}

.form-Button-root {
  color: rgba(0, 0, 0, 0.87);
  padding: 6px 16px;
  font-size: 0.875rem;
  min-width: 64px;
  box-sizing: border-box;
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-weight: 500;
  line-height: 1.75;
  border-radius: 4px;
  letter-spacing: 0.02857em;
  text-transform: uppercase;
}
.form-Button-root:hover {
  text-decoration: none;
  background-color: rgba(0, 0, 0, 0.04);
}
@media (hover: none) {
  .form-Button-root:hover {
    background-color: transparent;
  }
}
.form-Button-label {
  width: 100%;
  display: inherit;
  align-items: inherit;
  justify-content: inherit;
}
.form-Button-text {
  padding: 6px 8px;
}

.makeStyles-root-87 {
  color: white;
  height: 120vh;
  flex-grow: 1;
  background: #141416;
}
.makeStyles-head-88 {
  height: 90px;
  border-bottom: 0.4px solid #353945;
}
.makeStyles-spacing-90 {
  flex-grow: 1;
}
.makeStyles-chip-91 {
  height: 40px;
  padding: 5px;
  font-size: 14px;
  font-weight: bold;
  border-color: #353945;
  border-width: 2px;
  word-spacing: 1.1px;
  border-radius: 20px;
  letter-spacing: 1.1px;
}
.makeStyles-navButtons-92 {
  color: #777e90;
  font-size: 14px;
  margin-right: 8px;
  text-transform: none;
}
.minter-container {
  width: 40vw;
  margin-bottom: 10vh;
  font-family: "Raleway", serif;
}

.minter-container h6{
  font-weight: bolder;
}
.makeStyles-start-95 {
  margin-left: 16px;
}
.makeStyles-endButton-97 {
  color: white;
  font-size: 14px;
  margin-right: 16px;
  text-transform: none;
}
.makeStyles-icon-98 {
  color: #777e90;
  width: 10px;
  height: 10px;
  margin-right: 16px;
}
.makeStyles-title-99 {
  font-weight: medium;
  padding-top: 50px;
  word-spacing: 1.1px;
  margin-bottom: 40px;
  letter-spacing: 1.1px;
}
.makeStyles-subhead-102 {
  font-size: 14;
  text-align: left;
}
.makeStyles-inputColor-106 {
  color: #777e90;
}
.makeStyles-chipBlue-108 {
  height: 50px;
  padding: 5px;
  font-size: 16px;
  margin-top: 40px;
}
.makeStyles-form-109 .form-OutlinedInput-input {
  color: white;
  border-color: #353945;
}
.makeStyles-form-109 .form-OutlinedInput-root {
  color: #777e90;
}
.makeStyles-form-109 .form-OutlinedInput-root fieldset {
  color: #777e90;
  border-color: #353945;
}
.makeStyles-form-109 .form-OutlinedInput-root:hover fieldset {
  color: #777e90;
  border-color: #5f64b5;
}
.makeStyles-form-109 .form-TextField-root fieldset {
  color: #777e90;
  border-color: #353945;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

.disPaper-root {
  color: rgba(0, 0, 0, 0.87);
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  background-color: #fff;
}
.disPaper-rounded {
  border-radius: 4px;
}
.disPaper-elevation1 {
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}

.disTouchRipple-root {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  overflow: hidden;
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}

.disButtonBase-root {
  color: inherit;
  border: 0;
  cursor: pointer;
  margin: 0;
  display: inline-flex;
  outline: 0;
  padding: 0;
  position: relative;
  align-items: center;
  user-select: none;
  border-radius: 0;
  vertical-align: middle;
  -moz-appearance: none;
  justify-content: center;
  text-decoration: none;
  background-color: transparent;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.disButtonBase-root::-moz-focus-inner {
  border-style: none;
}
@media print {
  .disButtonBase-root {
    -webkit-print-color-adjust: exact;
  }
}

.disChip-root {
  color: #fff;
  border: none;
  cursor: default;
  display: inline-flex;
  outline: 0;
  padding: 0;
  height: auto;
  font-size: 0.8125rem;
  box-sizing: border-box;
  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  align-items: center;
  font-family: "Raleway", "Helvetica", "Arial", sans-serif;
  white-space: nowrap;
  border-radius: 16px;
  vertical-align: middle;
  justify-content: center;
  text-decoration: none;
  background-color: #e0e0e0;
}
.disChip-clickable {
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.disChip-clickable:hover,
.disChip-clickable:focus {
  background-color: rgb(206, 206, 206);
}
.disChip-clickable:active {
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}
.disChip-outlined {
  background-color: transparent;
}
.disChip-clickable.disChip-outlined:hover,
.disChip-clickable.disChip-outlined:focus {
  background-color: rgba(0, 0, 0, 0.04);
}
.disChip-label {
  overflow: hidden;
  white-space: nowrap;
  padding-left: 12px;
  padding-right: 12px;
  text-overflow: ellipsis;
}

.disChip-label hr{
  opacity: 1 !important;
}

.disTypography-root {
  margin: 0;
}
.disTypography-body2 {
  font-size: 0.875rem;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  line-height: 1.43;
  letter-spacing: 0.01071em;
}
.disTypography-h5 {
  font-size: 1.5rem;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  line-height: 1.334;
  letter-spacing: 0em;
}
.disTypography-gutterBottom {
  margin-bottom: 0.35em;
}
.disTypography-colorTextSecondary {
  color: rgba(0, 0, 0, 0.54);
}

.disGrid-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.overlay {
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #f1f1f1;
  width: 100%;
  transition: 0.5s ease;
  color: white;
  font-size: 20px;
  padding: 20px;
  text-align: center;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.disGrid-item {
  display: inline;
  margin: 0;
  box-sizing: border-box;
}
.disGrid-justify-content-xs-center {
  justify-content: center;
}
.disGrid-spacing-xs-2 {
  width: calc(100% + 16px);
  margin: -8px;
}
.disGrid-spacing-xs-2 > .disGrid-item {
  padding: 8px;
}
.disGrid-spacing-xs-5 {
  width: calc(100% + 40px);
  margin: -20px;
}
.disGrid-spacing-xs-5 > .disGrid-item {
  padding: 20px;
}
.disGrid-grid-xs-12 {
  flex-grow: 0;
  max-width: 100%;
  flex-basis: 100%;
}

/*#381D6A 80%, #E0D1FF 92%, #381D6A 100%*/
/*#be49a5 0%, #c96ce0,#feedff 75%,  #f7b8ff 92%, #cd7fec 96%, #b659be 100%*/
.disCardContent-root {
  padding: 16px 24px;
  background-color: rgba(13,5,30,0.7);
  box-shadow: 0 0 15px rgba(203,126,255, 0.3);
  display: flex;
  flex-direction: column;
  width: 400px;
  max-width: 90vw;
  height: auto;
  text-align: center;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 2px solid rgba(100,100,255,0.2);
  border-image: conic-gradient(from var(--angle), #be49a5 0%, 
  #c96ce0 30%,
  #feedff 65%,  
  #f7b8ff 85%, 
  #cd7fec 95%, 
  #be49a5 100%) 2;
  animation: spin 3s linear infinite;
  /*Disable highlighting*/
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;

}

@property --angle{
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

@keyframes spin{
  to{
    --angle: 1turn;
  }
}

/*price button styling*/

.disCardContent-root-sale {
  padding: 16px 24px;
  background-color: rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 15px rgba(203,126,255, 0.3) ;
  max-width: 90vw;
  height: auto;
  min-height: fit-content;
  text-align: center;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 2px solid rgba(100,100,255,0.2);
  border-image: conic-gradient(from var(--angle), #FFFECE 0%, 
  #fcfadc 30%,
  #feedff 65%,  
  #E69DB8 85%, 
  #FFD0C7 95%, 
  #FFFECE 100%) 2;
  animation: spin 3s linear infinite;
  color:rgb(248, 234, 234);
  margin: 1rem;
  display: flex;
  flex-direction: column !important;
}

 .convert_button_style{
  margin-top: 10px;
  padding-left: 33px;
  padding-right: 33px;
  padding-bottom: 16px;
  padding-top: 16px;
  background: rgba(0, 0, 0, 0.575);
  border: 2px solid #8F87F1;
  font-family: "Raleway", serif;
  text-align: center;
  cursor: pointer;
  transition: 0.4s;
  color: #8F87F1 ;
  text-transform: uppercase;
  box-shadow: 0 0 10px rgba(233, 165, 241, 0.5)
  , inset 0 0 10px rgba(233, 165, 241, 0.2)
  ;
  overflow: hidden;
 }
 .convert_button_style:hover{
  background: rgba(143, 135,241,0.1);
  box-shadow: 0 0 20px rgba(233, 165, 241, 0.8), inset 0 0 20px rgba(233, 165, 241, 0.4);
  text-shadow: 0 0 5px (0, 255, 179, 0.8);
  transform: translateY(-2px);
 }

 .convert_button_style span {
  font-size: 10px !important;
 }

.disCardContent-root-sale span{
  flex: 1;
  font-size: 1rem;
  letter-spacing: 0.2rem;
  text-shadow: 0 0 8px rgba(255,255,255,0.2);
}

/* Responsiveness root sale span*/
  @media(max-width: 1450px) {
    .disCardContent-root-sale span{
        font-size: 1rem;
    }

    .disCardContent-root {
      width: 400px;
    }
  }

  @media (max-width: 1024px) {
    .disCardContent-root-sale span{
        font-size: 0.8rem;
    }

    .disCardContent-root {
      width: 375px;
    }
  }

  @media(max-width: 768px){
    .disCardContent-root-sale span{
        font-size: 0.8rem;
    }
    
    .disCardContent-root {
      width: 300px;
    }
  }

  @media (max-width: 480px){
    .disCardContent-root-sale span{
        font-size: 0.5rem;
    }

     .disCardContent-root {
      width: 275px;
    }
  } 
  
  @media(max-width: 430px){
    .disCardContent-root-sale span{
        font-size: 0.5rem;
    }

     .disCardContent-root {
      width: 250px;
    }
  }

  @media(max-width: 380px){
    .disCardContent-root-sale span{
        font-size: 0.5rem;
    }

     .disCardContent-root {
      width: 225px;
    }
  }



.disCardContent-root p, .disCardContent-root h2{
  font-family: 'Raleway', serif;
}

.disCardContent-root p{
  opacity: 0.8;
  font-size: 0.9rem;
  color:#edddff;
}

.disCardContent-root h2{
  font-size: clamp(1rem, 5vw, 2rem);
  letter-spacing: 1px;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);
}

.disCardContent-root p{
  font-size: clamp(0.75rem, 2vw, 1rem);
}

.disCard-root {
  overflow: hidden;
}

.disCardActions-root {
  display: flex;
  padding: 8px;
  align-items: center;
}

.disCardMedia-root {
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.disCardMedia-media {
  width: 100%;
}
.disCardMedia-img {
  object-fit: contain;
  background-color: white;
  padding: 20px;
  image-rendering: pixelated;
}

.disCardActionArea-root {
  width: 100%;
  display: block;
  text-align: inherit;
}
.disCardActionArea-root:hover .disCardActionArea-focusHighlight {
  opacity: 0.04;
}
.disCardActionArea-focusHighlight {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  border-radius: inherit;
  pointer-events: none;
  background-color: currentcolor;
}

.makeStyles-root-17 {
  width: 250px;
  background: none;
  margin-top: 40px;
  border-radius: 20px;
}
.makeStyles-image-19 {
  width: 250px;
  height: 340px;
  object-fit: contain;
  border-radius: 20px;
}

.makeStyles-image-19:after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  font-family: "Helvetica";
  font-weight: 300;
  line-height: 2;
  text-align: center;
  content: attr(alt);
}
.makeStyles-chip-22 {
  height: 40px;
  font-size: 14px;
  text-align: center;
  border-color: #353945;
  border-width: 0px;
  word-spacing: 1.1px;
  border-radius: 4px;
  margin-bottom: 20px;
  letter-spacing: 1.1px;
}
.makeStyles-price-23 {
  height: auto;
  font-size: 10px;
  text-align: center;
  font-weight: bold;
  border-width: 2px;
  border-radius: 3px;
  margin-bottom: 5px;
 
}
.makeStyles-bodyText-24 {
  color: white;
}

.gallery-view {
  margin-bottom: 30px;
  width: 50vw;
  display:flex;
  justify-content: center;
  flex-direction: column;
  
}

.horizontal-center {
  margin: 0 auto;
  width: 250px;
  margin-bottom: 30px;
}

.lds-ellipsis {
  display: inline-block;
  position: relative;
  margin: 0 auto;
  width: 80px;
  height: 80px;
}
.lds-ellipsis div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}
 /* #000000, #0c0c0c, #292929, #2e2d2d */

/*   Home page CSS */
.homepage{
  background: linear-gradient(-45deg, #ffffff, #fcf8f3, #f5efe6, #fbf9f7);  
  display: flex;
  background-size: 400% 400%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: white;
  animation: gradient 15s ease infinite; 
} 

/*Footer CSS*/
.homepage-footer{
  background:linear-gradient(-45deg, #ffffff, #fcf8f3, #f5efe6, #fbf9f7);
  display: flex;
  background-size: 400% 400%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: auto;
  animation: gradient 15s ease infinite; 
  font-family: 'Raleway', serif;
} 

.navigation{
  background: linear-gradient(-45deg, #e8dff5, #fce8e8, #f9f2ea, #e0ddff);  
  display: flex;
  background-size: 400% 400%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: white;
  animation: gradient 15s ease infinite; 
} 

.dark-navigation{
  background: linear-gradient(-45deg, #1A1A1D, #3B1C32, #6A1E55, #A64D79);  
  display: flex;
  background-size: 400% 400%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: white;
  animation: gradient 15s ease infinite; 
} 

@keyframes gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

/* Login Button CSS */

.login-button-container{
  display: flex;
  width: 100%;
  height: auto;
  justify-content: center;
  align-items: center;
  margin-bottom: 20rem;
  margin-top: 30rem;
}

.login-btn {
  background: linear-gradient(to right, #000000, #0c0c0c, #292929, #2e2d2d);
  background-size: 400% 400%;
  border-radius: 0.5em;
  box-shadow:
    inset 0px -6px 18px -6px rgba(255, 255, 255, 0),
    inset rgba(54, 69, 75, 1) -1px -1px 6px 0px,
    inset 12px 0px 12px -6px rgba(3, 15, 20, 0),
    inset -12px 0px 12px -6px rgba(3, 15, 20, 0),
    rgba(54, 69, 75, 1) -1px -1px 6px 0px;
  border: solid 2px #030f14;
  cursor: pointer;
  font-size: 18px;
  padding: 0.7em 1.7em;
  outline: none;
  transition: all 0.3s;
  user-select: none;
  display: flex;
  align-items: center;
  animation: gradient 15s ease infinite;
  width: 400px;
  height: 120px;
  }


  .login-btn:hover {
    box-shadow:
      inset 0px -6px 18px -6px rgba(3, 15, 20, 1),
      inset 0px 6px 18px -6px rgba(3, 15, 20, 1),
      inset 12px 0px 12px -6px rgba(3, 15, 20, 0),
      inset -12px 0px 12px -6px rgba(3, 15, 20, 0),
      -1px -1px 6px 0px rgba(54, 69, 75, 1);
  }
  
  .login-btn:active {
    box-shadow:
      inset 0px -12px 12px -6px rgba(3, 15, 20, 1),
      inset 0px 12px 12px -6px rgba(3, 15, 20, 1),
      inset 12px 0px 12px -6px rgba(3, 15, 20, 1),
      inset -12px 0px 12px -6px rgba(3, 15, 20, 1),
      -1px -1px 6px 0px rgba(54, 69, 75, 1);
  }
  


 .login-btn-logo{
  height: 50px;
  width: auto;
  margin-right: 10px;
  transition: transform 0.8s cubic-bezier(0.18, 1.3, 0.66, 2.2)
 }
  
  .login-btn:hover .login-btn-logo{
    transform: scale(0.9);
  }
  
  .login-btn-text {
    color: #9e9148;
    font-weight: 500;
    margin: auto;
    transition: all 0.3s;
    width: fit-content;
    font-family: "Raleway", serif;
    line-height: 2;
  }
  
  .login-btn:hover .login-btn-text {
    transform: scale(0.9);
    color:white;
  }
  
  .login-btn:active .login-btn-text {
    transform: scale(0.8);
  }

  /*Responsiveness Login Button*/

  @media(max-width: 1450px) {
     .login-button-container{
      margin-bottom: 15rem;
     }
  }

  @media (max-width: 1024px) {
    .login-btn{
      width: 360px;
      height: 110px;
      font-size: 17px;
    }

    .login-button-container{
      margin-bottom: 5rem;
      margin-top: 32rem;
    }

    .login-btn-logo{
      height: 45px;
    }
  }

  @media(max-width: 768px){
    .login-btn{
      width: 320px;
      height: 90px;
      font-size: 16px;
      padding: 0.6em 1.2em;
    }

    .login-button-container{
      margin-bottom: 12rem;
      margin-top: 46rem;
    }

    .login-btn-logo{
      height: 40px;
    }
  }

  @media (max-width: 480px){
    .login-btn{
      width: 280px;
      height: 80px;
      font-size: 15px;
      padding: 0.5em 1em;
    }

    .login-button-container{
      margin-bottom: 6rem;
      margin-top: 45rem;
    }

    .login-btn-logo{
      height: 30px;
      margin-right: 6px;
    }
  } 
  
  @media(max-width: 430px){
    .login-button-container{
      margin-top: 50rem;
    }
  }

  @media(max-width: 380px){
    .login-button-container{
      margin-bottom: 3rem;
      margin-top: 43rem;
    }

    .login-btn-logo{
      height: 25px;
    }
  }

 

  
  @media(max-height: 500px) and (orientation : landscape){
    .login-btn{
      width: 280px;
      height: 70px;
    }

    .login-button-container{
      margin-bottom: 8rem;
      margin-top: 8rem;
    }
  }

  @media (min-width: 280px) and (max-width: 400px) and (min-height: 800px){
    .login-button-container{
      margin-top: 45rem;
    }
  }

  @media (min-width: 1000px) and (max-width: 1024px) and (max-width: 600px){
    .login-button-container{
      margin-top: 35px;
    }
  }


/*Loading Screen*/

.loading_screen{
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.loading_screen h1, .loading_screen p{
  font-family: "Raleway", serif;
}

.loading_screen p{
  color:#161414;
  margin-top: 40px;
}

.loading_screen p.white-loading{
  color:#EFEEEA !important;
}

.loading_screen h1 {
  font-weight: bolder;
  margin-bottom: 40px;
  color: #6bffe6;
}

.load-animation {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}
.bar {
  width: 10px;
  height: 70px;
  background: #fff;
  display: inline-block;
  transform-origin: bottom center;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  /*   box-shadow:5px 10px 20px inset rgba(255,23,25.2); */
  animation: loader 1.2s linear infinite;
  margin: 50px 0;
}
.bar1 {
  animation-delay: 0.1s;
}
.bar2 {
  animation-delay: 0.2s;
}
.bar3 {
  animation-delay: 0.3s;
}
.bar4 {
  animation-delay: 0.4s;
}

@keyframes loader {
  0% {
    transform: scaleY(0.1);
    background: rgb(6, 181, 187);
  }
  50% {
    transform: scaleY(1);
    background: rgb(6, 100, 129);
  }
  100% {
    transform: scaleY(0.1);
    background: transparent;
  }
}

/*Homepage Guarantees*/


.homepage-guarantees{
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  width: 100vw;
  height: auto;

}


.homepage-guarantee-item{
  flex: 1;
  text-align: center;
  margin: 0 20px ;
  margin-bottom: 20px;
}


.homepage-guarantee-item p{
  font-size: 2rem;
  font-family: "Raleway", serif;
  color:black;
}

.homepage-guarantee-item img{
  width: 200px;
  height: 150px;
}

/* Responsiveness Homepage guarantees*/
@media(max-width: 1450px) {
  .homepage-guarantees{
    justify-content: center;
    align-items: center;
    margin-bottom: 10rem;
  }

  .homepage-guarantee-item img{
    width: 90px;
    height: 90px;
  }
}
@media (max-width: 1024px){
  .homepage-guarantees{
    margin-bottom: 10rem;
    margin-top: 10rem;
  }
  .homepage-guarantee-item p {
    font-size: 1.8rem;
  }

  .homepage-guarantee-item img {
    width: 70px;
    height: 70px;
  }
}

@media(min-width: 1024px)  and (max-width: 1030px) and (max-height: 620px){
  .homepage-guarantees{
    margin-top: 0;
    margin-bottom: 21rem;
  }
}


@media(max-width: 768px){
  .homepage-guarantees{
    flex-wrap: wrap;
    margin-bottom: 30rem;
  }

  .homepage-guarantee-item{
    margin: 0 15px;
  }

  .homepage-guarantee-item p {
    font-size: 1.5rem;
  }

  .homepage-guarantee-item img {
    width: 50px;
    height: 50px;
  }
}

@media(max-width: 480px){
  .homepage-guarantees {
    flex-direction: column;
    align-items: center;
    margin-top: 3rem;
  }

  .homepage-guarantee-item{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    margin: 0;
    margin-bottom: 1.5rem;
  }

  .homepage-guarantee-item p {
    font-size: 1.2rem;
    margin-top: 0.5rem;
    margin-bottom: 0;
    margin-left: 10px; /* Space between icon text and image */
  }

  .homepage-guarantee-item img{
    width: 50px;
    height: 50px;
  }
}

@media(max-width: 375px){
  .homepage-guarantee-item {
    margin-bottom: 1rem;

  }

  .homepage-guarantee-item p {
    font-size: 1rem;
  }

  .homepage-guarantee-item img {
    width: 20px;
    height: 20px;
  }
}

@media(max-height: 500px) and (orientation: landscape){
  .homepage-guarantees{
    flex-direction: row;
  }

  .homepage-guarantee-item{
    margin: 0 10px;
    margin-bottom: 10px;
  }

  .homepage-guarantee-item p{
    font-size: 1rem;
  }

  .homepage-guarantee-item img{
    width: 50px;
    height: 50px;
  }
}


/* Non selection class to prevent highlighting*/
.no-select{
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Bold class*/
.bold{
  font-weight: bold;
}

/*Mint button styling*/
.mint_button_style {
  margin-top: 10px;
  padding-left: 33px;
  padding-right: 33px;
  padding-bottom: 16px;
  padding-top: 16px;
  border-radius: 2px;
  background: black;
  border: 2px solid #00ffb3;
  font-family: "Raleway", serif;
  text-align: center;
  cursor: pointer;
  transition: 0.4s;
  color: #00ffb3;
  text-transform: uppercase;
  box-shadow: 0 0 10px rgba(0,255,179, 0.5),inset 0 0 10px rgba(0,255, 179,0.2);
 }

 .mint_button_style:hover {
  background: rgba(0,255,179,0.1);
  box-shadow: 0 0 20px rgba(0,255,179,0.8), inset 0 0 20px rgba(0,255,179, 0.4);
  text-shadow: 0 0 5px (0, 255, 179, 0.8);
  transform: translateY(-2px);
 }

 /*Sell/Buy item styling*/
 /*  box-shadow: 0 0 10px rgba(198, 142, 253, 0.5), inset 0 0 10px rgba(198, 142, 253, 0.2);
*/
 .sell_button_style{
  margin-top: 10px;
  padding-left: 33px;
  padding-right: 33px;
  padding-bottom: 16px;
  padding-top: 16px;
  background: rgba(0, 0, 0, 0.575);
  border: 2px solid #8F87F1;
  font-family: "Raleway", serif;
  text-align: center;
  cursor: pointer;
  transition: 0.4s;
  color: #8F87F1 ;
  text-transform: uppercase;
  box-shadow: 0 0 10px rgba(233, 165, 241, 0.5)
  , inset 0 0 10px rgba(233, 165, 241, 0.2)
  ;
  overflow: hidden;
 }

 .sell_button_style:hover{
  background: rgba(143, 135,241,0.1);
  box-shadow: 0 0 20px rgba(233, 165, 241, 0.8), inset 0 0 20px rgba(233, 165, 241, 0.4);
  text-shadow: 0 0 5px (0, 255, 179, 0.8);
  transform: translateY(-2px);
 }

/* Create NFT text header style in minter*/
.header_minter_style{
  color: #fff;
  background: linear-gradient(to right, #00ffb3 0, #fff 30%, #353131 90% );
  background-size:200% auto;
  background-position: 0;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shine 3s infinite linear;
  font-weight: bolder;
  font-family: "Raleway", serif;
}

@keyframes shine{
  to{
    background-position: 200%;
  }
}


/* Homepage redirect component*/
.header-title-homepage{
  position: absolute;
  top: 20px;
  right: 40px;
  z-index: 10;
  cursor: pointer;
  display: block;
}

.header-title-homepage h1, .header-title-homepage h2{
  background: linear-gradient(45deg,#02a59556 0,  #a088033d 30%, #31054642 90%);
  background-size: 200% auto;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 1); /*Add outline*/
  text-shadow: none;
  user-select: none;
  font-size: 70px;
  padding: 8px; 
  animation: none !important;
  transition: 0.5s ease-in-out;
}

.header-title-homepage h1{
  text-decoration: underline;
}

.header-title-homepage:hover h1{
  text-shadow: 0px 0px 10px rgba(0,277, 204, 0.8), 0 0 20px rgba(0,227,204, 0.5), 0 0 30px rgba(0, 227,204, 0.3);
}

.header-title-homepage h2{
  visibility:visible;
  opacity: 1;
  font-size:30px;
}

.header-title-homepage:hover h2{
  visibility: visible;
  opacity: 1;
  text-decoration: none;
  text-shadow: 0px 0px 10px rgba(0,277, 204, 0.8), 0 0 20px rgba(0,227,204, 0.5), 0 0 30px rgba(0, 227,204, 0.3);

}

/*Responsiveness back button*/

/*Small desktop screens */


@media (max-width: 1300px){
  .header-title-homepage{
    top: 10px;
    right: 25px;
  }

  .header-title-homepage h1, .header-title-homepage h2{
    -webkit-text-stroke: 1.5px white;
    padding: 6px;
  }

  .header-title-homepage h1{
    font-size: 45px;
  }

  .header-title-homepage h2{
    font-size: 20px;
  }
}

/*Tablet*/
@media (max-width: 992px){
   .header-title-homepage{
    top: 12px;
    right: 20px;
  }

  .header-title-homepage h1, .header-title-homepage h2{
    -webkit-text-stroke: 1.2px white;
    padding: 5px;
  }

  .header-title-homepage h1{
    font-size: 50px;
  }

  .header-title-homepage h2{
    font-size: 20px;
  }
}

@media (max-width: 768px){
   .header-title-homepage{
    top: 10px;
    right: 15px;
  }

  .header-title-homepage h1, .header-title-homepage h2{
    -webkit-text-stroke: 1.2px white;
    padding: 3px;
  }

  .header-title-homepage h1{
    font-size: 40px;
  }

  .header-title-homepage h2{
    font-size: 20px;
  }
}

@media (max-width: 576px){
   .header-title-homepage{
    top: 8px;
    right: 12px;
  }

  .header-title-homepage h1, .header-title-homepage h2{
    -webkit-text-stroke: 0.8px white;
    padding: 2px;
  }

  .header-title-homepage h1{
    font-size: 38px;
  }

  .header-title-homepage h2{
    font-size: 18px;
  }
}

@media (max-width: 480px){
   .header-title-homepage{
    top: 6px;
    right: 10px;
  }

  .header-title-homepage h1, .header-title-homepage h2{
    -webkit-text-stroke: 0.6px white;
    padding: 2px;
  }

  .header-title-homepage h1{
    font-size: 35px;
  }

  .header-title-homepage h2{
    font-size: 25px;
  }
}

@media (max-width: 375px){
   .header-title-homepage{
    top: 5px;
    right: 5px;
  }

  .header-title-homepage h1, .header-title-homepage h2{
    -webkit-text-stroke: 0.5px white;
    padding: 1px;
  }

  .header-title-homepage h1{
    font-size: 30px;
  }

  .header-title-homepage h2{
    font-size: 20px;
  }
}

/* Minted! Text*/
.minter-text h1{
  background: linear-gradient(-45deg,#FFFF00, #0080FF,#52057B, #FF073A);
  background-size: 400% 400%;
  animation: gradient 15s ease-in-out infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes gradient{
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100%{
    background-position: 0% 50%;
  }
}

/*Like button*/
.like-share-container{
  display:flex;
  flex-direction: row;
  pointer-events: none;
}

.like{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.like svg{
  flex: 1;
  height: 9.375rem;
  width: 9.375rem;
  overflow: visible;
  cursor: pointer;
  transform: translateZ(0);
  shape-rendering: geometricPrecision;
  text-rendering: optimizeLegibility;
  image-rendering: crisp-edges;
}

.like span{
  font-family: 'Raleway', serif;
  flex:1;
  margin-left: 0.5rem;
  font-size: 4.2rem;
  color:rgb(248, 234, 234);
  font-weight: bold;
}

.like-amount {
  animation-duration: 0.2s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards; /*retain modifactions of last keyframe animation*/
}

@keyframes flipInY {
  0% {
    transform: rotateX(90deg);
    opacity: 0;
  }
  40% {
    transform: rotateX(-20deg);
    opacity: 0.3;
  }
  60% {
    transform: rotateX(10deg);
    opacity: 0.6;
  }
  80%{
    transform: rotateX(-5deg);
    opacity: 0.9;
  }
  100% {
    transform: rotateX(0deg);
    opacity: 1;
  }
}

@keyframes flipOutY {
  0% {
    transform: rotateX(0deg);
    opacity: 1;
  }
  100% {
    transform: rotateX(-90deg);
    opacity: 0;
  }
}

.like label{
  pointer-events: none;
}

.like input[type="checkbox"] {
  display: none;
}

.like input[type="checkbox"] + label #center-heart #inner{
  pointer-events: auto;
}

.like input[type="checkbox"] + label{
  width: 9.375rem;
  height: 9.375rem;
  position: relative;
  display: grid;
  place-content: center; /* vertical & horizontal alignment of svg*/
}

.like input[type="checkbox"] + label #left-hearts >*,
.like input[type="checkbox"] + label #right-hearts > * {
  opacity: 0;
  fill:#C68EFD;
}

.like input[type="checkbox"] + label #center-heart #inner{
  transition: 0.2s ease;
}

.like input[type="checkbox"] + label #center-heart #outer{
  transition: 0.2s ease;
}

.like input[type="checkbox"] + label::before,
.like input[type="checkbox"] + label::after{
    opacity: 0;
    transition: 0.2s ease;
    pointer-events: none;
}

.like input[type="checkbox"]:checked + label{
  cursor: pointer;
}

.like input[type="checkbox"]:checked + label::before,
.like input[type="checkbox"]:checked + label::after
{
  content: "";
  display: grid;
  border-radius: 100%;
  position: absolute;
  outline: 25px solid #8F87F1;
  height: 10.9375rem;
  width: 10.9375rem;
  animation: scalePulse 0.5s cubic-bezier(0.12, 0.84, 0.5, 0.44) forwards; /* preserve state at last frame(animation)*/
}

.like input[type="checkbox"]:checked + label::after{
  opacity: 1;
  transform: scale(0);
  animation-delay: 0.2s;
}

.like input[type="checkbox"]:checked + label #center-heart #inner{
  fill:#8F87F1 !important;
}

.like input[type="checkbox"]:checked + label #center-heart #outer{
  fill:black !important;
}

.like input[type="checkbox"]:checked + label #left-hearts > *,
.like input[type="checkbox"]:checked + label #right-hearts > * {
    transform-origin: center center;
    animation: floatingHearts 0.65s cubic-bezier(0.12, 0.84, 0.5, 0.44) forwards;
}

.like input[type="checkbox"]:checked + label #right-hearts g:first-child{
  animation-delay: 0.3s;
}

.like input[type="checkbox"]:checked + label #right-hearts g:last-child{
  animation-delay: 0.1s;
}

.like input[type="checkbox"]:checked + label #left-hearts g:first-child{
  animation-delay: 0.2s;
}

.like input[type="checkbox"]:checked + label #left-hearts g:last-child{
  animation-delay: 0.5s;
}

@keyframes floatingHearts{
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  50%{
    opacity:0.5;
  }
  100%{
    opacity:0;
    transform:translateY(-50px);
  }
}

@keyframes scalePulse {
  from {
    transform: scale(0);
  }
  to{
    transform: scale(1.1);
    opacity: 0;
  }
}



/* Forward & Backward Icon*/

/* navigation tools is in center due to drei Html component prop center*/
.navigation-tools{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  pointer-events: none;
  width: 100%;
  height: 20rem;
}

.navigation-tools span {
  margin: 12rem;
  font-size: 8rem;
  cursor: pointer;
  pointer-events: auto;
  flex: 1;
}

.material-symbols-outlined{
  text-shadow: 0 0 10px rgba(0, 123, 255, 0.8), 0 0 20px rgba(0, 123, 255, 0.5);
  transition: 0.2s ease;
}

.material-symbols-outlined:hover {
  color:#0080FF !important;
} 

/*Forward Backward button responsiveness*/
@media (max-width: 1440px){
    .navigation-tools{
      height: 18rem;
    }

    .navigation-tools span {
      margin: 10rem;
      font-size: 7rem;
    }
}

@media (max-width: 1200px){
  .navigation-tools{
    height: 16rem;
  }

  .navigation-tools span{
    margin: 8rem;
    font-size: 6rem;
  }
}

@media (max-width: 992px){
  .navigation-tools{
    height: 12rem;
  }

  .navigation-tools span {
    margin: 4rem;
    font-size: 4rem;
  }
}

@media (max-width: 768px){
  .navigation-tools{
    height: 10rem;
  }

  .navigation-tools span{
    margin: 2rem;
    font-size: 3.5rem;
  }
}

@media (max-width: 576px){
  .navigation-tools{
    height: 8rem;
  }

  .navigation-tools span{
    margin: 1.5rem;
    font-size: 3rem;
  }
}

@media (max-width: 480px){
  .navigation-tools{
    height: 6rem;
  }

  .navigation-tools span{
    margin: 1rem;
    font-size: 2.5rem;
  }
}

@media (max-width: 480px){
  .navigation-tools{
    height: 6rem;
  }

  .navigation-tools span{
    margin: 1rem;
    font-size: 2.5rem;
  }
}

@media (max-width: 375px){
  .navigation-tools{
    height: 5rem;
  }

  .navigation-tools span{
    margin: 0.5rem;
    font-size: 2rem;
  }
}


/* Search Bar */

/*
 border-image: conic-gradient(from var(--angle), 
  #222222 0%, 
  #000000 30%,
  #222222 65%,  
  #1DCD9F 85%, 
  #169976 95%, 
  #222222 100%) 2;

  animation: spin 3s linear infinite;
*/


.search-container{
  flex:3;
  pointer-events: auto;
  padding: 2rem;
  width: 31rem;
  background-color:rgba(34, 34, 34, 0.8);
  color: #F1EFEC;
  font-family:'Raleway', serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; 
}

.search-box-area{
  display: flex;
  align-items: center;
  flex-direction: row;
}

.search-mode-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
  gap:10px
}
.search_mode_button_style{
  border: 2px solid #93a6fb !important;
  font-family: "Raleway", serif;
  text-align: center;
  cursor: pointer;
  transition: 0.4s;
  color: #5ecaf5 !important;
  text-transform: uppercase;
  box-shadow: 0 0 10px rgb(147, 166, 251,0.4),inset 0 0 10px rgb(94, 202, 245,0.2) !important;
}

 .search_mode_button_style:hover {
  background: rgba(2, 19, 255, 0.26) !important;
  box-shadow: 0 0 20px rgba(147, 166, 251, 0.8), inset 0 0 20px rgba(94, 202, 245, 0.4) !important;
  transform: translateY(-2px);
 }



.search-mode-container h1{
  font-family: 'Raleway', serif;
  font-weight: 200;
  font-size: 1rem;
  margin: 0;
}

.search-mode-container h5{
  font-family: 'Raleway', serif;
  font-weight: 200;
  font-size: 1rem;
  margin: 0;
}

.search-mode-button{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap:10px;
}


 


.animating-search {
  border-image: conic-gradient(from var(--angle), 
  #222222 0%, 
  #000000 30%,
  #222222 65%,  
  #1d6fcd 85%, 
  #165e99 95%, 
  #222222 100%) 2;
  border-width: 2px;
  border-style: solid;
  animation: spin 2s linear infinite;
}

.search-container form{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.search-bar{
  pointer-events: auto;
  padding: 1rem;
  width: 24rem;
  background-color:rgba(34, 34, 34, 0.8);
  color: #F1EFEC;
  transition: 0.3s ease;
  font-family:'Raleway', serif;
 
}

.search{
  font-size: 2rem !important;
  margin: 1rem !important;
}

.search-bar:focus{
  outline: none;
  box-shadow: 0 0 5px rgba(52, 152,219, 0.5);
}

/* Responsiveness search bar*/
@media (max-width: 1440px){
  .search-container{
    padding: 1.6rem;
    width: 26rem;
  }

  .search-bar{
    width: 20rem;
    padding: 0.8rem;
  }

  .search{
    font-size: 1.6rem !important;
    margin: 0.8rem !important;
  }

    .search-mode-container h1{
    font-family: 'Raleway', serif;
    font-weight: 200;
    font-size: 1rem;
    margin: 0;
  }

  .search-mode-container h5{
    font-family: 'Raleway', serif;
    font-weight: 200;
    font-size: 1rem;
    margin: 0;
  }
}

@media (max-width: 1200px){
  .search-container{
    padding: 2rem;
    width: 38rem;
  }

  .search-bar{
    width: 22rem;
    padding: 0.7rem;
  }

  .search{
    font-size: 2rem !important;
    margin: 0.7rem !important;
  }


}



@media (max-width: 992px){
  .search-container{
    padding: 2rem;
    width: 38rem;
  }

  .search-bar{
    width: 22rem;
    padding: 0.6rem;
  }

  .search{
    font-size: 2rem !important;
    margin: 0.6rem !important;
  }

  .search-mode-container h1{
    font-size: 1rem;
  }

  .search-mode-container h5{
    font-size: 1rem;
  }
}

@media (max-width: 768px){
  .search-container{
    padding: 2rem;
    width: 38rem;
  }

  .search-bar{
    width: 22rem;
    padding: 0.5rem;
  }

  .search{
    font-size: 2rem !important;
    margin: 0.5rem !important;
  }

   .search-mode-container h1{
    font-size: 1rem;
  }

  .search-mode-container h5{
   font-size: 1rem;
  }
}

@media (max-width: 576px){
  .search-container{
    padding: 1.5rem;
    width: 22rem;
  }

  .search-bar{
    width: 15rem;
    padding: 0.4rem;
  }

  .search{
    font-size: 1.8rem !important;
    margin: 0.4rem !important;
  }

  .search-mode-container h1{
    font-size: 0.8rem;
  }

  .search-mode-container h5{
   font-size: 0.8rem;
  }
}

@media (max-width: 480px){
  .search-container{
    padding: 1rem;
    width: 19rem;
  }

  .search-bar{
    width: 10rem;
    padding: 0.25rem;
  }

  .search{
    font-size: 1.5rem !important;
    margin: 1rem !important;
  }
}



@media (max-width: 375px){
  .search-container{
    padding: 1rem;
    width: 19rem;
  }

  .search-bar{
    width: 10rem;
    padding: 0.25rem;
  }

  .search{
    font-size: 1.5rem !important;
    margin: 1rem !important;
  }
}

@media (max-width: 400px) and (min-height: 800px){
  .search-container{
    padding: 1rem;
    width: 15rem;
  }

  .search-bar{
    width: 9rem;
    padding: 0.25rem;
  }

  .search{
    font-size: 1.5rem !important;
    margin: 1rem !important;
  }
}




/* User Profile Page */
.userPage{
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.userProfile{
  flex: 1;
  position: relative;
  width: 50rem;
  height: auto;
  font-family: 'Raleway', serif;
  font-size: medium;
  padding: 0.7rem;
  background-color: #000000;
  border: 2px solid black;
  border-image: conic-gradient(from var(--angle),  #A67C00 0%,    /* Deep gold */
  #BF9B30 15%,   /* Medium gold */
  #FFCF40 30%,   /* Bright gold */
  #FFFFCC 50%,   /* Gold highlight */
  #FFCF40 70%,   /* Bright gold again */
  #BF9B30 85%,   /* Medium gold again */
  #A67C00 100%) 2;
  animation: spin 3s linear infinite;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.userProfile p{
  margin-bottom: 0;
}

.userProfile-header{
  font-weight: bolder;
}

.userProfile hr {
  background-color: white;
  width: 100%;
  margin: 0rem;
  margin-top: 5px;
}

.userProfile-cloutScore{
  font-weight: bold;
  color: #FFD700;
  text-shadow: 0 0 10px rgba(255, 215,0 , 0.5);
  display: flex;
  flex-direction: row;
}

.userProfile-cloutScore-num{
  font-size: 22px;
  background: linear-gradient(135deg, #FFE99A, #FFD586, #FFAAAA, #FF9898);
  -webkit-background-clip: text;
  color: transparent;
}

.cloutScore{
  font-size: 1rem !important;
  margin-right: 10px;
}

.userProfile-general{
  width: 100%;
}

.withdrawal_address.username{
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 10px;
}

/*Responsive User Profile Principal*/

/*Standard desktop*/
@media (max-width: 1440px){
  .userProfile{
    width: 50rem;
    padding: 0.5rem;
    font-size: 17px;
  }

  .userProfile-cloutScore-num{
    font-size: 30px;
  }

  .cloutScore{
  font-size: 2rem !important;
}
}

/*Smaller desktop*/
@media (max-width: 1200px){
  .userProfile{
    width: 40rem;
    padding: 0.4rem;
    font-size: 20px;
  }
   .userProfile-cloutScore-num{
    font-size: 30px;
  }

  .cloutScore{
  font-size: 2rem !important;
  }
}

@media(max-width: 1200px) and (max-height: 610px){
  .userProfile{
    font-size: 10px;
  } 
   .userProfile-cloutScore-num{
    font-size: 15px;
  }

  .cloutScore{
    font-size: 1rem !important;
  }
}

/*Tablet screen*/
@media (max-width: 992px){
  .userProfile{
    width: 35rem;
    padding: 1.2rem;
  }
}

/* Large Mobile */
@media (max-width: 768px){
  .userProfile{
    max-width: 30rem;
    padding: 1rem;
    font-size: small;
  }
  .userProfile-cloutScore-num{
    font-size: small;
  }
  .cloutScore{
    font-size: small !important;
  }
}

/* Medium Mobile */
@media (max-width: 576px){
  .userProfile{
    max-width: 25rem;
    padding: 0.8rem;
    font-size: small;
  }

  .userProfile-cloutScore-num{
    font-size: small;
  }

   .cloutScore{
    font-size: small !important;
  }
}

/* Small Mobile*/
@media (max-width: 480px){
  .userProfile{
    max-width: 22rem;
    padding: 0.6rem;
    font-size: small;
  }
  .userProfile-cloutScore-num{
    font-size: small;
  }

   .cloutScore{
    font-size: small !important;
  }
}

/*Extra Small Mobile*/
@media (max-width: 375px){
  .userProfile{
    max-width: 20rem;
    padding: 0.5rem;
    font-size: small;
  }
  .userProfile-cloutScore-num{
    font-size: small;
  }

   .cloutScore{
    font-size: small !important;
    margin-right:11px;
  }

  .userProfile-cloutScore{
    display: flex;
    flex-direction: row;
  }
}




.walletAdress{
  position: relative;
  width: 60rem;
  height: auto;
  font-family: 'Raleway', serif;
  font-size: large;
  padding: 1rem;
  background-color: rgba(0, 0, 0, 0.4);
  border: 2px solid black;
  border-image: conic-gradient(from var(--angle),  #A67C00 0%,    /* Deep gold */
  #BF9B30 15%,   /* Medium gold */
  #FFCF40 30%,   /* Bright gold */
  #FFFFCC 50%,   /* Gold highlight */
  #FFCF40 70%,   /* Bright gold again */
  #BF9B30 85%,   /* Medium gold again */
  #A67C00 100%) 2;
  animation: spin 3s linear infinite;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.ckBTC_Address{
  border-image: conic-gradient(from var(--angle),  #A67C00 0%,    
  #7F55B1 15%,   
  #9B7EBD 30%,   
  #FFFFCC 50%,   
  #F49BAB 70%,   
  #FFE1E0 85%,   
  #7F55B1 100%) 2;
}

.walletAdress p{
  margin-bottom: 0;
}

.walletAdress hr{
  margin: 0.1rem;
}

.walletAdress h1{
  font-family: 'Raleway', serif;
  margin-bottom: 0.5rem;
  font-weight: bold;
}

/*Withdraw button*/
.withdraw_button_style {
  margin-top: 5px;
  padding-left: 33px;
  padding-right: 33px;
  padding-bottom: 16px;
  padding-top: 16px;
  border-radius: 2px;
  background: black;
  border: 2px solid #FBDB93;
  font-family: "Raleway", serif;
  text-align: center;
  cursor: pointer;
  transition: 0.4s;
  color: #F5C45E;
  text-transform: uppercase;
  box-shadow: 0 0 10px rgba(245, 196, 94, 0.4),inset 0 0 10px rgb(190, 61, 42, 0.2);
 }

 .ckBTC{
    color: #c8a9e6 !important;
    box-shadow: 0 0 10px rgba(147, 94, 245, 0.4),inset 0 0 10px rgb(190, 61, 42, 0.2);
    border: 2px solid #b67eebd3;
  }

  .withdraw_button_style:hover {
  background: rgba(255, 217, 0, 0.1);
  box-shadow: 0 0 20px rgba(245, 196, 94, 0.8), inset 0 0 20px rgba(190, 151, 42, 0.4);
  transform: translateY(-2px);
 }

 .ckBTC:hover{
  background: rgba(116, 33, 250, 0.1);
  box-shadow: 0 0 20px rgba(116, 48, 243, 0.8), inset 0 0 20px rgba(190, 159, 241, 0.4);
  transform: translateY(-2px);
 }

 .header_userProfile_style{
  color: #fff;
  background: linear-gradient(to right, #F5C45E 0, #fff 30%, #353131 90% );
  background-size:200% auto;
  background-position: 0;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shine 3s infinite linear;
  font-weight: bolder;
  font-family: "Raleway", serif;
}

.withdrawal_address{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}

.withdrawal_success{
  font-size: 1rem;
  background: linear-gradient(-45, #f5b45e 0, #f37575 30%, #0a0a0a 90% );
}

.withdraw_input{
  flex: 2;
}

.withdrawal_method{
  display: flex;
  flex-direction: row;
  justify-content: center;
}

/* Responsiveness withdrawal button */

/*Standard desktop*/
@media (max-width: 1440px){
  .walletAdress{
    width: 55rem;
    padding: 0.5rem;
    font-size: medium;
  }

  .header_userProfile_style{
    font-size: 1.6rem;
  }

  .withdraw_button_style{
    padding: 12px 28px;
  }
}

/*Small desktop*/
@media (max-width: 1200px){
  .walletAdress{
    width: 45rem;
    padding: 0.4rem;
  }

  .header_userProfile_style{
    font-size: 1rem;
  }

  .withdraw_button_style{
    padding: 10px 24px;
  }

  
  .withdrawal_address{
    flex-direction: column;
  }
}

@media(max-width: 1200px) and (max-height: 610px){
  .walletAdress{
    width: 40rem;
    font-size: 10px;
    padding: 0.2rem;
  } 
}

/* Tablet */
@media (max-width: 992px){
  .walletAdress{
    width: 35rem;
    padding: 1.2rem;
  }

    .header_userProfile_style{
    font-size: 1.3rem;
  }

  .withdraw_button_style{
    padding: 10px 20px;
    font-size: 0.9rem;
  }
}

/*Large Mobile*/
@media (max-width: 768px){
  .walletAdress{
    width: 25rem;
    padding: 1rem;
    font-size: small;
  }

  .header_userProfile_style{
    font-size: 1.3rem;
  }

  .withdraw_button_style{
    padding: 10px 20px;
    font-size: 0.9rem;
  }
}

@media(max-width: 768px) and (max-height: 575px){
  .walletAdress{
    font-size: 10px;
    padding: 0.5rem;
    margin-bottom: 10px;
  }
}

@media(max-width: 768px) and (min-height: 1500px){
  .walletAdress{
    width: 20rem;
    font-size: 10px;
    padding: 0.5rem;
    margin-bottom: 10px;
  }
}

/* Medium Mobile*/
@media (max-width: 576px){
  .walletAdress{
    width: 25rem;
    padding: 0.8rem;
    font-size: small;
  }

    .header_userProfile_style{
    font-size: 1.1rem;
  }

  .withdraw_button_style{
    padding: 6px 16px;
    font-size: 0.8rem;
  }

}

/* Small Mobile*/
@media (max-width:480px){
  .walletAdress{
    width: 25rem;
    padding: 0.6rem;
  }

  .header_userProfile_style{
    font-size: 1rem;
  }

  .withdraw_button_style{
    padding: 5px 14px;
    font-size: 0.75rem;
    margin-top: 6px;
  }
}

@media(max-width: 480px) and (min-height: 800px){
  .walletAdress{
    width: 20rem;
  }
}

/*Extra small mobile*/
@media (max-width:375px){
  .walletAdress{
    width: 20rem;
    padding: 0.5rem;
  }

  .header_userProfile_style{
    font-size: 0.9rem;
  }

  .withdraw_button_style{
    padding: 4px 12px;
    font-size: 0.7rem;
  }
}

@media (max-width:300px){
  .walletAdress{
    width: 15rem;
    padding: 0.5rem;
  }

  .header_userProfile_style{
    font-size: 0.9rem;
  }

  .withdraw_button_style{
    padding: 4px 12px;
    font-size: 0.7rem;
  }
}


.guide{
  background: linear-gradient(-45deg,  #101020, #1B1B2F, #272744, #343459);  
  background-size: 400% 400%;
}

.guide-book{
  transition: ease-in 0.2s;
}

.guide-book span{
  font-size: 8rem;
  color: #222831;
  opacity: 0.8;
}

.guide-book h1{
  font-size: 2rem;
  color: #222831;
  -webkit-text-fill-color: #222831;
  -webkit-text-stroke: #222831;
  text-decoration: none;
  opacity: 1;
}

.sub-text{
  display: flex;
  flex-direction: row;
}


.material-symbols-outlined.settings-icon{
  text-shadow: 0 0 0px rgb(0, 0, 0);
  transition: 0.5s ease;
}

.guide-book:hover .material-symbols-outlined.settings-icon{
  text-shadow: 0 0 10px rgba(18, 18, 19, 0.8), 0 0 20px rgba(16, 17, 19, 0.5);
  color:#000000 !important;
  opacity: 1;
}

.guide-book:hover h1{
  text-shadow: 0 0 10px rgba(18, 18, 19, 0.8), 0 0 20px rgba(16, 17, 19, 0.5);
}

/* Responsiveness guide book button */

/* Small desktop */
@media (max-width:1300px){
   .guide-book span{
    font-size: 6rem;
  }

  .guide-book h1{
    font-size:1.5rem;
  }
}

/* Tablet */
@media(max-width: 992px){
    .guide-book span{
    font-size: 5rem;
  }

  .guide-book h1{
    font-size:1.2rem;
  }
}

@media(max-width: 768px){
  .guide-book span{
    font-size: 4.5rem;
  }

  .guide-book h1{
    font-size:1.2rem;
  }
}

@media(max-width: 576px){
  .guide-book span{
    font-size: 4rem;
  }

  .guide-book h1{
    font-size:1rem;
  }

  .sub-text{
    flex-direction: column;
  }
}

@media(max-width: 480px){
  .guide-book span{
    font-size: 3rem;
  }

  .guide-book h1{
    font-size:0.75rem;
  }
}

@media(max-width: 375px){
  .guide-book span{
    font-size: 2rem;
  }

  .guide-book h1{
    font-size:0.5rem;
  }
}


/* GUIDE PAGE */

/* guide book UI*/
.guide-ui{
  width: 100%;
  font-family: 'Raleway', 'serif';
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.button-ui-container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  min-width: 600px;
  margin-bottom: 1rem;
  gap: 1rem;
}

.guide-ui-button{
  margin-top: 5px;
  padding-left: 33px;
  padding-right: 33px;
  padding-bottom: 16px;
  padding-top: 16px;
  border-radius: 2px;
  background: rgba(252, 249, 249, 0.5);
  border: 2px solid #5287eb;
  font-family: "Raleway", serif;
  text-align: center;
  cursor: pointer;
  transition: 0.4s;
  color: #050505;
  text-transform: uppercase;
  box-shadow: 0 0 10px rgba(82, 135, 235, 0.4),inset 0 0 10px rgba(42, 101, 190, 0.2);
}

 .guide-ui-button:hover {
  background: rgba(12, 12, 12, 0.1);
  box-shadow: 0 0 20px rgba(82, 135, 235, 0.4), inset 0 0 20px rgba(42, 101, 190, 0.2);
  color: #FCECDD;
  transform: translateY(-2px);
 }

 .perma-hover-guide{
  background-color: rgba(12, 12, 12, 0.4);
  color:#FCECDD;;
 }


/*Responsiveness guide buttons*/
@media (max-width: 1440px){


  .guide-ui-button{
    padding: 12px 28px;
  }
}

/*Small desktop*/
@media (max-width: 1200px){
  .guide-ui-button{
    padding: 10px 24px;
  }

   .button-ui-container{
    min-width: 550px;
  }

}


/* Tablet */
@media (max-width: 992px){

  .guide-ui-button{
    padding: 10px 20px;
    font-size: 0.9rem;
  }

   .button-ui-container{
    min-width: 500px;
  }
}

@media (max-width: 992px) and (min-height:575px){
  .button-ui-container{
    min-width: 550px;
  }
}

/*Large Mobile*/
@media (max-width: 768px){

  .guide-ui-button{
    padding: 10px 20px;
    font-size: 0.9rem;
  }

  .button-ui-container{
    min-width: 400px;
  }
}

@media (max-width: 768px) and (min-height: 1000px){

  .guide-ui-button{
    padding: 10px 20px;
    font-size: 0.9rem;
  }

  .button-ui-container{
    min-width: 450px;
  }
}



/* Medium Mobile*/
@media (max-width: 576px){


  .guide-ui-button{
    padding: 6px 16px;
    font-size: 0.8rem;
  }

  .button-ui-container{
    min-width: 350px;
  }

}

/* Small Mobile*/
@media (max-width:480px){

  .guide-ui-button{
    padding: 5px 14px;
    font-size: 0.75rem;
    margin-top: 6px;
  }

   .button-ui-container{
    min-width: 300px;
  }
}

/*Extra small mobile*/
@media (max-width:375px){


  .guide-ui-button{
    padding: 4px 12px;
    font-size: 0.7rem;
  }

   .button-ui-container{
    min-width: 250px;
  }
}

@media (max-width:300px){

  .guide-ui-button{
    padding: 4px 12px;
    font-size: 0.7rem;
  }

  .button-ui-container{
    min-width: 200px;
  }
}


/* Speech recognition UI*/
.speech-recognition{
  position: absolute;
  top: 20px;
  left: 40px;
  z-index: 10;
  cursor: pointer;
  display: block;
}

/* theme settings recognition ui*/
.sub-text.flex-column{
  display: flex;
  flex-direction: column;
}

.material-symbols-outlined.settings-icon.white-icon{
  color: white;
}

.speech-recognition .guide-book .sub-text.white-theme h1{
  color: white !important;
  -webkit-text-fill-color: white !important;
}

.speech-recognition .sub-text{
  gap: 10px;
}


/* Responsiveness Speech Recognition UI*/
@media (max-width: 1300px){
  .speech-recognition{
    top: 10px;
    left: 25px;
  }
}

/*Tablet*/
@media (max-width: 992px){
   .speech-recognition{
    top: 12px;
    left: 20px;
  }
}

@media (max-width: 768px){
   .speech-recognition{
    top: 10px;
    left: 15px;
  }
}

@media (max-width: 576px){
   .speech-recognition{
    top: 8px;
    left: 12px;
  }
}

@media (max-width: 480px){
   .speech-recognition{
    top: 6px;
    left: 10px;
  }
}

@media (max-width: 375px){
   .speech-recognition{
    top: 5px;
    left: 5px;
  }
}


.speech-box{
  background-color: rgba(0, 0, 0, 0.76); 
  backdrop-filter: blur(); 
  padding: 10px;
  border-radius: 10px;
  width: 100%;
}

.speech-box.white-theme-speech{
  background-color: rgba(255, 255, 255, 0.76);
}

.sub-area{
 width: 100%;
 max-width: 220px;
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(max-content, 1fr));
 gap: 5px;
}


.text-voice-ui-theme-light{
 color: #fff;
 background: linear-gradient(25deg, #FFDCDC 0, #FFF2EB 30%, #FFE8CD 45%, #FFD6BA 70%);
 background-size:200% auto;
 background-position: 0;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 animation: shine 3s infinite linear;
 font-weight: bolder;
 font-family: "Raleway", serif;
}

.text-voice-ui-theme-dark{
 color: #fff;
 background: linear-gradient(25deg, #222831 0, #393E46 30%, #2C2C2C 45%, #522546 70%);
 background-size:200% auto;
 background-position: 0;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 animation: shine 3s infinite linear;
 font-weight: bolder;
 font-family: "Raleway", serif;
}

.sub-area p{
  display: contents; /* needed in order to ensure grid can manipulate individual elements into columns*/
}

/*Responsiveness voice UI box*/
@media (max-width: 1300px){
  .sub-area{
  width: 100%;
  max-width: 200px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max-content, 1fr));
  gap: 4.5px;
  }
  .sub-area p{
    font-size: large;
  }
}

/*Tablet*/
@media (max-width: 992px){
   .sub-area{
    width: 100%;
    max-width: 150px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(max-content, 1fr));
    gap: 4px;
  }
  .sub-area p{
    font-size: medium;
  }
}

@media (max-width: 768px){
    .sub-area{
    width: 100%;
    max-width: 125px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(max-content, 1fr));
    gap: 3.5px;
  }
  .sub-area p{
    font-size: medium;
  }
}

@media (max-width: 576px){
    .sub-area{
    width: 100%;
    max-width: 100px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(max-content, 1fr));
    gap: 3px;
  }

  .sub-area p{
    font-size: small;
  }
}

@media (max-width: 480px){
   .sub-area{
    width: 100%;
    max-width: 75px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(max-content, 1fr));
    gap: 2.5px;
  }

  .sub-area p{
    font-size: small;
  }
}

@media (max-width: 375px){
   .sub-area{
    width: 100%;
    max-width: 50px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(max-content, 1fr));
    gap: 2px;
  }

  .sub-area p{
    font-size: smaller;
  }
}


/* Policy of BLEEP! */
.policy{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  z-index: 1000;
}

.policy-box{
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.87);
  padding: 20px;
  border-radius: 8px;
  pointer-events: auto;
  width: 500px;
  backdrop-filter: blur();
}

.policy-box h2{
  font-weight: 100;
  font-size: 1rem;
  font-family: 'Raleway', 'serif';
}

.policy .header_minter_style{
  background-image: linear-gradient(to right, #dfe6d2 0, #e4daa0 30%, #eceaea 90% );
  font-size: 2rem;
}

.policy .policy-box hr{
  background-color: white !important;
  border-top: 1px solid white !important;
  width: 100%;
  margin: 0;
}

.terms-redirect{
  text-decoration: underline;
  color: #ffc400;
  cursor: pointer;
  font-family: inherit;
  font-size: 2rem;
}

.terms-redirect:hover{
  color:#a37700;
}

@media (max-width: 1300px){
  .policy-box{
    width: 450px;
    padding: 15px;
  }

  .policy-box h2{
    font-size: 1.75rem;
  }

  .policy .header_minter_style{
    font-size: 2.2rem;
  }

  .terms-redirect{
    font-size: 1.75rem;
  }
}

/*Tablet*/
@media (max-width: 992px){
   .policy-box{
    width: 400px;
    padding: 10px;
  }

  .policy-box h2{
    font-size: 1.5rem;
  }

  .policy .header_minter_style{
    font-size: 1.25rem;
  }

  .terms-redirect{
    font-size: 1.5rem;
  }
}

@media (max-width: 768px){
  .policy-box{
    width: 350px;
    padding: 8px;
  }

  .policy-box h2{
    font-size: 1.2rem;
  }

  .policy .header_minter_style{
    font-size: 2rem;
  }

  .terms-redirect{
    font-size: 1.2rem;
  }
}

@media (max-width: 576px){
   .policy-box{
      width: 300px;
      padding: 10px;
    }

    .policy-box h2{
      font-size: 1rem;
    }

    .policy .header_minter_style{
      font-size: 2rem;
    }

    .terms-redirect{
      font-size: 1.5rem;
    }
}

@media (max-width: 480px){
  .policy-box{
      width: 275px;
      padding: 10px;
    }

    .policy-box h2{
      font-size: 1.2rem;
    }

    .policy .header_minter_style{
      font-size: 1.8rem;
    }

    .terms-redirect{
      font-size: 1.2rem;
    }
}   

@media (max-width: 375px){
   .policy-box{
      width: 250px;
      padding: 8px;
    }

    .policy-box h2{
      font-size: 1rem;
    }

    .policy .header_minter_style{
      font-size: 1.5rem;
    }

    .terms-redirect{
      font-size: 1rem;
    }
}

/*Legal Page*/

.button-ui-container.policy-button{
  min-width: 900px;
}

.legal-bullet-point{
  font-family: inherit;
  font-size: 1.5rem;
  font-weight:200;
}

.legal-page{
  width: 800px;
}

.policy-background{
  background-color: rgba(0, 0, 0, 0.76);
}

/*Responsiveness Legal Page*/
/*Small desktop*/

@media (max-width: 1200px){

   .button-ui-container.policy-button{
    min-width: 850px;
  }

    .legal-bullet-point{
    font-size: 1.5rem;
  }

}

@media(max-width: 1200px) and (max-height: 700px){
  .legal-bullet-point{
    font-size: 1.2rem;
  }
}


/* Tablet */
@media (max-width: 992px){
   .button-ui-container.policy-button{
    min-width: 800px;
  }

  .legal-bullet-point{
    font-size: 1.5rem;
  }
}

@media(max-width: 992px) and (max-height: 400px){
  .legal-bullet-point{
    font-size: 0.65rem;
  }
}

@media (max-width: 992px) and (min-height:575px){
  .button-ui-container.policy-button{
    min-width: 700px;
  }
  .legal-bullet-point{
    font-size: 1.5rem;
  }
}

@media(max-width: 768px) and (min-height: 500px){
    .legal-bullet-point {
        font-size: 1rem !important;
    }
}

/*Large Mobile*/
@media (max-width: 768px){

  .button-ui-container.policy-button{
    min-width: 700px;
  }
  .legal-bullet-point{
    font-size: 1.5rem;
  }
}

@media (max-width: 768px) and (min-height: 1000px){

  .button-ui-container.policy-button{
    min-width: 700px;
  }
  .legal-bullet-point{
    font-size: 1.2rem;
  }
}



/* Medium Mobile*/
@media (max-width: 576px){

  .button-ui-container.policy-button{
    min-width: 500px;
  }

  .legal-bullet-point{
    font-size: 1.2rem;
  }

}

/* Small Mobile*/


@media (max-width:480px){

  .button-ui-container.policy-button{
    min-width: 400px;
  }

  .legal-bullet-point{
    font-size: 1.2rem;
  }
}

@media(max-width:480px) and (min-height:700px){
   .button-ui-container.policy-button{
    min-width: 350px;
  }
}



/*Extra small mobile*/
@media (max-width:375px){


  .button-ui-container.policy-button{
    min-width: 300px;
  }

  .legal-bullet-point{
    font-size: 1rem;
  }
}

@media (max-width:300px){

  .button-ui-container.policy-button{
    min-width: 250px;
  }

  .legal-bullet-point{
    font-size: 1rem;
  }
}

/* Legal icon navigation */
.legal-icon{
  position: absolute;
  bottom: 20px;
  right: 40px;
  z-index: 10;
  cursor: pointer;
  display: block;
}


/* Comment Box UI*/
.comment-box{
  background-color: rgba(0, 0, 0, 0.2);
  width: 40vw;
  padding: 10px;
  font-family: "Raleway", serif;
}

.is-mobile{
  width: 70vw;
}

.comment-box hr{
  background-color: #cd7fec  !important;
  border-top: 1px solid #cd7fec  !important;
  width: 100%;
  margin: 0;
}

.comments{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap:10px;
  justify-content: flex-start;
  align-items: flex-start;

  max-height: 300px;
  overflow-y: auto;
}

.comment{
  margin: 0;
  padding: 0;
}

.comment_button_style {
  margin-top: 10px;
  padding-left: 33px;
  padding-right: 33px;
  padding-bottom: 16px;
  padding-top: 16px;
  border-radius: 2px;
  background: black;
  border: 2px solid #8F87F1;
  font-family: "Raleway", serif;
  text-align: center;
  cursor: pointer;
  transition: 0.4s;
  color: #8F87F1;
  text-transform: uppercase;
  box-shadow: 0 0 10px rgba(241, 135, 195, 0.5),inset 0 0 10px rgba(255, 120, 180, 0.2);
 }

 .comment_button_style:hover {
  background: rgb(143, 135, 241, 0.1);
  color: black;
  border: 2px solid #040407;
  box-shadow: 0 0 20px rgba(241, 135, 195, 0.8), inset 0 0 20px rgba(255, 120, 180, 0.4);
  text-shadow: 0 0 5px (0, 255, 179, 0.8);
  transform: translateY(-2px);
 }

 .comment-area{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap:10px;
 }

 .comment h5{
  max-width: 20px;
 }

 .comment-text{
   max-width: 40vw;
   overflow-wrap: break-word;
 }

 .comment-button{
    max-width: 300px !important;
 }

 .comment-button span{
  font-size: 1rem;
 }

 .comment-button:hover .sell_button_style{
  color:black !important;
}  

 /* Responsive Comment Section */
@media (max-width: 1200px){

   .comment-button{
      max-width: 275px !important;
   }

  .comment-button span{
    font-size: 1rem;
  }

  .comments{
    max-height: 275px;
  }

  .sell_button_style {
    margin-top: 7px;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 25px;
    padding-top: 25px;
  }

   .comment_button_style {
    margin-top: 7px;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 25px;
    padding-top: 25px;
  }
}

@media(max-width: 1200px) and (max-height: 700px){
 .comment-button span{
    font-size: 1rem;
  }

  .comments{
    max-height: 275px;
  }

  .sell_button_style {
    margin-top: 7px;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 25px;
    padding-top: 25px;
  }

   .comment_button_style {
    margin-top: 7px;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 25px;
    padding-top: 25px;
  }
}


/* Tablet */
@media (max-width: 992px){
  .comment-button{
    max-width: 250px !important;
  }

 .comment-button span{
  font-size: 0.8rem;
 }

 .comments{
    max-height: 250px;
  }

  .sell_button_style {
    margin-top: 5px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-top: 20px;
  }

   .comment_button_style {
     margin-top: 5px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-top: 20px;
  }

}

@media(max-width: 992px) and (max-height: 400px){
  .comment-button{
    max-width: 260px !important;
  }

  .comment-button span{
    font-size: 1rem;
  }

  .comments{
    max-height: 250px;
  }

    .sell_button_style {
    margin-top: 5px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-top: 20px;
  }

   .comment_button_style {
     margin-top: 5px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-top: 20px;
  }
}

@media (max-width: 992px) and (min-height:575px){
  .comment-button{
    max-width: 250px !important;
  }

  .comment-button span{
    font-size: 1rem;
  }

  .comments{
    max-height: 250px;
  }

    .sell_button_style {
    margin-top: 5px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-top: 20px;
  }

   .comment_button_style {
  margin-top: 5px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-top: 20px;
  }

}

@media(max-width: 768px) and (min-height: 500px){
    .comment-button{
    max-width: 225px !important;
  }

  .comment-button span{
    font-size: 0.8rem;
  }
  .comments{
    max-height: 225px;
  }

    .sell_button_style {
    margin-top: 3px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-top: 15px;
  }

   .comment_button_style {
     margin-top: 3px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-top: 15px;
  }
}

/*Large Mobile*/
@media (max-width: 768px){

    .comment-button{
    max-width: 225px !important;
  }

  .comment-button span{
    font-size: 0.8rem;
  }

  .comments{
    max-height: 225px;
  }

  .sell_button_style {
    margin-top: 3px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-top: 15px;
  }

   .comment_button_style {
     margin-top: 3px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-top: 15px;
  }

  .form-OutlinedInput-input {
  padding: 18.5px 6px;
  }
}

@media (max-width: 768px) and (min-height: 1000px){

     .comment-button{
    max-width: 225px !important;
  }

  .comment-button span{
    font-size: 0.8rem;
  }

  .comments{
    max-height: 225px;
  }

  .sell_button_style {
    margin-top: 3px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-top: 15px;
  }

   .comment_button_style {
    margin-top: 3px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-top: 15px;
  }

  .form-OutlinedInput-input {
  padding: 18.5px 6px;
  }
}



/* Medium Mobile*/
@media (max-width: 576px){

   .comment-button{
    max-width: 200px !important;
  }

  .comment-button span{
    font-size: 0.8rem;
  }

  .comments{
    max-height: 200px;
  }

  .sell_button_style {
    margin-top: 1px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
  }

   .comment_button_style {
    margin-top: 1px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
  }

  .form-OutlinedInput-input {
  padding: 18.5px 3px;
  }
}

/* Small Mobile*/


@media (max-width:480px){

 
   .comment-button{
    max-width: 200px !important;
  }

  .comment-button span{
    font-size: 0.8rem;
  }

  .comments{
    max-height: 175px;
  }

   .sell_button_style {
    margin-top: 1px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-top: 5px;
  }

   .comment_button_style {
     margin-top: 1px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-top: 5px;
  }

  .form-OutlinedInput-input {
  padding: 18.5px 1px;
  }
}

@media(max-width:480px) and (min-height:700px){
   .button-ui-container.policy-button{
    min-width: 350px;
  }

  .comments{
    max-height: 175px;
  }

  .form-Chip-root{
    font-size: 0.6125rem;
  }

  .sell_button_style {
    margin-top: 1px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-top: 5px;
  }

    .sell_button_style {
    margin-top: 1px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-top: 5px;
  }

  .form-OutlinedInput-input {
  padding: 18.5px 1px;
  }
}



/*Extra small mobile*/
@media (max-width:375px){


  
   .comment-button{
    max-width: 200px !important;
  }

  .comment-button span{
    font-size: 0.8rem;
  }

  .comments{
    max-height: 150px;
  }

  .form-Chip-root{
    font-size: 0.5125rem;
  }

  .sell_button_style {
    margin-top: 1px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-top: 5px;
  }

   .comment_button_style {
    margin-top: 1px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-top: 5px;
  }

  .form-OutlinedInput-input {
  padding: 18.5px 0px;
  }
  
}

@media (max-width:300px){

  
   .comment-button{
    max-width: 200px !important;
  }

  .comment-button span{
    font-size: 0.8rem;
  }

  .comments{
    max-height: 125px;
  }

  .form-Chip-root{
    font-size: 0.4125rem;
  }

  .sell_button_style {
    margin-top: 1px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-top: 5px;
  }

   .comment_button_style {
    margin-top: 1px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-top: 5px;
  }

  .form-OutlinedInput-input {
  padding: 18.5px 0px;
  }

}







/*Upload button*/