body {
    background-color: #171717;
    font-family: 'Courier New', monospace;
    color: #e8eaed;
    text-align: justify;
    word-break: break-word;
}

img {
    vertical-align: middle;
}

p, b {
    font-size: 17px;
}

a {
    text-decoration: none;
}

table {
    width: 100%;  
}

td {
    border: 2px solid #3c3e42;
    word-break: normal;
}

input, button {
    background-color: inherit;
    color: inherit;
    font-family: inherit;
    border: 1px solid #3c3e42;
    padding: 3px;
}

button {
    padding: 10px;
    cursor: pointer;
    font-weight: bold;
}

.widget-container {
    display: grid;
    justify-content: center;
    grid-auto-flow: column;
}

.widget-container a {
    color: inherit;
}

.widget {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 280px;
    height: 230px;
    margin: 10px;
    background-color: #202124;
}

.widget span {
    margin-top: 15px;
    font-size: 25px;
    font-weight: bold;
}

.widget:hover {
    opacity: 0.6;
    cursor: pointer;
}

.webring a {
    display: inline;
}

.webring img {
    width: 120px;
    height: 45px;
    border: 2px solid #3c3e42;
    margin: 5px;
}

h1 , 
table ,
form ,
.footer ,
.widget,
.webring {
    text-align: center;
}

.footer {
    margin-top: 25px;
}

.donate {
    background-color: #000;
    color: #ff79c6;
    font-size: 14px;
}

.purple , a {
    color: #bd93f9;
}

.red {
    color: #ff5555;
}

.yellow {
    color: #f1fa8c;
}

.purple-bg {
    background-color: #bd93f9;
    font-weight: bold;
}

.red-bg {
    background-color: #ff79c6;
}

.green-bg {
    background-color: #50fa7b;
}

.yellow-bg {
    background-color: #f1fa8c;
}

.purple-bg ,
.red-bg ,
.yellow-bg ,
.green-bg {
    color: #202124;
}

.content {
    margin-left: 25%;
    margin-right: 25%;
}

@keyframes rainbow {
	0% {
		color: red;
	}

	17% {
		color: orange;
	}

	33% {
		color: yellow;
	}

	50% {
		color: green;
	}

	67% {
		color: blue;
	}

	84% {
		color: purple;
	}

	100% {
		color: red;
	}
}

.rainbow {
	animation: rainbow 4s infinite;
}
@media only screen and (max-width: 1050px) {
     .widget-container {
        grid-auto-flow: unset;
        margin-left: 25%;
        margin-right: 25%;
     }

     .content {
         margin-left: 3%;
         margin-right: 3%;
     }
    
    td {
        word-break: break-word;
    }
}