*{
  margin:0;
  padding:0;
}

body, html {
  font-family: "Raleway", 'sans-serif';
  background: linear-gradient(to right, black 0%, teal 100%);
}

li {
  font-size: 0.6em;
  font-weight: 500;
  list-style-type:none;
}

section h1{
  font-size: 2em;
  text-align:center;
  font-weight: 600;
  color:white;
  padding-top:5vh;
  font-family:'Roboto Slab', serif;
  padding-bottom:40px;
  padding-top:30px;
}
section h2{
  font-size: 2em;
  text-align:center;
  font-weight: 600;
  color:white;
  padding-top:30px;
  font-family: 'Spirax', cursive;
  padding-bottom:10px;
  line-height: 1.2;
}

p {
  color:white;
  text-align:center;
  font-family: 'Sunflower', sans-serif;
  font-weight:300;
  font-size:1.1em;
  padding-bottom:20px
}

a {
  color: #7cf4ed;
  text-decoration: underline;
}
a:hover{
  color:#d7ff16;
}

button {
  padding: 10px;
  background: #0a5757;
  border-radius: 10px;
}
#title{
  text-align: center;
  width: 100%;
  top: 20vh;
  color: white;
  font-size: 4em;
  position: fixed;
  z-index: 10;
  font-weight: 300;
  text-transform: none;
  font-family:'Berkshire Swash', cursive;
}
#triangle-up {
  width: 0;
  height: 0;
  border-left: 100vw solid transparent;
  /*border-right: 0 solid transparent;*/
  border-bottom: 100vh solid #35495e;
  transition: 2s ease-in-out;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
}

#triangle-down {
  width: 0;
  height: 0;
  border-left: 0px solid transparent;
  border-right: 100vw solid transparent;
  border-top: 100vh solid #35495e;
  transition: 2s ease-in-out;
  float: left;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
}

#button,
#menu {
  position: fixed;
  z-index: 2;
  opacity: 1;
  width: 11vh;
  height: 11vh;
  bottom: 100px;
  left: calc(50% - 5.5vh);
  background-color: #d3562d;
  border: none;
  border-radius: 50%;
  font-family: 'Nanum Myeongjo', serif;
  color: white;
  font-size: 1em;
  transition: .5s ease-in-out;
  cursor: pointer;
  -webkit-box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.5);
}

#button:focus,
#menu:focus {
  outline: 0;
}

#button:hover {
  transform: scale(1.2);
}

#button:active {
  transform: scale(1.1);
}

#menuContent {
  position: fixed;
  width: 100%;
  height: 100%;
  display: none;
  text-align: center;
  z-index: 3;
  opacity: 0.95;

}

#menuContent ul, #menuContent a {
  font-family: 'Roboto Slab', serif;
  font-size: 2em;
  font-weight: 300;
  height: 100%;
  color: white;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  justify-content: center;
  text-decoration:none;
  transition:.2s ease-in-out;
}

#menuContent a:hover{
  opacity:0.8;
  transition:.2s ease-in-out;
}

#menuContent li {
  margin-bottom: 20px;
  animation: itemsInefade 2s forwards;
  opacity: 0;
}

@keyframes itemsInefade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#menuContent li:nth-child(2) {
  animation-delay: .2s
}
#menuContent li:nth-child(3) {
  animation-delay: .4s
}
#menuContent li:nth-child(4) {
  animation-delay: .6s
}

#menuContent #menuClose {
  position: absolute;
  top: 20px;
  right: 70px;
  color: white;
  font-size:2em;
  transition:.2s ease-in-out;
  cursor: pointer;


}

#menuContent #menuClose:hover{
  opacity:0.8;
  transition:.2s ease-in-out;
}

.krassInefade {
  transform: perspective(900px) translateZ(0px);
  opacity: 1;
  transition: 2s ease-out;
}

#triangle-down.usenand {
  border-left: 0 solid transparent;
  border-right: 0 solid transparent;
  border-top: 100vh solid #1abc9c;
  transition: 2s ease-in-out;
}

