:root {
	--c-background: #dfddd0;
	--c-bar: #c9c7ba;
	--c-border: #625454;
	--c1: #dfddd0;
	--c2: #b7777a;
	--c3: #625454;
	--c-green: #88AA22;
	--c-blue: #87CEEB;
	--c-violet: #7a5ada;
	--c-red: #cc4e2e;
	--c-orange: #ec7453;
	--c-box-shadow: 4px 8px 12px 0 rgba(0, 0, 0, 0.4);
}

* {
	margin: 0;
	padding: 0;
	font-family: "Roboto", serif;
}

html {
	/* border: 1px blue solid; */
	background: url(pict/background.webp) rgb(223,221,208,0.80);
	background-size: 40vh;
	background-blend-mode: lighten;
}

body {
	/* border: 1px blue solid; */
	margin-top: 4vh;
}

p {
}

.font-italic {font-style: italic;}

.text-align-left {text-align: left;}
.text-align-center {text-align: center;}
.text-align-right {text-align: right;}
.text-align-justify {text-align: justify;}

.font-weight-200 {font-weight: 200;}
.font-weight-400 {font-weight: 400;}
.font-weight-600 {font-weight: 600;}
.font-weight-800 {font-weight: 800;}

.font-size-1-0 {font-size: 1vh;line-height: 1.33vh;}
.font-size-1-25 {font-size: 1.25vh;line-height: 1.66vh;}
.font-size-1-5 {font-size: 1.5vh;line-height: 2vh;}
.font-size-1-75 {font-size: 1.75vh;line-height: 2.33vh;}
.font-size-2-0 {font-size: 2vh;line-height: 2.66vh;}

.green {color: var(--c-green);}
.blue {	color: var(--c-blue);}
.violet {color: var(--c-violet);}
.red {color: var(--c-red);}

.blink {animation: blinker 1s linear infinite;}
@keyframes blinker {50% {opacity: 0;}}

pre {
	white-space: pre-wrap;
}
.introa {
	max-width: 12vh;
	margin: 1vh;
	float: right;
}

h1 {
}
h2 {
}
h3 {
}
h4 {
}
h5 {
}
h6 {
}

a {
	text-decoration: none;
	transition: 0.3s;
}
a:link {color: var(--c-violet);}
a:visited {color: var(--c-violet);}
a:hover {color: var(--c-orange);}
a:active {color: var(--c-orange);}

ul {
	margin: auto;
	width: 80%;
}
.list-style-none {list-style: none;}
.list-style-cirlce {list-style: circle;}
.list-style-square {list-style: square;}

.flex-column {flex-basis: 0;flex-grow: 1;}
.flex-column-0 {flex-basis: 0;}
.flex-column-5 {flex-basis: 5%;}
.flex-column-10 {flex-basis: 10%;}
.flex-column-25 {flex-basis: 25%;}
.flex-column-50 {flex-basis: 50%;}
.flex-column-75 {flex-basis: 75%;}
.flex-column-80 {flex-basis: 80%;}
.flex-column-90 {flex-basis: 90%;}
.flex-column-95 {flex-basis: 95%;}

.dvcenter {align-content: center;}

#main {
	max-width: 88vw;
	margin: 0 auto;
}

#term {
	border: 0.3em #625454 solid;
	border-radius: 1em;
	box-shadow: var(--c-box-shadow);
	overflow: hidden;
	height: 73vh;
}

.term-top-bar {
	border-bottom: 0.1em #625454 solid;
	background-color: var(--c-bar);
	height: 4vh;
	padding: 0 0.66em;
	display: flex;
}

.term-top-bar img {
	height: -webkit-fill-available;
}

.term-content {
	border-bottom: 0.1em #625454 solid;
	overflow-y: scroll;
	padding: 0.33em 0.66em;
	height: calc(72vh - 8.5vh);
	background: url(pict/bg.webp) rgb(223,221,208,0.9) no-repeat;
	background-size: 40vh;
	background-position: 97% 97%;
	background-blend-mode: soft-light;
}

.term-content p {
	margin-bottom: 1vh;
}

.term-content figure {
	/* display: inline; */
	float: left;
	margin: 0 1vh 2vh 1vh;
    text-align: center;
}

.gallery {
	/* padding: 0 0.5vh 1vh 0.5vh; */
	float: left;
	width: 49.9999%;
	margin: 6px 0px;
}

@media (min-width: 768px) {
	.gallery {
		width: 32.9999%;
	}
}

@media (min-width: 1024px) {
	.gallery {
		width: 24.9999%;
	}
}

.gallery-item {
	background-color: var(--c-bar);
	border: 0.1em #625454 solid;
	border-radius: 1em;
	box-shadow: var(--c-box-shadow);
	overflow: hidden;
	margin: 0 6px;
}

.gallery-item:hover {
	background-color: var(--c-background);
	transition: 0.3s;
}

.gallery-item img {
	width: 100%;
	height: auto;
	aspect-ratio: 1/1;
	object-fit: cover;
}

.gallery-item-caption {
	padding: 0 0.5vw;
	min-height: 5vh;
}

.gallery-item-caption-strava {
	padding: 0 0.5vw;
}

.photo {
	background-color: var(--c-bar);
	border: 0.1em #625454 solid;
	box-shadow: var(--c-box-shadow);
	border-radius: 1em;
	overflow: hidden;
	margin: 0 10%;
}

.photo img {
	width: 100%;
	height: auto;
}

.term-content::-webkit-scrollbar {
    width: 0;
}

.term-status-bar {
	background-color: var(--c-bar);
	height: 4vh;
	/* padding: 0 0.66em; */
	display: flex;
}

.term-status-bar-root {
}

.term-status-bar-icon {
	background-color: var(--c-border);
	border-left: 0.1em #625454 solid;
}

.term-status-bar-icon i {
	padding: 0 1vh;
}

.term-status-bar-icon a {
	color: var(--c-bar);
}

.term-status-bar-icon a:hover, a:active {
	color: var(--c-red);
}

#sns {
	height: 15vh;
	padding: 0.33em 0.66em;
}

#sns img {
	width: 6vh;
}

#sns figure {
	display: inline-block;
	margin: 0 2vw;
}

#sns figure img {
	-webkit-filter: sepia(90%);
	filter: sepia(90%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

#sns figure:hover img {
	-webkit-filter: sepia(0);
	filter: sepia(0);
}

#footer {
	position: absolute;
	bottom: 0;
	left: 0;
	display: flex;
	/* border-top: 0.1em #625454 solid; */
	padding: 0 5vw;
	width: -webkit-fill-available;
}

.footer-center {
	background-color: var(--c-bar);
	border: 0.3em #625454 solid;
	border-bottom: none;
	box-shadow: var(--c-box-shadow);
	border-radius: 1em 1em 0 0;
	flex-basis: 80%;
}

@media (min-width: 1024px) {
	#main {
		 width: 1000px;
	 }
	 body {
		 margin-top: 8vh;
	 }
	.footer-center {
		flex-basis: 33%;
	}
}