@import './bulma-0.9.4/bulma/css/bulma.min.css';
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Rubik+Vinyl&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Covered+By+Your+Grace&display=swap');
@import url('https://fonts.googleapis.com/css?family=Special+Elite');
@import url('https://fonts.googleapis.com/css2?family=Covered+By+Your+Grace&family=Lato:wght@100&family=Permanent+Marker&family=Rubik+Vinyl&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; 
}

html, body {
  font-size: 87.5%;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  line-height: 150%; 
  background:#000 !important;
  -webkit-user-select: none; 
  -ms-user-select: none; 
  user-select: none;
}

html {
  overflow: scroll;
  overflow-x: hidden;
}

::-webkit-scrollbar {
  width: 0;  
  background: transparent;  
}

a{
  color: #ff6600 !important;
  text-decoration: none !important;
}

.color{
  color: #ff6600;
}

.logo{
  background-color: transparent !important;
  margin: 0;
  padding: 0 !important;
  font-size: 200%;
  font-family: 'Covered By Your Grace', cursive;
}

.logo:hover{
  transition: .3s;
  text-shadow: 5px 5px 3px #ff6600;
}

.navbar-item:hover{
  background-color: transparent !important;
  color: white !important;
}

.navbar-toggler{
  color: #ff6600;
}

.navbar-toggler-icon{
  background-color: #ff6600 !important;
}

canvas {
  position: relative;
  width: 100%;
  height: 100vh;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0; 
}

nav{
  background-color: transparent !important;
}

a {
  margin-bottom: 20px;
}

section{
  width: 50%;
  /* height: 90vh; */
  justify-content: center;
  align-items: center;
  align-content: center;
}

.views{
  box-shadow: 0px 0px 30px #ff6600;
  min-width: 115px !important;
  background-color: white;
  border-radius: 10px;
}

.views-text{
  font-family: 'Lato', sans-serif;
  color: black;
}

.views-counter{
  border-right: 1px solid #ff6600 !important;
}

.container{
  width: 100%;
  display: flex;
  justify-content: center;
  color: white;
}

.border-bottom{
  border-bottom: 1px solid white;
}

.cool-link {
  display: inline-block;
  color: white;
  text-decoration: none;
}

.cool-link::after {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  background: white;
  transition: width .3s;
}

.cool-link:hover::after {
  width: 100%;
}

.active{
  color: white !important;
  display: inline-block;
  color: white;
  text-decoration: none;
}

.active::after {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  background: white;
  transition: width .3s;
  width: 100%;
}

.arrows {
	width: 60px;
	height: 72px;
	position: absolute;
	left: 50%;
	margin-left: -30px;
	bottom: 80px;
}

.arrows path {
	stroke: #ff6600;
	fill: transparent;
	stroke-width: 2px;	
	animation: arrow 2s infinite;
	-webkit-animation: arrow 3s infinite; 
}

@keyframes arrow
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

@-webkit-keyframes arrow /*Safari and Chrome*/
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

.arrows path.a1 {
	animation-delay:-1s;
	-webkit-animation-delay:-1s; /* Safari 和 Chrome */
}

.arrows path.a2 {
	animation-delay:-0.5s;
	-webkit-animation-delay:-0.5s; /* Safari 和 Chrome */
}

.arrows path.a3 {	
	animation-delay:0s;
	-webkit-animation-delay:0s; /* Safari 和 Chrome */
}

