// out: false, compress: true

@charset "utf-8";

@bg-main: #9DD9D2;
@bg-sub: #D4F5F5;
@text: #111;
@text-main: #0D5D56;
@text-sub: #8C9A9E;
@anker: #554348;
@gray: #ccc;
@white: #fff;

@radius: .3rem;

@margin-sm: 2rem;
@margin-md: 4rem;
@margin-lg: 8rem;

@path-image: "/theme/site/belu/images/";

@screen-sm-min: 768px;
@screen-md-min: 992px;
@screen-lg-min: 1200px;

.screen-sm(@rules) {
    @media (min-width: @screen-sm-min) { @rules(); }
}
.screen-md(@rules) {
    @media (min-width: @screen-md-min) { @rules(); }
}
.screen-lg(@rules) {
    @media (min-width: @screen-lg-min) { @rules(); }
}


/* article
-------------------------------*/
article .post-data {
	.post-date {
		color:@text-sub;
	}
	.post-category {
		margin-left:1rem;
		i {
			display:inline-block;
			line-height:1;
			font-size:.9rem;
			&:not(:first-child) {
				margin-left:.5rem;
			}
			a {
				background:@bg-main;
				color:@text-main;
				border-radius:@radius;
				padding:.3rem .6rem;
				display:inline-block;
				width:100%;
				height:100%;
				text-decoration:none;
			}
		}
	}
}
article .post-body {
	margin-top:2rem;
	font-size:1.2rem;
	h2, h3 {
		border-bottom:1px solid #ccc;
	}
	//h3 + br + br,
	//div + br + br {
	//	display:none;
	//}
	.source-box > br,
	.result-box > br {
		display:none;
	}
	pre > br:first-child {
		display:none;
	}
	a.arrow::before {
		content:">";
	}
	a.btn {
		display: inline-block;
		padding:.9rem 1.2rem;
		background:@text-main;
		color:#fff;
		line-height:1;
		text-decoration:none;
	    border-radius: @radius;
	    &:hover {
			background: lighten(@text-main, 10%);
	    }
	}
	a.external::after{
		font-family: "Font Awesome 5 Free";
		content:"\f35d";
		font-weight: 900;
		color:#fff;
		padding-left:3px;
		padding-right: 5px;
	}
}

article .post-body blockquote {
    position:relative;
    border-top:1px solid #275D56;
    border-bottom:1px solid #275D56;
    padding:2rem 1rem;
    &::before {
	    position:absolute;
	    background-color:#FFFFFF;
	    color:#999;
	    font-family: "Font Awesome 5 Free";
	    font-weight:900;
	    content:'\f10d';
	    line-height:1;
	    text-align:center;
	    top:-1.4rem;
	    left:-.7rem;
	    padding:.7rem;
	    font-size:1.4rem;
    }
	&::after{
	    position:absolute;
	    background-color:#FFFFFF;
	    right:-.7rem;
	    bottom:-1.4rem;
	    padding:.7rem;
	    color:#999;
	    font-family: "Font Awesome 5 Free";
	    font-weight:900;
	    content:'\f10e';
	    line-height:1;
	    text-align:center;
	    font-size:1.4rem;
	}
	cite {
	    display: block;
	    margin-top:1rem;
	    padding-right:1.4rem;
	    font-size: 0.8rem;
	    text-align: right;
	    color: #808080;
	}
}


/* common star-rating
-------------------------------*/
.lotate {
    animation: 1.9s rotation infinite linear;
}
@keyframes rotation {
	0% {transform:rotate(0deg);}
	100% {transform:rotate(360deg);}
}

/* common star-rating
-------------------------------*/
.star-rating{
  font-size:0;
  white-space:nowrap;
  vertical-align: text-top;
  display:inline-block;
  width:6rem;
  height:1.2rem;
  overflow:hidden;
  position:relative;
  background:
      url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjREREREREIiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
  background-size: contain;
  i{
    opacity: 1;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 20%;
    z-index: 1;
    background: 
        url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjRkZERjg4IiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');  
    background-size: contain;
  }
  i ~ i{
    width: 40%;
  }
  i ~ i ~ i{
    width: 60%;
  }
  i ~ i ~ i ~ i{
    width: 80%;
  }
  i ~ i ~ i ~ i ~ i{
    width: 100%;
  }
}