siantarstyle.css

@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
@import url("https://fonts.googleapis.com/css?family=Dancing+Script|Lobster|Pattaya|Srisakdi&display=swap");
html,
body {
	cursor: url("https://cdn.jsdelivr.net/gh/barubelajarnih/css@main/mouse-f1.png"), auto;
}
a:hover {
	cursor: url("https://cdn.jsdelivr.net/gh/barubelajarnih/css@main/mouse-f2.png"), auto;
}
.loader {
	background: #4568dc;
	background: -webkit-linear-gradient(to right, #b06ab3, #4568dc);
	background: linear-gradient(to right, #b06ab3, #4568dc);
	opacity: 0.6;
	bottom: 0;
	left: 0;
	overflow: hidden;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 99999;
}
.loader-inner {
	bottom: 0;
	height: 60px;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	top: 0;
	width: 100px;
}
.loader-line-wrap {
	animation: spin 2000ms cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
	box-sizing: border-box;
	height: 50px;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	transform-origin: 50% 100%;
	width: 100px;
}
.loader-line {
	border: 4px solid transparent;
	border-radius: 100%;
	box-sizing: border-box;
	height: 100px;
	left: 0;
	margin: 0 auto;
	position: absolute;
	right: 0;
	top: 0;
	width: 100px;
}
.loader-line-wrap:nth-child(1) {
	animation-delay: -50ms;
}
.loader-line-wrap:nth-child(2) {
	animation-delay: -100ms;
}
.loader-line-wrap:nth-child(3) {
	animation-delay: -150ms;
}
.loader-line-wrap:nth-child(4) {
	animation-delay: -200ms;
}
.loader-line-wrap:nth-child(5) {
	animation-delay: -250ms;
}
.loader-line-wrap:nth-child(1) .loader-line {
	border-color: hsl(0, 80%, 60%);
	height: 90px;
	width: 90px;
	top: 7px;
}
.loader-line-wrap:nth-child(2) .loader-line {
	border-color: hsl(60, 80%, 60%);
	height: 76px;
	width: 76px;
	top: 14px;
}
.loader-line-wrap:nth-child(3) .loader-line {
	border-color: hsl(120, 80%, 60%);
	height: 62px;
	width: 62px;
	top: 21px;
}
.loader-line-wrap:nth-child(4) .loader-line {
	border-color: hsl(180, 80%, 60%);
	height: 48px;
	width: 48px;
	top: 28px;
}
.loader-line-wrap:nth-child(5) .loader-line {
	border-color: hsl(240, 80%, 60%);
	height: 34px;
	width: 34px;
	top: 35px;
}
@keyframes spin {
	0%,
	15% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(360deg);
	}
}
* {
	font-family: "Roboto";
	padding: 0;
	margin: 0;
}
.border {
	position: relative;
	width: 50%;
	height: 2px;
	background-color: rgb(138, 138, 138);
}
#boxs {
	margin-top: 3px;
}
#bg {
	position: fixed;
	min-height: 100vh;
	min-width: 100%;
	background-image: url("https://cdn.jsdelivr.net/gh/barubelajarnih/css@main/background.jpeg");
	
	background-size: cover;
	background-position: center;
	margin: 0;
	padding: 0;
	top: 0;
	left: 0;
}
#window {
	position: absolute;
	min-height: 100%;
	min-width: 100%;
	background-color: #000000;
	padding: 0;
	top: 0;
	left: 0;
}
#main {
	z-index: 2;
	position: relative;
	width: 450px;
	padding-bottom: 5px;
	background-color: #ffffffa4;
	border-radius: 25px;
	margin-top: 5px;
	-webkit-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.74);
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.74);
}
#cover {
	position: relative;
	height: 100%;
	width: 100%;
	background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKoUIg73dJF0a8FKjBVkSBm8IK66N53gv7liiqU_Nyb-hTucIlFvMKGkJHU5MMSr7DMypOohF4kvQsYlxgnmcKpH6yEybOHiYpKS2xI2IrpcLYJCx4NuOZ5h5zBIObIuwmkoUIPaFwAbnr7VeOwOn0D9W8T8Za4FZ0MttHsuIUZ1da-ZQhQmN5pqg7Qg/s1600/cover.gif");
	background-position: center;
	background-size: cover;
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
	padding-top: 30px;
	padding-bottom: 30px;
}
#bg-cover {
	position: absolute;
	height: 100%;
	width: 100%;
	background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKoUIg73dJF0a8FKjBVkSBm8IK66N53gv7liiqU_Nyb-hTucIlFvMKGkJHU5MMSr7DMypOohF4kvQsYlxgnmcKpH6yEybOHiYpKS2xI2IrpcLYJCx4NuOZ5h5zBIObIuwmkoUIPaFwAbnr7VeOwOn0D9W8T8Za4FZ0MttHsuIUZ1da-ZQhQmN5pqg7Qg/s1600/cover.gif");
	background-position: center;
	background-size: cover;
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
	filter: opacity(0.6);
}
#avatar {
	position: relative;
	background-position: center;
	background-size: cover;
	border-radius: 100%;
	border: 5px solid #1877f2;
	-webkit-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.74);
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.74);
}
#avatar img {
	height: 200px;
	width: 200px;
	border-radius: 50%;
	object-fit: cover;
	position: relative;
	border: 2px solid #fff;
}
.center {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin-top: 0;
}
#name {
	text-align: center;
	font-weight: bold;
	font-size: 30px;
	margin-top: 10px;
	margin-bottom: 0px;
	font-family: "Lobster";
}
#name i {
	color: #1877f2;
	font-size: 25px;
}
#bio {
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
	font-family: "Roboto";
	font-size: 16px;
}
#contact-text {
	display: inline-block;
	padding: 2px 15px;
	border-radius: 15px;
	margin-top: 10px;
	margin: 10px auto;
	text-align: center;
	font-weight: lighter;
	font-size: 20px;
	color: #ffffff;
	background: rgb(45, 136, 255);
	background: rgb(45, 136, 255);
	background: -moz-linear-gradient(127deg, rgba(45, 136, 255, 1) 0%, rgba(131, 186, 255, 1) 100%);
	background: -webkit-linear-gradient(127deg, rgba(45, 136, 255, 1) 0%, rgba(131, 186, 255, 1) 100%);
	background: linear-gradient(127deg, rgba(45, 136, 255, 1) 0%, rgba(131, 186, 255, 1) 100%);
	font-family: "Lobster";
	transition: all 250ms;
	cursor: default;
}
#contact-text:hover {
	transform: scale(1.2);
	padding: 2px 55px;
}
.box {
	height: 50px;
	width: 75%;
	margin: 5px auto;
	border-radius: 20px;
	background: rgb(42, 100, 173);
	background: -moz-linear-gradient(127deg, rgba(42, 100, 173, 1) 0%, rgba(45, 136, 255, 1) 100%);
	background: -webkit-linear-gradient(127deg, rgba(42, 100, 173, 1) 0%, rgba(45, 136, 255, 1) 100%);
	background: linear-gradient(127deg, rgba(42, 100, 173, 1) 0%, rgba(45, 136, 255, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2a64ad",endColorstr="#2d88ff",GradientType=1);
	-webkit-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.74);
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.74);
	z-index: 1;
	transition: all 250ms;
}
.box:hover {
	padding-right: 20px;
}
.icon {
	display: inline;
	position: relative;
	height: 50px;
	width: 50px;
}
.icon i {
	font-size: 30px;
	margin: 10px 20px;
	color: #ffffff;
	transition: transform 250ms;
	z-index: 2;
}
.icon i:hover {
	transform: rotate(360deg);
}
.detail {
	position: relative;
	display: block;
	margin: 0 auto;
	font-size: 20px;
	color: #ffffff;
	text-align: center;
	margin-top: 10px;
	transition: all 500ms;

	font-family: "Roboto";
}
.col-10 {
	position: relative;
	max-height: 100%;
}
.col-10:hover .detail {
	filter: opacity(0);
	z-index: -5;
}
.col-10:hover .linked {
	filter: opacity(1);
	z-index: 5;
}
.col-10:active .detail {
	filter: opacity(0);
	z-index: -5;
}
.col-10:active .linked {
	filter: opacity(1);
	z-index: 5;
}
.fas {
	transition: all 250ms;
}
.col-10:hover .fas {
	transform: rotate(360deg);
}
.linked {
	position: relative;
	margin: 0 auto;
	font-size: 20px;
	color: #ffffff;
	text-align: center;
	margin-top: 10px;
	transition: all 500ms;
	top: -40px;
	z-index: -2;
	filter: opacity(0);
	transition: all 1000ms;
	font-family: "Roboto";
}
.div-logo {
	position: relative;
	height: 30px;
	width: 30px;
	background-position: center;
	background-size: cover;
	margin: 10px 20px;
	z-index: 5;
	transition: all 250ms;
}
.div-logo:hover {
	transform: rotate(360deg);
}
@media only screen and (max-width: 540px) {
	#main {
		width: 100vw;
		margin-top: 0vw;
		margin-bottom: 0;
		border-radius: 0;
	}
	#bg-cover {
		border-radius: 0;
	}
	#window {
		min-height: 100%;
		min-width: 100%;
	}
	.linked {
		font-size: 19px;
	}
}
.facebook {
	background: #3a5795;
	color: #1c3977;
	background: linear-gradient(to bottom, #3a5795 0%, #2b4886 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3a5795), color-stop(100%, #2b4886));
	background: -webkit-linear-gradient(top, #3a5795 0%, #2b4886 100%);
	background: -moz-linear-gradient(top, #3a5795 0%, #2b4886 100%);
	background: -o-linear-gradient(top, #3a5795 0%, #2b4886 100%);
	background: -ms-linear-gradient(top, #3a5795 0%, #2b4886 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3A5795', endColorstr='#2B4886', GradientType=0);
	border: 1px solid #1c3977;
	text-shadow: 0 1px 0 #4966a4;
	-webkit-text-shadow: 0 1px 0 #4966a4;
	-moz-text-shadow: 0 1px 0 #4966a4;
	box-shadow: inset 0 1px 0 #4966a4;
	-webkit-box-shadow: inset 0 1px 0 #4966a4;
	-moz-box-shadow: inset 0 1px 0 #4966a4;
}
.messenger {
	background: #fc466b;
	background: -webkit-linear-gradient(to right, #3f5efb, #fc466b);
	background: linear-gradient(to right, #3f5efb, #fc466b);
}
.tiktok {
	background: #010101;
	background: -webkit-linear-gradient(to right, #010101, #6c0016);
	background: linear-gradient(to right, #010101, #6c0016);
}
.zalo {
	background: #0064f7;
	background: linear-gradient(127deg, #0064f7 0%, #2a7fff 100%);
}
.zalo-icon {
	background-image: url("https://cdn.jsdelivr.net/gh/barubelajarnih/css@main/zalo.png");
}
.phone {
	background: #1f1c2c;
	background: -webkit-linear-gradient(to right, #1f1c2c, #928dab);
	background: linear-gradient(to right, #1f1c2c, #928dab);
}
.momo {
	background: #a80069;
	background: linear-gradient(127deg, #a80069 0%, #d73193 100%);
}
.momo-icon {
	background-image: url("https://cdn.jsdelivr.net/gh/barubelajarnih/css@main/momo.png");
}
.vietcombank {
	background: #006c46;
	background: linear-gradient(127deg, #006c46 0%, #77bc41 100%);
}
.vietcombank-icon {
	background-image: url("https://cdn.jsdelivr.net/gh/barubelajarnih/css@main/vietcombank.png");
}
.mbbank {
	background: #1f00cf;
	background: linear-gradient(127deg, #1f00cf 0%, #006db5 100%);
}
.mbbank-icon {
	background-image: url("https://cdn.jsdelivr.net/gh/barubelajarnih/css@main/mbbank.png");
}
.badge {
	font-weight: bold;
	color: #ffffff;
	background-color: #2d88ff;
	padding: 0.5px 3px;
	border-radius: 3px;
	font-size: 10px;
}
a {
	text-decoration: none !important;
	color: rgb(42, 100, 173) !important;
}