@import url('https://fonts.googleapis.com/css2?family=Poppins&family=Roboto&display=swap');


/*font*/

body {
	font-family: 'Roboto', sans-serif;
}

h2 {
	font-family: 'Poppins', sans-serif;
}

/*navbar*/
nav.bg-me{
  backdrop-filter: blur(8px);
  background-color : rgba(245,245,245,.5);
  border-bottom: 2px solid rgba(255,255,255,.15);
  box-shadow: 0 0 3px rgba(0,0,0,.2)
}

nav button.navbar-toggler {
  border-radius: 0;
  border: 0;
}

.navbar-brand strong{
  color: #555;
}

nav .nav-link:hover {
  background-color: rgba(245,245,245,.1);
}

/*jumbotron*/
div.jumbotron {
	background-image: url('https://i.postimg.cc/2jPJXY6m/background.png');
	background-repeat: repeat;
	margin-bottom: 0;
	padding-bottom: 88px;
	padding-top: 98px;
	background-attachment: fixed;
}

.jumbotron h1 {
	font-family: 'Poppins', sans-serif;
	font-size: 2.9em;
}

.jumbotron img {
	width: 160px;
	margin-top: 36px;
  margin-bottom: 24px;
}


/*about*/
.about {
	background-color: #4f65ea;
	padding: 58px 0 86px;
}

.about h2 {
	color: rgba(255,255,255,.95);
}

.container hr {
	width: 120px;
	margin-top: 0;
}

.about .text-about {
	margin-top: 24px;
	color: rgba(255,255,255,.88);
}

.container .garis1 {
	border-top: 2px solid rgba(255,255,255,.88);
}

/*portfolio*/
.portfolio {
	padding: 78px 0 100px;
}

.portfolio .col-sm-12 {
	margin-bottom: 24px;
}

.portfolio h2 {
	color: #666;
}

.container .garis2 {
	border-top: 2px solid rgba(0,0,0,.38);
}

.portfolio .card {
	padding: 0;
	border: 0 solid #fff;
  border-radius: 0;
  margin-top: 16px;
  opacity: 0.95;
  transition: .3s;
}

.portfolio .card img {
  border-radius: 0;
}

.portfolio .card:hover {
  opacity: 1;
}

/*contact*/
.contact h2 {
	color: #444;
}

.contact {
	background-color: #eee;
	padding: 72px 0 100px;
}

.container .garis3 {
	border-top: 2px solid rgba(0,0,0,.4);
	margin-bottom: 28px;
}

.contact label {
	margin-left: 4px;
	font-weight: 200;
	color: #555;
}

.contact input,
.contact textarea,
.contact button {
	border-radius: 0;
	border: 0 solid white;
}

.form-control {
  background: rgba(255,255,255,.7);
}

.form-group:target {
  opacity: 0;
}

.contact button {
	background-color: #4f65ea;
	margin-top: 8px;
  transition: .3s;
}

.contact button:hover {
  background-color: magneta;
}

/*footer*/
footer {
	padding: 14px 0;
	background-color: #666;
	color: #fff;
  font-size: 14px;
} 

/* codigo */
h.texto {
  font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  font-size: 92px;
  padding: 80px 50px;
  text-align: center;
  text-transform: uppercase;
  text-rendering: optimizeLegibility;
  
  &.elegantshadow {
    color: #131313;
    background-color: #e7e5e4;
    letter-spacing: .15em;
    text-shadow: 
      1px -1px 0 #767676, 
      -1px 2px 1px #737272, 
      -2px 4px 1px #767474, 
      -3px 6px 1px #787777, 
      -4px 8px 1px #7b7a7a, 
      -5px 10px 1px #7f7d7d, 
      -6px 12px 1px #828181, 
      -7px 14px 1px #868585, 
      -8px 16px 1px #8b8a89, 
      -9px 18px 1px #8f8e8d, 
      -10px 20px 1px #949392, 
      -11px 22px 1px #999897, 
      -12px 24px 1px #9e9c9c, 
      -13px 26px 1px #a3a1a1, 
      -14px 28px 1px #a8a6a6, 
      -15px 30px 1px #adabab, 
      -16px 32px 1px #b2b1b0, 
      -17px 34px 1px #b7b6b5, 
      -18px 36px 1px #bcbbba, 
      -19px 38px 1px #c1bfbf, 
      -20px 40px 1px #c6c4c4, 
      -21px 42px 1px #cbc9c8, 
      -22px 44px 1px #cfcdcd, 
      -23px 46px 1px #d4d2d1, 
      -24px 48px 1px #d8d6d5, 
      -25px 50px 1px #dbdad9, 
      -26px 52px 1px #dfdddc, 
      -27px 54px 1px #e2e0df, 
      -28px 56px 1px #e4e3e2;
  }
}