.journal {
    grid-area: main;
    display: grid;
    grid-template: "a b";
    grid-template-columns: 4fr 1fr;
    background-image: url("../../imgs/backgrounds/linedpaper.jpg");
    border-radius: 10px;
    background-size: 200px;
}

.journal main,
.journal aside {
    background: none;
    border: none;
    color: black;
    backdrop-filter: none;
}

.journal aside img {
	width: 68px;
	height: auto;
}

.journal aside img:nth-child(odd) {
    rotate: 20deg;
}
.journal aside img:nth-child(even) {
    rotate: -10deg;
}

.journal ol {
    list-style: decimal inside;
}

.journal a {
	text-decoration: rgb(69, 159, 203) wavy underline;
	color: #3b71a0;
}

.journal a:hover {
	text-decoration: rgb(192, 169, 228) wavy underline;
	color: #63a9a6;
}

.journal img {
	width: 50%;
}

.journal .landscape {
    width: 90%;
    height: auto;
}

/* journal archive filters */

.archiveItem {
  display: block;
}

input:checked + label {
  color: rgb(30, 121, 178)
}
input:checked ~ .archiveItem {
  display: none;
}

/* tag list */
@keyframes fadeIn {
   0% {opacity: 0;}
   100% {opacity: 1;} 
}

input[value="reading"]:checked ~ .archiveItem[data-tags*="reading"],
input[value="daily-life"]:checked ~ .archiveItem[data-tags*="daily-life"],
input[value="queer"]:checked ~ .archiveItem[data-tags*="queer"],
input[value="food"]:checked ~ .archiveItem[data-tags*="food"],
input[value="games"]:checked ~ .archiveItem[data-tags*="games"],
input[value="vent"]:checked ~ .archiveItem[data-tags*="vent"] {
    display: block;
    animation: fadeIn 1s;
}
@container grid-container (width < 561px) {
    .journal {
        grid-template: "a" "b";
    }
    .journal aside ul {
        display: flex;
        justify-content: space-around;
    }
    .journal main img {
        width: 90%;
    }
    .journal aside img {
        width: 20%;
    }
}