#triangle-up.usenand {
  border-left: 0 solid transparent;
  border-right: 0 solid transparent;
  border-bottom: 100vh solid #16a085;
  transition: 2s ease-in-out;
}

#menu.toMenu {
  left: 80px;
  bottom: 80px;
  background-color: #d3562d;
  opacity: 1;
  width: 11vh;
  height: 11vh;
  transition: 2s ease-in-out;
  border: 0 solid white;
  border-radius: 50%;
  font-size:2rem;
}

#menu.menuTransition {
  width: 100%;
  height: 100%;
  opacity: 0.95;
  border-radius: 0;
  bottom: 0;
  left: 0;
  transition: .5s ease-in-out;
}

section{
  padding-bottom:15vh;
}

.section0{
  background-color: #031412;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg fill-opacity='0.09'%3E%3Cpath fill='%230d5c52' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23126d62' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23187f71' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%231d9081' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%2322A190' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23439880' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23638f6f' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%2384865f' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23a47d4e' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23C5743E' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: cover;

}

.section1{
  background-color:#0B6A64;
  min-height:100vh;

}
.section2{
  background:linear-gradient(to right, black 0%, #0d4446 100%);
  min-height:100vh;

}
.section3{
  background-color:#132d2b;
  min-height:100vh;

}
.section4{
  background: linear-gradient(to right, black 0%, teal 100%);
  min-height:100vh;

}
.rsvp{
  background-color:#16a085;
  min-height:100vh;

}

.credit{
  background-color:#34495e;
  min-height:100vh;

}


.content {
  width:80%;
  margin:auto;
  line-height:1.8em;
  min-height:100vh !important;
  padding: 0px;
}

.subtitle {
  font-size:0.7em}
/*Mobile style*/

@media only screen and (max-width: 414px) {
  p {
    font-size:1.2em;

  }

  .content {
    width:80%;
    margin:auto;
    line-height:1.8em;
    height:auto;
    padding: 0px;
  }

  #title{
    text-align: center;
    width: 100%;
    top: 20vh;
    color: #6FFDA9;
    font-size: 2.5em;
  }


  .contribute {
    display:block !important;
    margin:auto;
    width:10% ;
  }dis
}

/*End of mobile*/
.google-map {
  position: relative;
  padding-bottom: 75%; /* This is the aspect ratio*/
  height: 0;
  overflow: hidden;
}
.google-map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

