@import "./fonts/post.fonts.css";

main.content {
    .category {
	font-size: 1.1em;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 1.5rem 0 0.5rem 0;
    }

    h1.title {
	font-size: 2.2em;
	font-family: "Gunken", serif;
	margin: 0.5rem 0;
    }

    .info {
	font-size: 1rem;
	letter-spacing: -0.1em;
	margin: 1em 0 0.5em 0;

	.date > .nf {
	    margin-right: 0.5rem;
	}

	.read-time {
	    margin-left: 0.5rem;
	}
    }

    .head.image {
	width: 100%;
	height: 500px;
	border-radius: 15px;
	overflow: hidden;

	img {
	    width: 100%;
	    height: 100%;
	    object-fit: cover;
	}
    }

    .content {
	width: 100%;
	margin: 0.5rem 0;
	font-size: 1.3em;

	p {
	    text-align: justify;

	    &:has(img){
		text-align: center;

		img {
		    max-height: 500px;
		    max-width: 1000px;
		}
	    }
	}

	a {
	    color: var(--selection-color);
	}
    }

    blockquote {
	border-left: solid 10px;
	margin-inline-start: 0;
	padding-inline-start: 1.5em;
	margin-inline-end: 1.5em;
    }

    .tags.list {
	width: 100%;
	margin: 0.5rem 0;
	text-transform: lowercase;
    }
}

pre:has(code) button {
  position: absolute;
  top: 3px;
  right: 3px;
  border-radius: 5px;
  font-size: var(--font-size-sm);
}

pre:has(code) button.nf {
    position: absolute;
    top: 0;
    right: 0;
    margin: 5px;
    border-radius: 10px;
    font-size: 1em;
    height: 30px;
    width: 30px;
    border: none;
    color: var(--light-main-color);
    background-color: var(--dark-main-color);
    cursor: pointer;
    opacity: 0.8;

    &.nf-fa-check {
	color: var(--dark-main-color);
	background-color: var(--selection-color);
    }

    &:hover {
	opacity: 1;
    }
}

.Footnotes__ref {
    font-size: 0.8em;
    vertical-align: text-top;
}

.Footnotes__title {
    content-visibility: hidden;
    border-bottom: solid 1px;
    opacity: 0.8;
    margin-bottom: 0;
}

.Footnotes__list {
    font-size: 0.7em;
    text-align: left;
}

@media screen and (max-width: 1080px) {
    main.content {
	.content {
	    p {
		&:has(img){
		    img {
			max-width: 100%;
		    }
		}
	    }
	}
    }
}

@media screen and (max-width: 780px) {
    main.content {
	.category {
	    font-size: 1em;
	}

	h1.title {
	    font-size: 1.8em;
	    margin: 0;
	}

	.info {
	    font-size: 1em;
	}

	.content {
	    p {
		&:has(img){
		    img {
		    }
		}
	    }
	}
    }
}