/* styles.css */

/* General body styling */
body {
  display: flex;
  height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
}

/* Editor container styling */
.editor-container {
  flex: 1;
  padding: 10px;
  box-sizing: border-box;
  border-right: 1px solid #ccc;
}

/* Visualization container styling */
.visualization-container {
  flex: 1;
  padding: 10px;
  box-sizing: border-box;
  background-color: #fff;
  position: relative;
}

/* CodeMirror editor styling */
.CodeMirror {
  height: 100%;
  border: 1px solid #ccc;
}

/* Error message styling */
.error {
  color: red;
  font-weight: bold;
  position: relative;
  margin-top: 20px;
  margin-left: 50px;
  font-family: "Hammersmith One", sans-serif;
}

.error::before {
  content: "Pomocník";
  position: absolute;
  top: -13px;
  left: 0;
  color: #000;
  font-size: 0.8rem;
  font-family: "Hammersmith One", sans-serif;
}


/* Custom styling for child-friendly theme */
body {
  background-color: #ffffff;
}

.editor-container {
  background-color: #ffffff;
}

.visualization-container {
  background-color: #fff;
  border-left: 1px solid #ccc;
}

/* Additional styling for better user experience */
select {
  margin: 5px;
  padding: 5px;
  font-size: 1em;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 3px;
}

/* Styling for image elements */
.visualization-container img {
    position: absolute;
    max-width: 300px;
    max-height: 600px;
  }

/* Specific positioning for each body part */
#skull {
    position: absolute;
    top: 19.8%;
    left: 45%;
    transform: translate(-50%, -50%);
    height: 100px;
    z-index: 3;
  }
  
  #chest {
    position: absolute;
    top: 34.8%;
    left: 44.9%;
    transform: translate(-50%, -50%);
    height: 200px;
    z-index: 2;
  }
  
  #arm1 {
    position: absolute;
    top: 36.5%;
    left: 39.7%;
    transform: translate(-50%, -50%);
    height: 200px;
    z-index: 2;
  }
  
  #arm2 {
    position: absolute;
    top: 36.5%;
    left: 50.2%;
    transform: translate(-50%, -50%);
    height: 200px;
    z-index: 2;
  }
  
  #leg1 {
    position: absolute;
    top: 58.5%;
    left: 41.8%;
    transform: translate(-50%, -50%);
    height: 250px;
    z-index: 2;
  }
  
  #leg2 {
    position: absolute;
    top: 58.5%;
    left: 48.1%;
    transform: translate(-50%, -50%);
    height: 250px;
    z-index: 2;
  }


  /* Muscle */

  #head {
    position: absolute;
    top: 19.8%;
    left: 45%;
    transform: translate(-50%, -50%);
    height: 100px;
    z-index: 4;
  }

  #torso{
    
    position: absolute;
    top: 34.5%;
    left: 44.9%;
    transform: translate(-50%, -50%);
    height: 200px;
    z-index: 4;
  
  }

  #arms{
    
    position: absolute;
    top: 36.2%;
    left: 44.95%;
    width: 150px;
    transform: translate(-50%, -50%);
    height: 200px;
    z-index: 3;
  
  }

  #legs{
    
    position: absolute;
    top: 58%;
    left: 44.9%;
    transform: translate(-50%, -50%);
    height: 255px;
    width: 110px;
    z-index: 3;
  }
  

  /* skin */


  #skin{
    position: absolute;
    top: 14%;
    left: 27.5%;
    height: 750px;

    z-index: 5;
  }

/* Responsive styling */
@media (max-width: 768px) {
  body {
    flex-direction: column;
  }
  .editor-container {
    border-right: none;
    border-bottom: 1px solid #ccc;
  }
  .visualization-container {
    border-left: none;
  }
}

/*  

.hammersmith-one-regular {
    font-family: "Hammersmith One", sans-serif;
    font-weight: 400;
    font-style: normal;
  }