body {
   background-image:url(https://cheepfish.neocities.org/img/blog2bg.jpg); 
   background-attachment: fixed;
   background-size: cover;
}

main {
    width: 55em;
    padding-top: 0.9em;
    position: relative;
    margin: 0 auto;
    display: flex;
    gap: 0.8em;
}

#nav {
    width: 25%;
    padding: 0;
}

.misc img {
    width: 97%;
}

.title {
    background-image: url(https://cheepfish.neocities.org/img/blogbg4.jpg);
    border-radius: 0.7em 0.7em 0 0;
    border-bottom: 2px solid rgb(128, 130, 255);
    padding: 0.5em 0 0.5em 0.8em;
    margin-bottom: 0.75em;
    font-size: 1.25em;
    font-family: "timesb";
    color: #895ac7;
}

.title2 {
    background-image: url(https://cheepfish.neocities.org/img/blogbg.jpg);
    border-radius: 0.7em 0.7em 0 0;
    border: 2px solid rgb(41, 141, 255);
    border-bottom: 0;
    text-align: center;
    padding: 0.5em 0 0.5em 0;
    font-size: 1.25em;
    font-family: "timesb";
    color: #345c97;
}

#blog {
    width: 100%;
    height: 52em;
    margin: 0 auto;
    border: 2px solid rgb(128, 130, 255);
    background-image: url(https://cheepfish.neocities.org/img/blogbg3.jpg);
    border-radius: 1em;
}

iframe {
    border: 2px dotted rgb(68, 194, 233);
    padding: 0.7em 0.9em 0.7em 0.9em;
    background-color: rgba(252, 251, 249, 0.774);
    border-radius: 1.5em;
}

#detailsCont {
    height: 25em;
    padding: 0 1em 1em 1em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 2px solid rgb(41, 141, 255);
    background: linear-gradient(to bottom, #e4f5ff 30%, #d3fcff 79%, #a4dbff 100%);
    border-radius: 0 0 1em 1em;
}

details {
    font-size: 1.2em;
    margin: 0.5em auto 0.5em 0.5em;
    display: block
}

details p {
    margin: 0 auto 0.1em 0.4em;
    display: block;
    position: relative;
    max-width: 8em;
    text-overflow: ellipsis;
	white-space: nowrap;
    overflow: hidden;
    padding: 0.2em 0 0.2em 0;
}

details a {
    font-size: 0.8em;
    text-decoration: none!important;
    position: relative;
    margin-left: 0.4em;
}

details a::before {
    content: '>';
    font-family: starshine;
    margin: auto 0.5em auto auto;
    font-size: 0.7em;
}

details p::before {
    transform: scaleX(0);
    transform-origin: bottom left;
} 

details > p:hover::before {
    transform: scaleX(1);
    transform-origin: bottom left;
}

details > p::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0 0 0 0;
    background: linear-gradient(90deg,rgb(165, 205, 243) 0%, rgb(142, 178, 255) 60%, rgba(240, 236, 162, 0) 81%);
    z-index: -1;
    transition: 0.3s ease;
}

summary, p, .home {
    font-family: "times";
}

details {
    color: rgb(41, 141, 255);
}

.home {
    text-align:center;
    font-size: 20px;
    background: linear-gradient(to bottom, #f7fcff 30%, #d0fcff 79%, #90d6ff 100%);
    border: 2px solid rgb(41, 141, 255);
    border-radius: 1em;
    padding: 0.5em 0 0.5em 0;
    margin-top: 0.6em;
}

.home:hover {
    background: linear-gradient(to top, #d9f1ff 10%, #c9ebff 30%, #90d6ff 99%, #e9f7ff 30%);
}

.home a {
    text-decoration: none;
}