body {
    font-family: 'Roboto', sans-serif;
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background-color: #f5f5f5;
}

.container {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 20px 30px;
    width: 80%;
    max-width: 500px;
    box-sizing: border-box;
}

h1 {
    text-align: center;
    margin-bottom: 20px;
}

.input-group label {
    display: block;
    margin-bottom: 5px;
}

.top-inputs {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

input:focus {
    border-color: #007BFF;
    outline: none;
}

button {
    width: 100%;
    padding: 10px;
    background-color: #007BFF;
    border: none;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-top: 20px;
}

button:hover {
    background-color: #0056b3;
}

.dice-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    width: 100%;
    box-sizing: border-box;
}

.die {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* border: 1px solid #007BFF; */ /* Commented out */
    border-radius: 4px;
    font-size: 24px;
    background-color: #f5f5f5;
    animation: fadeIn 0.5s ease-in, shake 0.5s ease-out;
    margin-right: 10px;
    margin-bottom: 10px;
    box-sizing: border-box; 
    box-shadow: inset 0 0 0 1px #007BFF; /* New */
}

.eight-sided {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="%23fff"><polygon points="30,2 70,2 98,30 98,70 70,98 30,98 2,70 2,30"/><line x1="30" y1="2" x2="2" y2="30" stroke="%23007BFF" stroke-width="2"/><line x1="2" y1="30" x2="2" y2="70" stroke="%23007BFF" stroke-width="2"/><line x1="2" y1="70" x2="30" y2="98" stroke="%23007BFF" stroke-width="2"/><line x1="30" y1="98" x2="70" y2="98" stroke="%23007BFF" stroke-width="2"/><line x1="70" y1="98" x2="98" y2="70" stroke="%23007BFF" stroke-width="2"/><line x1="98" y1="70" x2="98" y2="30" stroke="%23007BFF" stroke-width="2"/><line x1="98" y1="30" x2="70" y2="2" stroke="%23007BFF" stroke-width="2"/><line x1="70" y1="2" x2="30" y2="2" stroke="%23007BFF" stroke-width="2"/></svg>');
    background-size: cover;
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  }
  
.six-sided {
    border: 1px solid #007BFF;
}

.die:last-child {
    margin-right: 0;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }
    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }
    20% {
        transform: translate(-2px, 0px) rotate(1deg);
    }
    30% {
        transform: translate(1px, 2px) rotate(0deg);
    }
    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }
    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }
    60% {
        transform: translate(-1px, 1px) rotate(0deg);
    }
    70% {
        transform: translate(1px, 1px) rotate(-1deg);
    }
    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }
    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }
    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}