@charset "utf-8";
*{
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	outline: none;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}
body{
	--m: #ffe324;
	--bg: #fff;
  --text0: #222;
	--text: #555;
	--text2: #aaa;
	--text3: #ccc;
  --border: #ddd;
  --curve: cubic-bezier(.08, .82, .2, 1);
  --curve-out: cubic-bezier(.95, .05, .8, .04);
  --duration: .2s;
  --duration-out: .24s;
  --transition: all var(--duration) var(--curve);
  --transition-out: all var(--duration-out) var(--curve-out);
	width: 100%; height: 80vh;
	margin: auto;
	background: var(--bg);
	color: var(--text);
	overflow: hidden;
	display: flex;
	justify-content: center; align-items: center;
	font-family: ANWE, 'Soleil', -apple-system,BlinkMacSystemFont,'PingFang SC', 'Microsoft YaHei', sans-serif;
}
::selection {
  background: var(--m);
  color: var(--text0);
}
a{
	transition: color .1s ease-in-out;
	color: var(--text);
}
.dummy{
  display: inline-block;
}
blockquote{
	text-align: left;
	max-width: 70%;
	display: flex;
	flex-direction: column;
  opacity: 0;
  transition: var(--transition);

}
.prepared blockquote{
  opacity: 1;
}
.quotation-mark{
	fill: var(--border);
	width: 40px;
  opacity: 0;
}
.prepared .quotation-mark {
  animation: fade-in var(--duration) var(--curve) calc( var(--duration) / 2 ) both;
}
.title{
	font-size: 60px;
	font-size: calc(1.5rem + 2vmax + .4vmin);
	line-height: 1.2;
	font-weight: 700;
	text-decoration: none;
	color: var(--text);
	position: relative;
	display: inline;
  max-width: 75ch;
  transition: var(--transition-out);
  /* border-bottom: .07em solid var(--m); */
  align-self: flex-start;
  animation: right-in var(--duration) var(--curve) both;
}
.msg-title{display: none;}
.first-use .first-use-title{display: inline;}
.title:hover{
	/* background: var(--m); */
	color: var(--text0);
  transition: var(--transition);
}
.title::after {
  transition: var(--transition-out);
  display: block;
  content: "";
  left: 0; bottom: 0;
  height: 100%; width: 100%;
  background: #ffe324;
  position: absolute;
  z-index: -999;
  opacity: 0;
  transform-origin: 0% 0%;
  transform: scaleX(0);
}
.title:hover::after{
  transition: var(--transition);
  width: 100%;
  opacity: 1;
  transform: none;
}
@keyframes right-in {
	0%{opacity: 0; transform: translateX(10px);}
	40%{opacity: 1;}
	100%{opacity: 1; transform: translateX(0);}
}


.desc{
	font-size: 1.5rem;
	color: var(--text2);
	max-width: 90ch;
	margin-top: 1em;
	line-height: 1.6;
  animation: right-in var(--duration) var(--curve) calc(var(--duration) / 4)both;
}
.desc a{
	text-decoration: none;
	color: var(--text2);
	border-bottom: 1px solid var(--text3);
	box-decoration-break: clone;
}
.desc a:hover{
	border-color: var(--m);
	color: var(--text);
}


/*~Footer*/
footer{
	opacity: 0;
	position: fixed;
	left: 15%;
	width: 70%; height: 80px;
	text-align: center;
	bottom: 1rem;
	color: #999;
	padding: 0;
	font-weight: 700;
}
footer.show{
  opacity: 1;
}
footer strong{
	font-weight: 400;
	display: inline-block;
	background: var(--bg);
	padding: 0 1em;
	color: var(--text3);
	margin: 0 auto;
	font-size: 1rem;
  display: flex;
  justify-content: center; align-items: center;
}
footer strong::after, footer strong::before{
  content: "";
  display: block;
  flex: 1 0 auto;
  height: 1px;
  background: var(--border);
  margin: 1em;
}
footer strong a{
	color: #ccc;
	text-decoration: none;
	font-weight: 700;
}
.latest-link{
	text-decoration: none;
	font-size: 1.2rem;
  margin-top: .2rem;
	color: #999;
	display: inline-block;
}
.latest-link:hover{
	color: #666;
}
.latest-link:after{
	content: " ";
	width: 100%;
	height: .2em;
	transform: scaleX(0);
	display: block;
	background: #ffe324;
	transition: transform .15s cubic-bezier(.4,0,.3,1);
}
.latest-link:hover:after{
	transform: scaleX(1);
}
.latest-link em{
	font-style: normal;
}
.latest-link:visited{
	color: #999;
}
.latest-link:visited:hover{
	color: #666;
}
.new-badge{
	font-size: .5em;
	display: none;
	background: #ffe324;
	color: #222;
	vertical-align: top;
	padding: .3em .6em .3em;
	border-radius: 1em;
	font-weight: 700;
}
.new-badge.show{
  display: inline;
}
@keyframes fade-in{
	0% {opacity: 0}
	100% {opacity: 1;}
}
/* ~Settings */
aside{
  width: 30vw; height: 100vh;
}
iframe{
  width: 100%; height: 100%;
}
/*~Notifications*/
body.notifications{
	height: 80vh;
	width: 100vw;
	text-align: center;
	left: 0; top: 0;
	display: flex;
	align-items: center;
}
body.notifications .inner{
	max-height: 100%;
}
body.notifications img{
	max-width: 100vw;
}
/*~Large Reslotuion*/
@media screen and (min-width: 1600px) {

}
/*~Small Reslotuion*/
@media screen and (max-height: 600px) {

	footer strong,
	.latest-link{
		font-size: 16px;
	}
}
@media screen and (max-height: 500px) {

	footer{
		background: #fff;
	}
	footer strong,
	.latest-link{
		font-size: 14px;
	}
}
@media screen and (max-height: 400px) {

	footer strong,
	.latest-link{
		font-size: 12px;
	}
}
@media screen and (max-width: 1300px) {

}
@media screen and (max-width: 1100px) {

	footer{
		left: 10%;
		width: 80%;
	}
	footer strong{
		font-size: 14px;
	}
	.latest-link{
		font-size: 16px;
	}
}
@media screen and (max-width: 1000px) {

	footer strong{
		font-size: .875rem;
    display: block;
	}
  footer strong::before, footer strong::after {display: none;}
	.latest-link{
		font-size: 14px;
	}
}
@media screen and (max-width: 800px) {

	footer{
		left: 7%;
		width: 86%;
	}
  footer strong {
    font-size: .75rem;
  }
}
@font-face {
	font-family:'Soleil';
	src: url(https://s.anw.red/font/soleil-regular.woff2) format('woff2');
	font-weight:400;
	font-style:normal;
	font-display:fallback;
}
@font-face {
	font-family:'Soleil';
	src: url(https://s.anw.red/font/soleil-semi-bold.woff2) format('woff2');
	font-weight:700;
	font-style:normal;
	font-display:fallback;
}
@font-face {
  font-family: ANWE;
  src: url(https://s.anw.red/anyway.fm/anyway-extra-v.woff2) format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020, U+3001, U+3002, U+2026, U+FF1A, U+FF0C, U+FF01, U+FF1F, U+FF1B, U+2014, U+3008, U+3009, U+300C, U+300D, U+300A, U+300B, U+300E, U+300F, U+FF08, U+FF09, U+201C, U+201D, U+2018, U+2019, U+007E;
}

@media (prefers-color-scheme: dark) {
  body{
    --bg: #202020;
    --text0: #222;
    --text: #bbb;
    --text2: #717171;
    --text3: #555;
    --border: #555;
  } 
}