@import url(/global.css);

h1 {
    font-size: 2rem;
    margin-bottom: 30px;
}

input[type="text"] {
    background: var(--surface0);
    border: 1px solid var(--surface1);
    color: var(--text);
    padding: 12px 15px;
    border-radius: 8px;
    font-size: 1rem;
    width: 70%;
    margin-right: 10px;
    transition: border-color 0.2s;
	outline: none;
	z-index: 2;
}

button {
    background: var(--mauve);
    color: #1e1e1e;
    border: none;
    padding: 12px 20px;
    font-size: 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
	z-index: 2;
}

button:hover {
    background: var(--pastel-violet);
}

#output {
    margin-top: 25px;
    border-radius: 10px;
    width: 100%;
    max-width: 640px;
}

table {
	border-collapse: collapse;
	width: 100%;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

th, td {
	padding: 10px 14px;
    border-radius: 12px;
}

tr:hover {
	background-color: var(--surface1);
}

th {
	text-align: left;
}

.your {
	margin-top: 15px;
}

#your-ip {
	margin-left: 5px;
}

#your-ip:not(:hover) {
	filter: blur(50px);
}