:root {
    --darker: #b54040;
    --dark: #cb7070;
    --light: #e19c9c;
    --lighter: #f5cfcf;
    --white: #ffeeee;
}

.center-img {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#tools-menu {
    position: fixed;
    width: calc(25px + 25px + 25px + 5px + 5px + 5px + 5px);
    left: 50%;
    transform: translateX(-50%);
    height: 35px;
    bottom: 65px;
    border-radius: 5px;
    background-color: var(--darker);
    box-shadow: 0 0 10px black;
    opacity: 0.75;
    transition: 200ms;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-evenly;
}

#tools-menu:hover {
    opacity: 1;
    transition: 200ms;
}

#tools-menu-cursor,
#tools-menu-move,
#tools-menu-create {
    width: 25px;
    height: 25px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    background-color: var(--lighter);
}

.selected-tool {
    /* border: 5px solid var(--light) !important; */
    /* background-color: var(--dark) !important; */
    width: 27px !important;
    height: 27px !important;
    box-shadow: 0 0 10px black !important;
}

#warning-message {
    position: fixed;
    top: 10px;
    left: 10px;
    right: 10px;
    height: 20px;
    text-align: center;
    font-size: 15px;
    color: var(--dark);
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0);
}

#confirm-report-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background-color: var(--dark);
    box-shadow: 0 0 10px black;
    border-radius: 5px;
}

#confirm-report-popup h3 {
    font-size: 25px;
    padding: 0;
    padding-left: 5px;
    padding-right: 5px;
    margin: 5px;
}

#confirm-report-popup div {
    font-style: italic;
    font-size: 20px;
    height: 25px;
    margin: 5px;
    color: var(--lighter);
    margin-bottom: 65px;
    padding: 0;
    padding-top: 5px;
}

#confirm-report-popup button {
    position: fixed;
    bottom: 5px;
    width: calc(50% - 7.5px);
    height: 30px;
    border-radius: 5px;
    background-color: var(--light);
    color: var(--darker);
    border: none;
    cursor: pointer;
}

#confirm-report-popup-yes {
    left: 5px;
}

#confirm-report-popup-no {
    right: 5px;
}

canvas {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0);
    box-shadow: 0 0 10px black;
    margin: 0;
    padding: 0;
    z-index: 0;
    background-color: var(--darker);
    /* image-rendering: pixelated; */
}

#connect-button {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    box-shadow: 0 0 10px black;
    margin: 0;
    padding: 0;
    z-index: 0;
    background-color: var(--light);
    color: var(--darker);
    border: none;
    image-rendering: pixelated;
    width: 200px;
    height: 50px;
    font-size: 20px;
}

#pincontent,
#pin-form,
#instructions {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--dark);
    border-radius: 5px;
    box-shadow: 0 0 10px black;
    width: 400px;
    height: 500px;
    padding: 5px;
    z-index: 9999;
    display: block;
}

#instructions {
    width: 500px;
}

#instructions h2 {
    padding: 0;
    margin: 0;
}

#instructions li {
    margin-bottom: 10px;
}

#pincontent #pincontent-title,
#pin-form #pin-title,
#instructions h1 {
    color: var(--white);
    font-size: 20px;
    height: 25px;
    top: 5px;
    left: 5px;
    right: 35px;
    width: calc(100% - 35px);
    margin: 0;
    padding: 0;
    text-align: left;
    overflow-x: visible;
    scrollbar-width: none;
    overflow-y: hidden;
    text-wrap: nowrap;
    scrollbar-color: rgba(0, 0, 0, 0) rgba(203, 112, 112, 0.5);
}

#pincontent-title {
    width: 100% !important;
}

#pincontent hr,
#pin-form hr,
#instructions hr {
    margin: 0;
    padding: 0;
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 5px;
    border: 2px solid var(--light);
}

