/* <!--
MIT License

Original work Copyright (c) 2018 Eric Huber
Modified work Copyright (c) 2024 Bongo Cat

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
--> */

:root {
  --theme-transition-duration: 0.3s;
}

@keyframes wave {
  0%, 100% {
    transform: rotate(0)
  }

  20%, 60% {
    transform: rotate(-25deg)
  }

  40%, 80% {
    transform: rotate(10deg)
  }
}

html, body {
  margin: 0
}

body {
  height: 100%;
  width: 100%;
  background-color: #fff;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  overflow: hidden;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px
}


header, footer {
  position: absolute;
  text-align: center;
  width: calc(100% - 20px);
  padding: 10px;
  z-index: 500
}

header a, footer a {
  color: #000;
  text-decoration: none
}

footer {
  padding: 20px 10px;
  bottom: 0;

}

footer span {
  margin: 0 7px
}

hr {
  position: relative;
  display: block;
  width: 200%;
  height: 5px;
  background: #000;
  margin: 140px 0 0 -50%;
  border: none;
  transform: rotate(13.5deg);
  z-index: 10
}

#logo {
  text-align: center;
  z-index: 1000;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1vw;
}

#bongo-cat-logo {
  width: 100%;
  max-width: 800px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.uploaded-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: none; /* Hidden by default until image is uploaded */
}

.container {
  position: relative;
  overflow: hidden;
}


select#select-instrument {
  position: relative;
  width: 150px;
  height: 50px;
  margin: 5px 2px;
  padding: 0 15px;
  font-size: 20px;
  color: inherit;
  text-align-last: center;
  background-color: #f5f5f5;
  margin-top: 7%;
  border: 2px solid #b3b3b3;
  border-radius: 7px;
  box-shadow: 
    inset -6px -4px 0 0 #ccc,
    0 5px 10px rgba(0,0,0,0.2);
  transition: all .2s ease-out;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  z-index: 1000
}

select#select-instrument option {
  color: inherit;
  background: #fff;
  border: 0;
  outline: none
}

#container {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 450px
}

#container div {
  position: absolute;
  display: inline-block;
  top: 0;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat
}

#touch {
  display: none
}

#keys>div {
  display: inline-block;
  padding: 0 8px
}

#keys>div span {
  display: block;
  margin: 0 4px 8px
}

#taps, #layers {
  position: absolute;
  width: 100%;
  font-size: 30px;
  text-align: center;
  /* color: #fff; */
  /* z-index: 1000 */
}

#layers {
  top: 0;
  left:0
}

#taps {
  bottom: 53px;
  margin-bottom: 60px
}

#taps .tap {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 60px;
  margin: 5px 2px
}

#tap-left, #tap-right {
  width: calc(2.5 * 60px + 18px) !important;
  height: calc(2 * 50px ) !important;
  box-shadow: 
  inset -15px -10px 0 0 #ccc,
  0 5px 10px rgba(0,0,0,0.2);
  border-radius: 10px;

}

#tap-space {
  width: calc(300px + 45px) !important;
  height: calc(2 * 50px ) !important;
  box-shadow: 
  inset -15px -10px 0 0 #ccc,
  0 5px 10px rgba(0,0,0,0.2);
  border-radius: 10px;

}

.highlight {
  transition: none !important;
  transform: scale(0.95);
  transform-origin: 50% 50%
}


.key {
  display: inline-block !important;
  min-width: 35px;
  height: 35px;
  padding: 4px 0 0 6px;
  background: #f5f5f5;
  border: 2px solid #b3b3b3;
  border-radius: 6px;
  box-shadow: inset -6px -4px 0 0 #ccc;
  text-align: left;
  font-size: 15px
}

.key-wide {
  min-width: 135px !important
}

.modal-gif-computer {
  background-image: url("computer-gif.gif");
  background-size: contain;  
  background-repeat: no-repeat;
  background-position: center;
 
  min-width: 150px;  
  height: 150px; 
}

