/* CSS styles for the webpage */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #070F2B;
    height: 100%; /* Set body height to fill viewport */
}

/* Container styles */
.charactercontainer {
    width: 500px; /* Set container max-width to 80% of viewport width */
    margin: 2% auto; /* Set margin to 2% of viewport width */
    padding: 2%;
    background-color: #1B1A55;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    position: relative;
}

.about-container {
    width: 50vw; /* Set container max-width to 80% of viewport width */
    margin: 2vh auto; /* Set margin to 2% of viewport width */
    padding: 2vw;
    background-color: #1B1A55;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.menu-container {
    width: 1000px; /* Set container max-width to 80% of viewport width */
    margin: 2% auto; /* Set margin to 2% of viewport width */
    height: 150px;
    padding: 25px;
    background-color: #1B1A55;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.maincontainer {
    margin: 2% auto; /* Set margin to 2% of viewport width */
    padding: 2%;
    background-color: #1B1A55;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: auto; /* check this shit out later */
    height: auto;
}

/* Heading styles */
h1, h3, h4 {
    text-align: center;
    color: #ccc;
}

/* Map container styles */
#map-container {
    position: relative;
    justify-content: center;
    align-items: center;
    width: auto;
    height: auto;
}

/* Character container styles */
#charactercontainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

#charactercontainer src {
    padding: 5px;
}

/* Map image styles */
#map-image {
    width: 1187px;
    height: 750px;
    -webkit-user-drag: none;
    -ms-user-drag: none;
    pointer-events: none;
    user-select: none; /* Prevent image highlighting */
}

#map-container img[alt] {
    color: white;
}

/* Draw tools container styles */
#draw-tools {
    margin-top: 20px;
}

/* Draw tools button styles */
#draw-tools button {
    margin-right: 10px;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Drawing line styles */
.drawing-line {
    position: absolute;
    pointer-events: none;
    z-index: 2;
    transform-origin: 0 100%;
    background-color: red;
}

/* Character circle styles */
.character-circle {
    position: absolute;
    border-radius: 30px;
    cursor: pointer;
    z-index: 1;
    background-size: contain;
}

/* Active tool button styles */
.active-tool {
    background-color: #007bff;
    color: #fff;
}

/* Map drawing styles */
.map-drawing {
    pointer-events: auto;
}

/* Character remove button styles */
.character-remove {
    cursor: pointer;
    background-color: transparent;
    border: none;
    color: black;
    font-size: 14px;
    padding: 0;
    width: 10px;
    height: 10px;
    position: absolute;
    top: -10px;
    right: -10px;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

/* Color picker button styles */
.color-picker-button {
    margin-right: 10px;
    padding: 5px 10px;
    border: none;
    cursor: pointer;
}

.red-selected {
    background-color: red;
    color: #fff;
}

.green-selected {
    background-color: green;
    color: #fff;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li {
    display: inline;
}

li a {
    color: white;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
}

li a:hover {
    color: #4b4b4b;
}

p {
    color: white;
}

/* Map and Controls */
#controls {
    position: relative;
    
}

#controlsline {
    display: flex;
    justify-content: center;
    align-items: center;
}

#fieldright {
    margin-left: auto;
    color: white;
    justify-content: center;
    align-items: center;
    display: flex;
}


#colorPicker {
    margin-right: 10px;
}

#undo-button {
    margin-left: 10px;
}

#match-id-input::placeholder {
    color: grey;
    text-align: center;
}

/* Ad */

.row {
    display: flex;
    justify-content: space-between; /* Distribute space between columns */
}

.col {
    flex: 1; /* Equal width columns */
    position: relative; /* Set position to relative */
}

.left-container, .right-container {
    position: fixed; /* Fixed positioning */
    top: 10%;
    display: block;
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    height: 70vh; /* Set height to 60% of viewport height */
    width: 14vw; /* Set width to 20% of viewport width */
    padding: 0;
}

.left-container {
    left: 3%; /* Set left margin to 2% of viewport width */
}

.right-container {
    right: 3%; /* Set right margin to 2% of viewport width */
}

.ad-image {
    width: 100%; /* Ensure image stretches to fill container width */
    height: 100%;
    display: block; /* Ensure image is displayed as block element */
    margin: auto; /* Center the image horizontally */
    border: 0px solid black; /* Add a 2px solid black border */
    box-sizing: border-box; /* Include border in the element's total width and height */
}

.margin-ad { /* Ad Affilation text */
    margin-top: 10px;
}

/* Test */
.indexcontainer {  display: grid;
    grid-template-columns: 1.4fr 0.6fr;
    grid-template-rows: auto 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    justify-items: center;
    align-items: center;
    grid-template-areas:
      "main-menu main-menu"
      "map-screen character-select-screen";
  }
  
  .main-menu { grid-area: main-menu; }
  
  .character-select-screen { grid-area: character-select-screen; }
  
  .map-screen {
    justify-self: center;
    grid-area: map-screen;
  }