.contribute {
  display:inline-block;
  position:relative;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

/*Instagramfeed*/

.instaimg img {margin-bottom:30px;}
.instaimg img:hover {
  opacity:0.8;
  -moz-opacity:0.8;
  -webkit-opacity:0.8;
}

/*Jucier embed*/

.j-message p{
  color:black !important;
}

.juicer-feed {
  z-index:1 !important;

}

.paypal a{

  border: 1px solid white;
  padding:10px;
  color:white;
  background:teal;
  box-shadow: 0px 1px 10px 1px var(--box-shadow-color);
  --box-shadow-color: black;
  text-decoration:none;
}

.paypal a:hover{

  border: 1px solid white;
  padding:10px;
  color:black;
  background:grey;
  box-shadow: 0px 1px 10px 1px;
  text-decoration:none;
}
.wayang {
  display:block;
  margin:auto;
  filter: drop-shadow(1px 5px 4px);

}

.section4 {
  width:100% !important;

}

.video-container
{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
}
.video-container iframe{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*Skills*/



.wrapper {
  margin: 0 auto;
  width: 90%;
  margin-top: 15px;
}

.bar {
  position: relative;
  width: 100%;
  height: auto;
  background: rgba(255, 255, 255, 0.1);
  margin-bottom: 1.5rem;
  border-radius: 5px;
}
.bar .bar-info {
  border-radius: 5px;
  padding: 0.75rem;
  background: #255B5C;
  color: white;
  width: 10%;
  position: relative;
  height: auto;
  transition: width 3.3s ease-in-out;
}
.bar .bar-info .percent {
  float: right;
}
.bar .bar-info.web {
  background:  #fd7473;
}
.bar .bar-info.graphic {
  background: #35495e;
}
.bar .bar-info.cms {
  background: #005568;
}
.bar .bar-info.photography {
  background:#2c3e50;
}
.bar .bar-info.others {
  background: #2A2A2A;
}

}

/*Social Media icons -  by Torleif Halseth (https://codepen.io/thalseth/pen/saqIj)
*/

$social-color-pallete: (
facebook: teal,
tumblr: #32506d,
linkedin: #007bb6,
twitter: #00aced,
google-plus: #dd4b39,
reddit: #8bbbe3,
youtube: #df1c31,
pinterest: #b81621,
github: #444,
envelope: #333,
soundcloud: #f50
);

$social-default-icon-color: #fff;
$social-default-btn-color: #666;
$social-icon-size: 60px;
$social-icon-border: 2px;
$social-icon-border-radius: 5px;

$brand-color: #006FC2;

.icon-link {
  width: 60px;
  height: 60px;
  background-color: #666;
  line-height: 60px;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
  cursor: pointer;
  outline: none;
  margin: 5px;
  box-sizing: content-box;
}
.icon-link.fill.facebook {
  background-color: #3b5998;
}
.icon-link.fill.facebook:hover {
  background-color: #fff;
}
.icon-link.fill.facebook:hover .fa-facebook {
  color: #3b5998;
  transition: color 150ms ease-in-out;
}
.icon-link.fill.tumblr {
  background-color: #32506d;
}
.icon-link.fill.tumblr:hover {
  background-color: #fff;
}
.icon-link.fill.tumblr:hover .fa-tumblr {
  color: #32506d;
  transition: color 150ms ease-in-out;
}
.icon-link.fill.linkedin {
  background-color: #007bb6;
}
.icon-link.fill.linkedin:hover {
  background-color: #fff;
}
.icon-link.fill.linkedin:hover .fa-linkedin {
  color: #007bb6;
  transition: color 150ms ease-in-out;
}
.icon-link.fill.twitter {
  background-color: #00aced;
}
.icon-link.fill.twitter:hover {
  background-color: #fff;
}
.icon-link.fill.twitter:hover .fa-twitter {
  color: #00aced;
  transition: color 150ms ease-in-out;
}
.icon-link.fill.google-plus {
  background-color: #dd4b39;
}
.icon-link.fill.google-plus:hover {
  background-color: #fff;
}
.icon-link.fill.google-plus:hover .fa-google-plus {
  color: #dd4b39;
  transition: color 150ms ease-in-out;
}
.icon-link.fill.reddit {
  background-color: #8bbbe3;
}
.icon-link.fill.reddit:hover {
  background-color: #fff;
}
.icon-link.fill.reddit:hover .fa-reddit {
  color: #8bbbe3;
  transition: color 150ms ease-in-out;
}
.icon-link.fill.youtube {
  background-color: #df1c31;
}
.icon-link.fill.youtube:hover {
  background-color: #fff;
}
.icon-link.fill.youtube:hover .fa-youtube {
  color: #df1c31;
  transition: color 150ms ease-in-out;
}
.icon-link.fill.pinterest {
  background-color: #b81621;
}
.icon-link.fill.pinterest:hover {
  background-color: #fff;
}
.icon-link.fill.pinterest:hover .fa-pinterest {
  color: #b81621;
  transition: color 150ms ease-in-out;
}
.icon-link.fill.github {
  background-color: black;
}
.icon-link.fill.github:hover {
  background-color: white;
}
.icon-link.fill.github:hover .fa-github {
  color: #444;
  transition: color 150ms ease-in-out;
}
.icon-link.fill.envelope {
  background-color: #333;
}
.icon-link.fill.envelope:hover {
  background-color: #fff;
}
.icon-link.fill.envelope:hover .fa-envelope {
  color: #333;
  transition: color 150ms ease-in-out;
}
.icon-link.fill.soundcloud {
  background-color: #f50;
}
.icon-link.fill.soundcloud:hover {
  background-color: #fff;
}
.icon-link.fill.soundcloud:hover .fa-soundcloud {
  color: #f50;
  transition: color 150ms ease-in-out;
}
.icon-link.brand {
  background-color: transparent ;
}
.icon-link.brand .fa {
  color: #fff;
}
.icon-link.round {
  border-radius: 50%;
}
.icon-link.round-corner {
  border-radius: 5px;
}
.icon-link:hover {
  transition: background-color 150ms ease-in-out;
  background-color: transparent;
}
.icon-link:hover.facebook {
  border: 2px solid transparent;
}
.icon-link:hover.tumblr {
  border: 2px solid #32506d;
}
.icon-link:hover.linkedin {
  border: 2px solid #007bb6;
}
.icon-link:hover.twitter {
  border: 2px solid #00aced;
}
.icon-link:hover.google-plus {
  border: 2px solid #dd4b39;
}
.icon-link:hover.reddit {
  border: 2px solid #8bbbe3;
}
.icon-link:hover.youtube {
  border: 2px solid #df1c31;
}
.icon-link:hover.pinterest {
  border: 2px solid #b81621;
}
.icon-link:hover.github {
  border: 2px solid transparent;
}
.icon-link:hover.envelope {
  border: 2px solid #333;
}
.icon-link:hover.soundcloud {
  border: 2px solid #f50;
}
.icon-link:hover .fa {
  line-height: 56px;
}
.icon-link:hover .fa-facebook {
  color: #3b5998;
  transition: color 150ms ease-in-out;
}
.icon-link:hover .fa-tumblr {
  color: #32506d;
  transition: color 150ms ease-in-out;
}
.icon-link:hover .fa-linkedin {
  color: #007bb6;
  transition: color 150ms ease-in-out;
}
.icon-link:hover .fa-twitter {
  color: #00aced;
  transition: color 150ms ease-in-out;
}
.icon-link:hover .fa-google-plus {
  color: #dd4b39;
  transition: color 150ms ease-in-out;
}
.icon-link:hover .fa-reddit {
  color: #8bbbe3;
  transition: color 150ms ease-in-out;
}
.icon-link:hover .fa-youtube {
  color: #df1c31;
  transition: color 150ms ease-in-out;
}
.icon-link:hover .fa-pinterest {
  color: #b81621;
  transition: color 150ms ease-in-out;
}
.icon-link:hover .fa-github {
  color: #444;
  transition: color 150ms ease-in-out;
}
.icon-link:hover .fa-envelope {
  color: #333;
  transition: color 150ms ease-in-out;
}
.icon-link:hover .fa-soundcloud {
  color: #f50;
  transition: color 150ms ease-in-out;
}
.icon-link .fa {
  color: #fff;
  line-height: 60px;
  font-size: 50px;
  padding:30px;
}

.brand-icons {
  background-color: #ddd;
  padding: 10px 0;
}

.about-irawan {
  column-gap: 50px;
  padding: 0px;

}

.irawan {
  border-radius: 50%;
  height: 200px;
  width:200px;
  float: left;
  shape-outside: inset(1% round 50%);
  margin-left: 20px;
  margin-bottom: 10px;
}

/* Stars */

.section1 {
  background: linear-gradient(to right, black 0%, teal 100%);
}

#sky {
  width: 100vw;
  height: 100vh;
  position: fixed;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

#shootingstars {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  position: fixed;
  overflow: hidden;
  transform: translatex(calc(50vw - 50%)) translatey(calc(50vh - 50%))
  rotate(120deg);
}

.wish {
  height: 2px;
  top: 300px;
  width: 100px;
  margin: 0;
  opacity: 0;
  padding: 0;
  background-color: white;
  position: absolute;
  background: linear-gradient(-45deg, white, rgba(0, 0, 255, 0));
  filter: drop-shadow(0 0 6px white);
  overflow: hidden;
}