.footer-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 189px;
  height: 49px;
  padding: 0 8.4px 5.6px 0;
  background: #f5f5f5;
  border: 2.8px solid #b3b3b3;
  border-radius: 8.4px;
  box-shadow: inset -8.4px -5.6px 0 0 #ccc,
  0 5px 10px rgba(0,0,0,0.2);
  
  font-size: 21px;
  text-decoration: none;
  color: #000;
  margin: 10px;
  transition: all 0.1s ease;
  position: relative;
  overflow: hidden;
  font-weight: bold;
  cursor: pointer;


}

.footer-button span {
  display: block;
  position: relative;
  font-weight: bold;

}

.footer-button:active {
  transform: scale(0.95);
  box-shadow: inset -4.2px -2.8px 0 0 #ccc;
}

.footer-button:active span {
  top: 0;
  left: -2px;
}

.tap {
  background-color: #f5f5f5;
  margin: 15% auto;
  border: 2px solid #b3b3b3;
  border-radius: 7px;
  box-shadow: 
    inset -6px -4px 0 0 #ccc,
    0 5px 10px rgba(0,0,0,0.2);
  width: 60px;
  height: 135px;
  text-align: center;
  transition: all .2s ease-out;
  z-index: 1000
}

.tap span {
  display: block;
  position: relative;
  font-size: 30px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  padding: 0 15px 0 0;

}

.cat div {
  background-position-y: 0;
  background-position-x: 0
}

.cat>#head {
  background-image: url("cat.png");
  z-index: 10
}

.cat>#mouth {
  background-image: url("mouth.png");
  z-index: 20
}

.cat>#paw-left {
  background-image: url("paw-left.png");
  z-index: 30
}

.cat>#paw-right {
  background-image: url("paw-right.png");
  z-index: 30
}

.instruments {
  z-index: 20
}

.instruments>#bongo, #layer-bongo {
  background-image: url("bongo-1.png")
}

.instruments>#keyboard, #layer-keyboard {
  background-image: url("keyboard.png")
}

.instruments>#cymbal, #layer-cymbal {
  background-image: url("cymbal.png")
}

.instruments>#marimba, #layer-marimba {
  background-image: url("marimba.png")
}

.instruments>#tambourine, #layer-tambourine {
  background-image: url("tambourine.png")
}

.instruments>#cowbell, #layer-cowbell {
  background-image: url("cowbell.png")
}

.instruments>#keyboard, .instruments>#cymbal, .instruments>#marimba, .instruments>#tambourine, .instruments>#cowbell {
  visibility: hidden
}

.instrument-grid {
  display: none;}

.editor-section .container {
  width: 500px;
  height: 500px;
  border: 2px solid #e0e0e0;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  background: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}

.dark-theme .editor-section .container {
  border-color: #252525;
  background: #333;
}

.instrument-button {
  display: flex;
  align-items: center;
  padding: 0 4px 6px 0;
  background: #f5f5f5;
  border: 2px solid #b3b3b3;
  border-radius: 6px;
  box-shadow: inset -6px -4px 0 0 #ccc;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  margin-bottom: 10px;
}

.modal-text{
  font-weight: 200;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  text-align: left;

}

.modal-text .bubble {
  font-family: 'Super Bubble', sans-serif !important;
}
.modal-text .bubble {
  font-weight: bold;
  font-style: normal;
}
.bubble {
  font-family: 'Super Bubble', sans-serif;
}
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
  font-weight: bold;

}
.bold{
  font-weight: bold;
}
.modal-flex-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-gif {
  flex-shrink: 0;
  margin-left: 10px;
  width: 150px; 
  height: 150px; 
}

.modal-gif img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.modal-content {
  background-color: #fff;
  margin: 15% auto;
  padding: 10px 75px 40px 25px;
  border: 5px solid #b3b3b3;
  border-radius: 25px;
  box-shadow: 
    inset -15px -10px 0 0 #ccc,
    0 5px 10px rgba(0,0,0,0.2);
  width: 80%;
  max-width: 600px;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  color: #000;
  position: relative;
  text-align: center; /* Center the text */

}

