body {
background-image: url('background.png');
color: white;
font-family: Courier;
cursor: url('cursors/cursor-main1.png'), default;
padding-left: 20px;
}
/* other cursors */
a:hover, button:hover {
cursor: url('cursors/cursor-pointer1.png'), pointer;
}
button, a {
cursor: url("cursors/cursor-main1.png"), default;
}
p, span, input, textarea {
cursor: url('cursors/cursor-text1.png') 16 16, text;
}
div, header, footer {
cursor: default;
}
.wait-cursor {
cursor: wait;
}
body, html {
cursor: url('/cursors/cursor-main1.png'), auto;
}
/* buttons */
.button-link {
background-image: url('button pattern 1.png');
color: white;
font-size: 16px;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-image 0.3s ease;
text-decoration: none;
}
.button-link:hover {
background-color: #666;
}
.image-button {
display: inline-block;
text-align: center;
text-decoration: none;
color: white;
font-family: sans-serif;
}
.image-button img {
width: 200px;
height: auto;
border-radius: 8px;
transition: transform 0.2s ease;
cursor: pointer;
}
.image-button:hover img {
transform: scale(1.05);
cursor: url("/cursors/cursor-pointer1.png"), pointer;
}
.image-button p {
margin-top: 8px;
text-decoration: underline;
}
.image-button {
position: relative;
display: inline-block;
cursor: pointer;
}
.image-button img {
display: block;
}
.caption {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 5px 10px;
border-radius: 4px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.image-button:hover .caption {
opacity: 1;
pointer-events: auto;
}
/* linkcolor */
a {
color: white;
text-decoration: underline;
}
/* horizontal-linescolor */
hr {
color: white;
}
/*selector*/
.button-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 15px;
justify-items: center;
align-items: center;
padding: 20px;
}