@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primaryColor: #df2d2d;
    --primaryShadow: rgba(223, 45, 45, 0.5);
}

body {
    display: none;
    height: 110vh;
    width: 100%;
    overflow: hidden;
    color: white;
    font-family: "Inter", sans-serif;
}

.background {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bg-image {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    opacity: 5%;
}

.dot-pattern {
    height: 720px;
    width: 480px;
    background-image: radial-gradient(var(--primaryColor) 2px, transparent 0);
    background-size: 40px 40px;
    opacity: 20%;
    position: absolute;
}

.dot-pattern[data-idx="1"] {
    top: 5%;
    left: 5%;
    transform: translate(-50%, -50%) rotate(45deg);
}

.dot-pattern[data-idx="2"] {
    bottom: 5%;
    right: 5%;
    transform: translate(50%, 50%) rotate(45deg);
}

.spawn-selector {
    width: 800px;
    height: 500px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.map {
    width: 100%;
    background-image: url('https://r2.fivemanage.com/Xl7w1f1oBZ5eKrExaRdJL/images/map.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    flex-grow: 1;
    background-color: rgba(20, 20, 20, 0.897);
    text-align: center;
    border: 1px solid white;
    border-radius: 10px;
    text-shadow: 0 0 5px rgba(223, 45, 45, 0.5), 0 0 10px rgba(223, 45, 45, 0.5), 0 0 15px rgba(223, 45, 45, 0.5);  
}

.map h2 {
    font-size: 1rem;
    position: absolute;
    left: 50%;
    top: -3%;
    width: 600px;
    transform: translateX(-50%);
    color: rgba(223, 45, 45, 0.5);
    background-color: rgb(20, 20, 20);
    text-align: center;
    border: 1px solid white;
    border-radius: 10px;
    text-shadow: 0 0 5px rgba(223, 45, 45, 0.5), 0 0 10px rgba(223, 45, 45, 0.5), 0 0 15px rgba(223, 45, 45, 0.5);
}

.map .current-location {
    position: absolute;
    top: 39rem;
    left: 1rem;
    height: 185px;
    transform: translateY(-50%);
    background-color: rgba(20, 20, 20, 0.897);
    overflow: hidden;
    text-align: center;
    border: 1px solid white;
    border-radius: 5px;
    text-shadow: 0 0 5px rgba(223, 45, 45, 0.5), 0 0 10px rgba(223, 45, 45, 0.5), 0 0 15px rgba(223, 45, 45, 0.5);
}

.map .current-location img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: inherit;
}

.map .locations {
    width: 100%;
    height: 100%;
    position: relative;
}

.location {
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    position: absolute;
    background: #181d1e;
    transition: all 0.3s ease-in-out;
}

.location svg {
    width: 28px;
    height: 28px;
    fill: var(--primaryColor);
}

.location:hover svg {
    fill: green;
}

.location:hover {
    box-shadow: 0px 0px 10px var(--primaryShadow);
}

.actions {
    display: flex;
    align-items: center;
    justify-content: center;
}

.actions button {
    font-family: "Inter", sans-serif;
    font-size: 1.1rem;
    height: 4rem;
    width: 12rem;
    font-weight: 900;
    border: none;
    cursor: pointer;
    transition: all 300ms ease-out;
}

.container {
    position: relative;
}

.actions button:hover {
    transform: scale(1.1);
}

.actions .last {
    position: absolute;
    bottom: 40px;
    right: 1%;
    transform: translateX(-50%);
    background: linear-gradient(137deg, #303030 0%, #414141 100%);
    box-shadow: 0px 0px 50px 0px rgba(255, 255, 255, 0.12);
    border: 1px solid white;
    border-radius: 10px;
    font-family: "Inter", sans-serif;
    font-size: 1.1rem;
    height: 4rem;
    width: 12rem;
    font-weight: 900;
    cursor: pointer;
    color: white;
    transition: all 300ms ease-out;
}

.actions .last:hover {
    transform: translateX(-50%) scale(1.1);
}

.actions .spawn {
    position: absolute;
    bottom: 120px;
    right: 1%;
    transform: translateX(-50%);
    background: var(--primaryColor);
    box-shadow: 0px 0px 15px var(--primaryShadow);
    border: 1px solid white;
    border-radius: 10px;
    font-family: "Inter", sans-serif;
    font-size: 1.1rem;
    height: 4rem;
    width: 12rem;
    font-weight: 900;
    cursor: pointer;
    color: white;
    transition: all 300ms ease-out;
}

.actions .spawn:hover {
    transform: translateX(-50%) scale(1.1);
}

@media screen and (min-width: 1366px) {
    .spawn-selector {
        width: 1200px;
        height: 750px;
    }
    .map h2 {
        font-size: 2.4rem;
    }
    .map .current-location img {
        width: 300px;
    }
    .map .current-location h3 {
        font-size: 1.4rem;
    }
    .map .current-location {
        bottom: 0.5rem;
    }
}