#pincontent #pincontent-text,
#pin-form #pin-content,
#instructions div {
    color: var(--lighter);
    font-size: 15px;
    margin: 0;
    padding: 0;
    min-width: calc(100%);
    max-width: calc(100%);
    width: calc(100%);
    min-height: calc(100% - 45px);
    max-height: calc(100% - 45px);
    height: calc(100% - 45px);
    resize: none;
    top: 5px;
    bottom: 5px;
    left: 5px;
    right: 5px;
    text-align: center;
    overflow-wrap: anywhere;
    overflow-y: auto;
    scrollbar-color: var(--light) var(--dark);
}

#pincontent {
    border-radius: 5px 0 5px 5px;
}

#instructions div {
    text-align: left;
}

#close-pin,
#copy-pin,
#report-pin,
#close-form,
#close-instructions {
    position: fixed;
    cursor: pointer;
    top: 5px;
    right: 5px;
    display: inline;
    width: 25px;
    height: 25px;
    margin: 0;
    padding: 1px 6px 1px 6px;
    border: none;
    text-align: center;
    font-weight: bold;
    background-color: var(--lighter);
    color: var(--darker);
    border-radius: 5px;
}

#outcrop {
    position: fixed;
    z-index: -1;
    top: 0;
    right: -35px;
    display: inline;
    width: 35px;
    height: calc(5px + 25px + 5px + 25px + 5px + 25px + 5px);
    border-radius: 0 5px 5px 0;
    background-color: var(--dark);
}

#close-pin {
    right: -30px;
    top: calc(5px);
}

#copy-pin {
    right: -30px;
    top: calc(5px + 25px + 5px);
}

#report-pin {
    right: -30px;
    top: calc(5px + 25px + 5px + 25px + 5px);
}

#refresh-pins,
#toggle-fullscreen,
#show-instructions,
#confirm-search {
    position: fixed;
    cursor: pointer;
    top: 10px;
    right: 10px;
    display: inline;
    width: 25px;
    height: 25px;
    margin: 0;
    border: none;
    text-align: center;
    font-weight: bold;
    background-color: var(--lighter);
    color: var(--darker);
    border-radius: 5px;
    opacity: 0.75;
    box-shadow: 0 0 10px black;
}

#refresh-pins:hover,
#toggle-fullscreen:hover,
#show-instructions:hover,
#confirm-search:hover {
    opacity: 1;
}

#toggle-fullscreen {
    right: 40px;
}

#show-instructions {
    right: 70px;
}

#confirm-search {
    right: 100px;
    padding: 1px 6px 1px 6px;
    background-color: rgba(0, 0, 0, 0.5);
    color: var(--white);
    border-radius: 0 5px 5px 0;
}

#search-content {
    position: fixed;
    cursor: text;
    top: 10px;
    right: 125px;
    display: inline;
    min-width: 200px;
    height: 25px;
    margin: 0;
    padding: 0;
    border: none;
    text-align: center;
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.5);
    color: var(--lighter);
    border-radius: 5px 0 0 5px;
    opacity: 0.75;
    box-shadow: 0 0 10px black;
}

#search-content:hover {
    opacity: 1;
}

#pin-button {
    position: fixed;
    cursor: pointer;
    top: calc(100% + 5px);
    display: inline;
    left: 0;
    right: 0;
    width: 100%;
    height: 25px;
    margin: 0;
    padding: 0;
    border: none;
    text-align: center;
    font-weight: bold;
    background-color: var(--lighter);
    color: var(--darker);
    border-radius: 5px;
    box-shadow: 0 0 10px black;
}

#pin-title-length,
#pin-content-length {
    position: fixed;
    top: calc(100% + 35px);
    display: inline;
    left: 0;
    right: 0;
    width: 100%;
    height: 25px;
    font-size: 15px;
    color: var(--lighter);
    text-align: center;
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0);
}

#pin-content-length {
    top: calc(100% + 60px);
}

#pin-title,
#pin-content,
#pin-title:focus,
#pin-content:focus {
    color: #000 !important;
}

#pincontent-text a {
    text-decoration: underline;
}