* {
    margin: 0;
    padding: 0;
}
.habibi-regular {
    font-family: "Habibi", serif;
    font-weight: 400;
    font-style: normal;
}
.adamina-regular {
    font-family: "Adamina", serif;
    font-weight: 400;
    font-style: normal;
}

p,
figcaption,
th,
td,
a {
    font-family: "Habibi", serif;
}
h1,
h2,
caption {
    font-family: "Adamina", serif;
}
img {
    width: 100%;
    height: 100%;
    max-width: 400px;
}
#architecture ::selection {
    background-color: rgba(146, 74, 77, 0.35);
    color: rgb(146, 74, 77);
}
#nature ::selection {
    background-color: rgba(160, 94, 42, 0.3);
    color: rgb(160, 94, 42);
}
#fantasy ::selection {
    background-color: rgba(96, 37, 3, 0.3);
    color: rgba(96, 37, 3);
}
#architecture body {
    background-color: rgba(146, 74, 77, 0.05);
    color: rgba(146, 74, 77, 0.95);
}
#nature body {
    background-color: rgba(160, 94, 42, 0.1);
    color: rgba(112, 53, 7);
}
#fantasy body {
    background-color: rgba(96, 37, 3, 0.1);
    color: rgb(88, 32, 0);
}
h1 {
    padding: 20px 40px 25px;
}
#architecture h1 {
    background-color: rgba(146, 74, 77);
    color: white;
}
#nature h1 {
    background-color: rgba(160, 94, 42, 0.2);
    color: rgba(160, 94, 42, 0.9);
}
#fantasy h1 {
    background-color: rgba(96, 37, 3, 0.7);
    color: white;
}
footer #disclaimer {
    font-size: 14px;
}
#architecture footer #disclaimer {
    color: rgba(146, 74, 77, 0.9);
    background-color: inherit;
}
#fantasy footer #disclaimer {
    color: rgba(96, 37, 3, 1);
    background-color: inherit;
}
#architecture a,
#architecture hr,
#architecture caption {
    color: rgb(146, 74, 77);
    background-color: inherit;
}
#architecture a:hover {
    color: rgb(98, 23, 26);
    background-color: inherit;
}
#nature a,
#nature hr,
#nature caption {
    color: rgba(112, 53, 7);
    background-color: inherit;
}
#nature a:hover {
    color: rgba(112, 53, 7, 0.7);
    background-color: inherit;
}
#fantasy a,
#fantasy hr,
#fantasy caption {
    color: rgb(88, 32, 0);
    background-color: inherit;
}
#fantasy a:hover {
    color: rgb(152, 95, 63);
    background-color: inherit;
}
figure {
    margin: 20px 25px;
    padding: 10px;
    text-align: center;
    border: 10px solid;
    overflow: hidden;
    display: block;
}

#architecture figure {
    border-color: rgba(146, 74, 77, 0.55);
}
#nature figure {
    color: inherit;
    border-color: rgba(160, 94, 42, 0.4);
    background-color: rgba(160, 94, 42, 0.3);
}
#fantasy figure {
    border-color: rgba(96, 37, 3, 0.6) rgba(96, 37, 3, 0.45);
}
#architecture #firstImage {
    border-color: rgba(146, 74, 77, 0.85);
}
#nature #firstImage {
    border-color: rgba(160, 94, 42, 0.7);
}
#fantasy #firstImage {
    border-color: rgba(96, 37, 3, 0.9) rgba(96, 37, 3, 0.7);
}
hr {
    border: 2px solid;
}
figcaption {
    font-style: italic;
}
p,
h2 {
    margin: 15px;
}
.italic {
    font-style: italic;
}
table,
th,
td {
    margin: 10px;
    border-collapse: collapse;
    border: solid 2px;
}
table {
    padding-bottom: 0;
}

div {
    overflow-block: hidden;
    width: 100%;
}
#architecture th {
    background-color: rgba(146, 74, 77, 0.3);
    color: rgb(92, 40, 43);
}
#nature th {
    background-color: rgba(160, 94, 42, 0.35);
    color: inherit;
}
#fantasy th {
    background-color: rgba(96, 37, 3, 0.3);
    color: inherit;
}
td {
    padding: 5px 10px;
}
#architecture td {
    background-color: rgba(146, 74, 77, 0.1);
    color: rgb(122, 52, 55);
}
#nature td {
    background-color: rgba(160, 94, 42, 0.1);
    color: inherit;
}
#fantasy td {
    background-color: rgba(96, 37, 3, 0.1);
    color: inherit;
}
ul {
    padding-left: 15px;
}
#architecture svg {
    fill: rgb(146, 74, 77);
}
#architecture svg:hover {
    fill: rgb(98, 23, 26);
}
#nature svg {
    fill: rgba(112, 53, 7);
}
#nature svg:hover {
    fill: rgb(154, 94, 45);
}
#fantasy svg {
    fill: rgb(96, 37, 3);
}
#fantasy svg:hover {
    fill: rgb(152, 95, 63);
}
caption {
    font-size: 28px;
}