.content {
  position: fixed;
  background: rgb(255, 255, 255);
  padding: 10%;
  width: 27.5%;
  top: 12.5%;
  left: 25%;
}

.solverContext{
  position: fixed;
  align-items: center;
  background: rgba(255, 255, 255, 0.251);
  padding: 10%;
  width: 200/3;
  top: 12.5%;
  margin-left: 25%;
}

.bottom {
  position: fixed;
  left: -10%;
  bottom: -1.5%;
  width: 120%;
  height: 10%;
}

.top {
  position: fixed;
  left: -10%;
  top: -1.5%;
  width: 120%;
  height: 10%;
  transform: rotate(180deg);
}

.left-container {
  position: fixed;
  top:7.5%;
  display: flex;
  flex-direction: column;
  left:-55%;
}

.left-container > img{
  transform: rotate(90deg);
  width: 130%;
  height: 10%;
  margin: 30%;
}

.right-container {
  position: fixed;
  top:7.5%;
  display: flex;
  flex-direction: column;
  right:0%;
}

.right-container > img{
  transform: rotate(270deg);
  width: 130%;
  height: 10%;
  margin: 30%;
}

.topLog{
  position: fixed;
  top: 10%;
  height: 5%;
  width: 60%;
  left: 20%;
}

.leftLog{
  position: fixed;
  transform: rotate(90deg);
  height: 5%;
  top: 15%;
  left: 13.75%;
}

.rightLog{
  position: fixed;
  transform: rotate(90deg);
  height: 5%;
  top: 15%;
  right: 13.75%;
}

.bottomLog{
  position: fixed;
  top: 20%;
  height: 5%;
  width: 60%;
  left: 20%;
}

.namePlate{
  position: fixed;
  top: 13.75%;
  left: 40%;
}

body {
  position: fixed;
  background: url(/Images/Green\ Grass.png);
  align-items: center;
}

.buttons{
    position: fixed;
    top:30%;
    left:25%
}

button {
  /* Set the button dimensions to match your image file */
  width: 490px;
  height: 188px;

  /* Use the background-image property to set your image */
  background-image: url('/Images/loggy.png');
  
  /* Prevent the image from repeating if it doesn't fill the button area */
  background-repeat: no-repeat;

  /* Scale the image to cover the entire button area without distortion */
  background-size: cover;
  
  /* Center the image within the button */
  background-position: center;

  /* Remove all default button styling */
  border: 20%;
  background-color: transparent; /* Makes the background transparent */
  padding: 0;
  
  /* Change the cursor to a pointer on hover */
  cursor: pointer;

  font-size: 500%;
  display: block;
  margin-top:25%;
}


/* Optional: Add a hover effect */
button:hover {
  opacity: 0.8;
}

button:active {
  /* Example: Make the image slightly smaller when clicked */
  transform: scale(0.95);
}

.image-uploader-container {
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 300px;
}

#file-input {
    display: none; /* Hide the default file input */
}

.upload-label {
    display: inline-block;
    padding: 10px 20px;
    cursor: pointer;
    background-color: #007bff;
    color: #fff;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.upload-label:hover {
    background-color: #0056b3;
}

#image-preview {
    max-width: 100%;
    margin-top: 1rem;
    border-radius: 4px;
    border: 1px solid #ddd;
}