.meme-modal-content{
  margin: 5% auto;
}
.close {
  color: #000;
  position: absolute;
  top: 10px;
  right: 35px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.close:hover,
.close:focus {
  color: #555;
}

#copyable-paragraph{
  cursor: pointer;

}
.copyable {
  cursor: pointer;
  border-radius: 3px;
  transition: background-color 0.3s ease;
}
.copied {
  background-color: #fe9ba1;
}


.theme-toggle {
  position: absolute; 
  top: 10px; 
  right: 10px;
  background: #f5f5f5;
  border: 2px solid #b3b3b3;
  border-radius: 8px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  /* box-shadow: inset -6px -4px 0 0 #ccc; */
  z-index: 1000;
  padding: 8px;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent; 
  touch-action: manipulation; 
}

.theme-toggle:active {
  transform: scale(0.95);
  /* box-shadow: inset -3px -2px 0 0 #ccc; */
}

.theme-toggle .sun-icon,
.theme-toggle .moon-icon {
  width: 20px;
  height: 20px;
  position: absolute;
  transition: all 0.3s ease;
}

.theme-toggle .sun-icon {
  opacity: 1;
  transform: scale(1);
}

.theme-toggle .moon-icon {
  opacity: 0;
  transform: scale(0.5);
}

/* Dark mode styles for the toggle button */
.dark-theme .theme-toggle {
  background: #333;
  border-color: #252525;
  /* box-shadow: inset -6px -4px 0 0 #1b1b1b; */
}

.dark-theme .theme-toggle:active {
  /* box-shadow: inset -3px -2px 0 0 #1b1b1b; */
}

.dark-theme .theme-toggle .sun-icon {
  opacity: 0;
  transform: scale(0.5);
}

.dark-theme .theme-toggle .moon-icon {
  opacity: 1;
  transform: scale(1);
}

.dark-theme body {
  background-color: #000 !important;
  color: #fff !important;
}

.dark-theme .modal-content {
  background-color: #333;
  border-color: #252525;
  box-shadow: inset -15px -10px 0 0 #1b1b1b, 0 5px 10px rgba(0, 0, 0, 0.2);
  color: #fff;
}

.dark-theme .close {
  color: #fff;
}

.dark-theme .close:hover,
.dark-theme .close:focus {
  color: #ccc;
}

.dark-theme header a,
.dark-theme footer a {
  color: #fff !important;
}

.dark-theme hr {
  background: #fff !important;
}

.dark-theme .footer-button {
  background: #333;
  border: 2.8px solid #252525;
  box-shadow: inset -8.4px -5.6px 0 0 #1b1b1b;
  color: #fff;
}


.overlay {
  position: absolute;
  width: 100px;
  height: 100px;
  cursor: move;
  display: none;
  background: transparent;
  transform-origin: center;
  user-select: none;
  -webkit-user-select: none;
  z-index: 100;
}

.overlay img {
  width: 100%;
  height: 100%;
  pointer-events: none;
  object-fit: contain;
  user-select: none;
  -webkit-user-select: none;
  user-drag: none;
  -webkit-user-drag: none;
}
.upload-area {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background: white;
  transition: background-color 0.3s;
  border-radius: 20px;
}

.upload-area p {
  font-size: 18px;
  color: #333;
  margin: 10px 0;
}
.download-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 189px;
  height: 49px;
  padding: 0 6px 4px 0;
  background: #f5f5f5;
  border: 2px solid #b3b3b3;
  border-radius: 6px;
  box-shadow: inset -6px -4px 0 0 #ccc;
  font-size: 21px;
  text-decoration: none;
  color: #000;
  margin: 10px;
  transition: all 0.1s ease;
  position: relative;
  overflow: hidden;
  font-weight: bold;
  cursor: pointer;
}

.overlay-close {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 12px;
    color: white;
    z-index: 1000;
}

.download-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.download-button:not(:disabled):active {
  transform: scale(0.95);
  box-shadow: inset -4.2px -2.8px 0 0 #ccc;
}