.hero{
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero div{
  word-spacing: 5px;
  top: 40vh;
  position: absolute;
  text-align: center;
}

.hero div h1{
  font-family: 'Permanent Marker', cursive;
  font-family: 'Rubik Vinyl', cursive;
  font-size: 300%;
  color: #ff6600;
}

.skils-icons{
  display: flex;
  flex-wrap: wrap;
  background-color: white;
}

@keyframes cursor {
	0%, 100% { 
    border-color: #212121; 
  }
}

@keyframes text {
	0% { 
    width: 0; 
  }
	100% { 
    width: 38ch; 
  }
}

.section{
  /* height: 50vh; */
  text-align: center;
  width: 100%;
}

.cv-btn{
  border: 0;
  background-color: #ff6600;
  color: white;
}

.cv-btn:hover{
  transition: .5s;
  background-color: transparent;
  color: #ff6600;
}

.skils-icons{
  display: flex;
  justify-content: center;
}

.skils-icons>img{
  width: 16.5%;
  padding: 45px;
}

.skils-icons>img:hover{
  cursor: pointer;
  /* transform: scale(1.1); */
  transition: .5s;
  transform: rotate(360deg);
}

figure img{
  border: 1px solid #ff6600;
  border-radius: 50%;
  padding: 7rem;
}

.border{
  border-radius: 50%;
  width: 75px;
  height: 75px;
  padding: 1.7rem;
  margin: auto;
  background-color: black;
}

.shadow-lg{
  text-align: center;
  background-color: white;
  /* width: 25% !important; */
}

.flex-gap{
  display: inline-flex;
  flex-wrap: wrap;
}

/* 
.shadow{
  box-shadow: 2px 2px  white !important;
  background-color: red !important;
} */


.submit, .submit:focus{
  border: 0 !important;
  background-color: #ff6600 !important;  
  color: white;
}

.submit:hover{
  transition: .5s;
  color: #ff6600 !important;
  background-color: white !important;  
}

::placeholder {
  color: #ff6600 !important;
  opacity: 0.5; 
}

:-ms-input-placeholder { 
 color: #ff6600 !important;
 opacity: 0.5; 
}

::-ms-input-placeholder { 
 color: #ff6600 !important;
 opacity: 0.5; 
}

input{
  caret-color: #ff6600;
}

blockquote {
  font-family: 'Special Elite', cursive;
	font-weight: 100;
	font-size: 1.5rem;
	max-width: 600px;
	line-height: 1.4;
	position: relative;
	margin: 0;
	padding: .5rem;
}

blockquote:before,
blockquote:after {
	position: absolute;
	color: #f1efe6;
	font-size: 8rem;
	width: 4rem;
	height: 4rem;
}

blockquote:before {
	content: '“';
	left: -0.5rem;
	top: -4rem;
  color: #ff6600;
}

blockquote:after {
	content: '”';
	right: -0.5rem;
	bottom: -2rem;
  color: #ff6600;
}

cite {
  font-family: 'Special Elite', cursive;
	line-height: 3;
	text-align: left;
}

footer {
  background-color: black !important;
}


.site-footer
{
  background-color:#26272b;
  padding:45px 0 20px;
  font-size:15px;
  line-height:24px;
  color:#737373;
}
.site-footer hr
{
  border-top-color:#bbb;
  opacity:0.5
}
.site-footer hr.small
{
  margin:20px 0
}
.site-footer h6
{
  color:#fff;
  font-size:16px;
  text-transform:uppercase;
  margin-top:5px;
  letter-spacing:2px
}
.site-footer a
{
  color:#737373;
}
.site-footer a:hover
{
  color:#3366cc;
  text-decoration:none;
}
.footer-links
{
  padding-left:0;
  list-style:none
}
.footer-links li
{
  display:block
}
.footer-links a
{
  color:#737373
}
.footer-links a:active,.footer-links a:focus,.footer-links a:hover
{
  color:#3366cc;
  text-decoration:none;
}
.footer-links.inline li
{
  display:inline-block
}

@media only screen and (min-width: 1024px)  {
  .quote, .quote:focus{
    border: 1px solid white;
    border-radius: 8px;
    color: white !important;
  }
  
  .quote:hover{
    background-color: white !important;
    color: #ff6600 !important;
  }
}

@media only screen and (max-width: 1216px)  {
  .skils-icons>img{
    padding: 25px;
  }
}

@media only screen and (max-width: 992px) {
   #navbarSupportedContent{
    background: #0003;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  nav{
    background: #0003;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
}

@media only screen and (max-width: 769px) {
  .social-media-logo {
    width: 50% !important;
  }

  .skils-icons>img{
    padding: 10px;
  }
}