* {
    transition: 0.4s;
    image-rendering: pixelated;
}

body {
    background: url(https://maritimeshadiness.onlywonder.net/assets/wood.png);
    background-size: 200px;
    background-position: center;
}

p {
    text-align: center;
}

h1 {
    font-family: "Zeyada", cursive;
    text-align: center;
    font-size: 44px;
    line-height: 40px;
}

h2 {
    font-size: 24px;
    line-height: 8px;
    margin-top: -16px;
}

h2,
h3 {
    text-align: center;
}

h4 {
    font-size: 20px;
    line-height: 0;
}

.container {
    background: #b2a46f;
    color: black;
    max-width: 400px;
    margin: 24px auto;
    padding: 24px;
    border-radius: 16px;
}

.border {
    background: #3e6672;
    color: white;
    border: 16px solid #403320;
    border-image: url("https://maritimeshadiness.onlywonder.net/assets/frame.png");
    border-image-slice: 30;
    padding: 8px 24px;
}

.border a {
    color: white;
    border-color: white;
}

.border a:hover {
    color: #b2a46f;
    border-color: #b2a46f
}

ul {
    list-style-type: none;
    padding-left: 0px;
}

li {
    padding: 4px 8px;
}

li:hover {
    background: #b2a46f;
}

input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    color: #b2a46f;
    width: 12px;
    height: 12px;
    border: 2px solid white;
    border-radius: 50%;
    display: inline-grid;
    place-content: center;
}

input[type="radio"]::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transform: scale(0);
    box-shadow: inset 8px 8px #0d1d10;
}

input[type="radio"]:checked::before {
    transform: scale(1);
}

.img {
    max-width: 100%;
}

small {
    line-height: 0px;
}

a {
    text-decoration: none;
    color: black;
    border-bottom: 2px dotted black;
}

a:hover {
    color: #3e6672;
    border-color:#3e6672
}

button {
    background: #b2a46f;
    padding: 8px;
    border:none;
    border-radius: 8px;
    font-weight: bold;
}

button:hover {
    background-color:#403320;
    color: white;
    
}