/* Dark theme support */
.dark-theme .download-button {
  background: #333;
  border: 2.8px solid #252525;
  box-shadow: inset -6px -4px 0 0 #1b1b1b;
  color: #fff;
}

.dark-theme .download-button:not(:disabled):active {
  box-shadow: inset -4.2px -2.8px 0 0 #1b1b1b;
}


.handle {
  width: 12px;
  height: 12px;
  position: absolute;
  background-color: #2196f3;
  border-radius: 50%;
  user-select: none;
  -webkit-user-select: none;
}

.resize-handle {
  right: -6px;
  bottom: -6px;
  cursor: se-resize;
  background-color: #fe9ca2;
}

.rotate-handle {
  top: -6px;
  right: -6px;
  cursor: grab;
}

.rotate-handle:active {
  cursor: grabbing;
}

.dark-theme .footer-button:active {
  box-shadow: inset -4.2px -2.8px 0 0 #1b1b1b;
}

.dark-theme svg#github {
  fill: #fff !important;
  color: #000 !important;
}

.dark-theme .key {
  background: #333;
  border: 2px solid #252525;
  box-shadow: inset -6px -4px 0 0 #1b1b1b;
}

.dark-theme .modal-gif-computer {
  background-image: url("");
}

.dark-theme #tap-left,
.dark-theme #tap-right,
.dark-theme #tap-space {
  box-shadow: inset -15px -10px 0 0 #1b1b1b, 0 5px 10px rgba(0,0,0,0.2);
}

.dark-theme select#select-instrument,
.dark-theme .tap {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: inset -6px -4px 0 0 #1b1b1b, 0 5px 10px rgba(0, 0, 0, 0.2);
  border: 2px solid #252525;
}

.dark-theme select#select-instrument option {
  background: #000;
}

.dark-theme .tap span {
  text-shadow: none;
}

.dark-theme .cat div {
  background-position-y: -450px;
}

.dark-theme .cc-window {
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
/* Add these styles for the close button */
.close-button {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 30px;
  height: 30px;
  background-color: #f5f5f5;
  color: #333;
  border: 1px solid #b3b3b3;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 18px;
  z-index: 1000;
  transition: all 0.2s ease;
}

.instrument-text{
  display: block;
}

.close-button:hover {
  background-color: #f8f8f8;
  transform: scale(1.05);
}

.close-button:active {
  transform: scale(0.95);
  box-shadow: inset -1.5px -1px 0 0 #ccc;
}

/* Dark theme support */
.dark-theme .close-button {
  background-color: #333;
  color: #fff;
  border-color: #252525;
  box-shadow: inset -3px -2px 0 0 #1b1b1b;
}

.dark-theme .close-button:hover {
  background-color: #404040;
}

.dark-theme .close-button:active {
  box-shadow: inset -1.5px -1px 0 0 #1b1b1b;
}
body,
.modal-content,
.close,
header a,
footer a,
hr,
.footer-button,
.key,
select#select-instrument,
.tap,
.theme-toggle,
.modal-content,
#tap-left,
#tap-right,
#tap-space {
  transition: background-color var(--theme-transition-duration) ease,
              color var(--theme-transition-duration) ease,
              border-color var(--theme-transition-duration) ease,
              box-shadow var(--theme-transition-duration) ease;
}



.dark-theme .instrument-button {
  background: #333;
  border-color: #252525;
  box-shadow: inset -6px -4px 0 0 #1b1b1b;
}

.instrument-button:active {
  transform: scale(0.95);
}

.instrument-button img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  margin-left: 20px;
}

.instrument-button span {
  position: absolute;
  left: 70px;
  right: 10px;
  text-align: center;
  font-size: 14px;
  color: #333;
}

.dark-theme .instrument-button span {
  color: #fff;
}

.modal {
  transition: background-color var(--theme-transition-duration) ease;
}

.footer-button:active,
.theme-toggle:active,
.tap:active {
  transition: transform 0.1s ease;
}

.close:hover,
.close:focus {
  transition: color 0.1s ease;
}

.modal-gif-computer {
  transition: background-image var(--theme-transition-duration) ease;
}

