table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
}
th, td {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}
th {
    background-color: #f2f2f2;
}
tr:nth-child(even) {
    background-color: #f9f9f9;
}
tr:hover {
	background-color: #f1f1f1;
}

#buttonContainer {
    display: flex;
}

button:hover {
    background-color: #f1f1f1;
}

.click-button {
	padding: 10px;
	background-color: #f9f9f9;
	color: black;
	border: none;
	cursor: pointer;
    flex-grow: 1;
}

@keyframes copiedEffect {
    0% {
        background-color: #f1f1f1;
    }
    50% {
        background-color: #aaaaaa; /* Yellow color for the copied effect */
    }
    100% {
        background-color: #f1f1f1;
    }
}

.clicked {
	animation: copiedEffect .5s ease-in-out;
}

.inputContainer {
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    margin: 10px;
}

.input {
    padding: 10px;
    display: flex;
    flex-direction: column;
}

#instructions {
    width: fit-content;
    display: flex;
}

.contentWrapper {
    width: fit-content;
    margin: auto;
}

.center {
    margin: auto;
}