html {
    border-radius: 4px;
    border: 4px solid rgb(230, 216, 197);
}

body {
    background-color: antiquewhite;
    font-family: Verdana, Tahoma, sans-serif;
}

a {
    color: navy;
}

img {
    border-radius: 4px;
    border-style: solid;
    width: 500px;
    margin: 10px;
    margin-bottom: 0;
    transform: scale(1);
}

ul {
    padding: 0;
}

h2 {
    text-align: center;
}

nav {
    background-color: darkblue;
    padding: 4px;
    margin-bottom: 10px;
    color: aliceblue;
    font-weight: bold;
    box-sizing: border-box;
    border-radius: 4px;
    border: 4px solid rgb(0, 0, 114);
}

article {
    background-color: rgb(227, 211, 192);
    padding-top: 2px;
    padding-bottom: 20px;
    margin-bottom: 10px;
    text-align: center;
    font-size: small;
    border-color: black;
    border-radius: 4px;
    box-sizing: border-box;
    border: 4px solid rgb(200, 186, 169);
}

footer {
    background-color: rgb(182, 169, 154);
    padding: 4px;
    text-align: center;
    border-color: black;
    border-radius: 4px;
    box-sizing: border-box;
    border: 4px solid rgb(158, 147, 134);
}

.bold {
    font-weight: bold;
}

.subtitle {
    font-size: large;
    font-style: italic;
    font-weight: bold;
}

.center {
    align-self: center;
    align-items: center;
    align-content: center;
}


.caption {
    font-size: small;
    color: rgb(56, 56, 56);
    font-style: italic;
}

#deltarune {
    background-image: url('Images/prophecy.png');
    background-size: cover;
    background-repeat: repeat;
    background-position: center;
    background-attachment: fixed;
    color:white;
}

#copyright {
    font-size: small;
}

/* Detail Expansions */

section {
    transform: scale(1);
    transition: all 0.3s ease-in-out; 
}

section:hover {
    transform: scale(1.025);
}

summary {
    font-weight: bold;
    transform: scale(1);
    transition: all 0.3s ease-in-out; 
}

summary:hover {
    transform: scale(1.05);
}

details[open] summary {
    transform: scale(1.1);
}

details[open] summary:hover {
    transform: scale(1.15);
}

/* Transitions */


:root {
  interpolate-size: allow-keywords;
}

details::details-content {
  block-size: 0;
  opacity: 0;
  overflow: hidden;
  transition: block-size 0.5s ease, opacity 0.5s ease;
}

details[open]::details-content {
  block-size: auto;
  opacity: 1;
}