.theme-toggle .sun-icon,
.theme-toggle .moon-icon {
  transition: opacity var(--theme-transition-duration) ease,
              transform var(--theme-transition-duration) ease;
}

.button-columns {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.button-column {
  flex: 1;
}


.status-message {
  text-align: center;
  margin: 10px 0;
  color: #666;
  font-size: 14px;
  min-height: 20px;
}

.dark-theme .status-message {
  color: #ccc;
}

.download-options {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 15px;
}


.bouncy-checkbox-container {
  display: flex;
  align-items: center;
  gap: 4px;  
}

.bouncy-checkbox {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;

}

input[type="checkbox"]:checked {
  accent-color: #fe9ca2;
}





@media (prefers-reduced-motion: reduce) {

  select#select-instrument, .tap {
    transition: none !important
  }

  .highlight {
    transform: scale(1) !important
  }
}

@media only screen and (max-width: 1000px) {
  body {
    font-size: 13px
  }
  
  #logo {
    margin: 10px 0;
  }

  #bongo-cat-logo {
    max-width: 650px; 
  }

}
@media only screen and (max-width: 769px) {
  body {
    font-size: 13px
  }
  #logo {
    margin: 10px 0;
  }

  #bongo-cat-logo {
    max-width: 650px; 
  }

  footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0px 5px;
    color: #000;

  }

  
  #container {
    transform: scale(0.7, 0.7) translate(-50%, -50%);
    transform-origin: top left
  }


  
  .modal-flex-container {
    max-width: 100%;
    flex-direction: column-reverse;
  }

  .modal-content {
    margin: 10% auto;
    width: 70%;
    font-size: 14px;
    padding: 10px 40px 40px 25px
  }


}












@media only screen and (pointer: coarse) {


  #meme-maker-btn {
    display: none;
  }

  .instrument-text{
    display: none;
  }
  

  #keys {
    visibility: hidden

  }
  #logo {
    display: block;
  }
  #bongo-cat-logo {
    margin-top: 100px;
    max-width: 350px; 
  }

  #touch {
    display: block
  }
  #container {
    transform: scale(0.5, 0.5) translate(-50%, -50%);
    transform-origin: top left;
    top:50%
  }
  footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0px 5px;
    color: #000;
    transform: scale(0.90);

  }

  .modal-text{
    font-weight: 200;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    text-align: left;
  
  }

  .footer-button {
    min-width: 75px;
    height: 40px;
    margin: 5px;
    font-size: 14px;
    cursor: pointer;
  }

  .footer-button span {
    top: 0;
    left: 0;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  }
  .footer-button-bold {
    font-weight: bold;
  }
  .footer-button:active {
    transform: scale(0.95);
    box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.2);
  }

  .footer-button:active span {
    top: 1px;
    left: 1px;
  }
  .small-text{
    font-size: 10px;
  }
  .theme-toggle {
    position: fixed;
    top: 0.5rem; 
    right: 0.5rem;
    z-index: 2000;
  }

  .theme-toggle svg {
    color: #000;
    stroke: #000;
  }

  .dark-theme .theme-toggle svg {
    color: #fff;
    stroke: #fff;
  }
  .editor-section .container {
    width: 100%;
    height: 70vw;
    max-height: 500px;
}

.button-columns {
  display: none;
}

.instrument-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  /* padding: 15px; */
  margin-top: 15px;
}

.instrument-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: #f5f5f5;
  border: 2px solid #b3b3b3;
  border-radius: 10px;
  box-shadow: inset -6px -4px 0 0 #ccc;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  margin: 0;
  aspect-ratio: 1;
}

.instrument-button img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  margin: 0;
}

.editor-section .container {
  width: 100%;
  height: 70vw; /* Make it square on mobile */
  max-height: 500px; /* Maximum height */
  border: 2px solid #e0e0e0;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  background: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}

.uploaded-image {
  position: absolute;
  top: 50%;
  left: 50%;
  /* transform: translate(-50%, -50%); */
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Dark theme support */
.dark-theme .editor-section .container {
  border-color: #252525;
  background: #333;
}

}