/* Core Styles */

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: #666;
    color: #fff;
    font-size: 1.1em;
    line-height: 1.5;
    text-align: center;
  }
  
  img {
    display: block;
    width: 100%;
    height: auto;
  }
  
  h1,
  h2,
  h3 {
    font-family: 'Raleway', Helvetica, Arial, sans-serif; 
    margin: 0;
    padding: 1em 0;
  }
  
  p {
    margin: 0;
    padding: 1em;
  }
  
  .btn-top {
    display: inline-block;
    color: #2690d4;
    text-decoration: none;
    padding: 0em 1em;
    border: 1px solid #666;
    margin: 3.5em 0;
  }
  
  .btn-top:hover {
    background: #eaeaea;
    color: #333;
    opacity: 0.3;
  }
  
  /* Header Showcase */

  #showcase {
    height: 100vh;
    min-height: 450px;
    color: #fff;
    text-align: center;
    background-color: #ecffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='623' height='519.2' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.11'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/svg%3E");
  }
  
  #showcase h1 {
    padding-top: 250px;
    padding-bottom: 0;
    font-size: 7vw;
    color: black;
  }
  
  #showcase h2 {
    font-size: 4vw;
    padding: 0;
    color: #2690d4;
  }
  #showcase .content-wrap,
  #introduce .content-wrap {
    padding: 2em 1.5em;
  }

/* Navbar */

  nav {
    text-decoration: none;
  }
  nav li {
    display: inline-block;
  }  

.sidenav {
  font-family: 'Raleway', Helvetica, Arial, sans-serif; 
  text-align: center;
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  background-color: #eaeaea;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 15px;
}

.sidenav a {
  text-decoration: none;
  font-size: 18px;
  color: #555;
  display: block;
  transition: 0.3s;
  padding: 30px;
 }

 .sidenav a:nth-child(2) {
   margin-top: 50px;
 }
 
 .sidenav a:hover,
 .offcanvas a:focus {
  color: #2690d4;
 }
 
 .closebtn {
  position: absolute;
  top: -20px;
  right: 15px;
  font-size: 60px !important;
  margin-left: 50px;
 }

nav span {
  z-index: 1;
  position: fixed;
  top: 30px;
  left: 30px;
  text-shadow: -1px 0 black, 0 2px black, 1px 0 black, 0 -1px black;
}

nav span:hover {
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

/* introduce */

#introduce {
  background: white;
  color: #333;
  padding-bottom: 2em;
}

#introduce h2 {
  margin-top: 20px; 
}

#introduce p {
  color: #666;
  word-break: keep-all;
  font-size: 22px;
}

/* hero__scroll  */
.hero__scroll {
  position: relative;
  bottom: 0;
  width: 200px;
  margin: auto;
  display: block;
  /* cursor: pointer; */
  padding-bottom: 40px;
  left: 0;
  right: 0;
  text-transform: uppercase; }
  .hero__scroll .chevron {
    margin-top: 20px;
    display: block;
    -webkit-animation: pulse 2s infinite;
            animation: pulse 2s infinite;
    color: #2690d4; }

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  50% {
    -webkit-transform: translate(0, 10px);
            transform: translate(0, 10px); }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); } }

@keyframes pulse {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  50% {
    -webkit-transform: translate(0, 10px);
            transform: translate(0, 10px); }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); } }

.chevron::before {
    border-style: solid;
    border-width: 0.25em 0.25em 0 0;
    content: '';
    display: inline-block;
    height: 20px;
    position: relative;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    vertical-align: top;
    width: 20px;
}

.chevron.bottom:before {
  top: 0;
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
}

/* Portfolio */

#portfolio {
  padding: 2em 1em 1em;
}


#portfolio ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

#portfolio ul li {
  max-width: 350px;
  margin-bottom: 2em;
  background: #fff;
  color: #333;
}

#portfolio ul li .card .thumbnail {
  position: relative;
  display: inline-block;
}

#portfolio ul li .card .thumbnail:hover img {
  opacity: .3;
  transition: opacity 1s;
}

#portfolio ul li .card .thumbnail:hover .basicBox {
  display: block;
}

#portfolio .card .card-content {
  padding: 1.5em;
  padding-top: 4%;
  padding-bottom: 3%;
}

#portfolio .card .card-content h3 {
  padding: 0;
  padding-bottom: 10px;   
}

#portfolio .card-content p {
  font-size: 13px;
  padding: 0;
}

#portfolio .card-content a {
  width: 100px;
  text-decoration: none;
  color: white;
  display: inline-block;
  font-size: 14px;
  border: 1px solid #2690d4;
  background-color: #2690d4;
}

#portfolio .card-content a:hover {
  color: #2690d4;
  background-color: white;
}

/* portfolio-button */

#portfolio .card .basicBox {
  position: absolute;
  display: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 130px;
  height: 65px;
  color: #4274D3;
  font-size: 1.15rem;
  line-height: 65px;
  text-align: center;
}

.basicBox a {
  text-decoration: none;
}

svg {
  position: absolute;
  top: 0;
  left: 0;
}
svg rect, svg path, svg polyline {
  fill: none;
  stroke: #4274D3;
  stroke-width: 1;
}

.basicBox:hover svg rect {
  stroke: #4274D3;
}

svg rect {
  stroke-dasharray: 400, 0;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  -ms-transition: all 0.8s ease-in-out;
  -o-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}

.basicBox:hover svg rect {
  stroke-width: 3;
  stroke-dasharray: 35, 245;
  stroke-dashoffset: 38;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  -ms-transition: all 0.8s ease-in-out;
  -o-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}

  /* Work Process */
  
  #work-process {
    background-color: white;
    color: #333;
    padding: 2em;
  }

  #work-process ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  #work-process ul li {
    flex-direction: column;
    list-style: none;
    width: 220px;
    margin-bottom: 1em;
  }

  #work-process ul li .card img{
    width: 120px;
    margin: 0 auto;
  }
  
/* Skill */

.title-skill {
  color:black;
}

#skill {
  padding: 2em 1em 1em;
  background: url(../img/coding.jpeg);
    background-size: cover;
    background-attachment: fixed;
 
}

#skill ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 0;
  padding: 0;
}

#skill ul li {
  flex-direction: column;
  list-style: none;
  width: 220px;
  margin-bottom: 1em;
  background-color: white;
  background: linear-gradient(135deg, transparent 30px, white 0);
  color: #333;
}

/* element move up */

#skill li {
  position: relative;
  top:0;
  transition: top ease 0.5s;
}

#skill li:hover {
  top: -10px;
}

#skill .card-title {
  color: #2690d4;
}

/* Contact / Boxes */

#contact {
  display: flex;
  flex-wrap: wrap;
}

#contact .box {
  flex-grow: 1;
  padding: 2em;
  color: #fff;
}

#contact .box:first-child {
  background: #2690d4;
}

#contact .box:last-child {
  background: white;
  color: #666
}

/* Footer */

#main-footer {
  padding: 2em;
  background: #666;
  color: #fff;
  text-align: center;
}

#main-footer a {
  color: #2690d4;
  text-decoration: none;
}

/* Media Queries */

@media (min-width: 410px) and (max-width: 699px) {
  #portfolio ul {
    width: 350px;
    padding: 0;
    margin: 0 auto;
  }
} 


@media (min-width: 700px) {

  .grid {
    display: grid;
    grid-template-columns: 1fr repeat(2, minmax(auto, 25em)) 1fr;
    grid-row-gap: 2em;
  }

  #introduce .content_text {
    columns: 2;
    column-gap: 2em;
  }

  #introduce .content_text p {
    padding-top: 0;
    text-align: left;
  }

  .content_wrap,
  #portfolio ul {
    grid-column: 2/4;
  }

  .box,
  #main-footer div {
    grid-column: span 2;
  }

  #portfolio ul {
    display: flex;
    justify-content: space-evenly;
  }

  #portfolio li {
    width: 300px;
  }

  #skill ul {
    margin-left: 10%;
    margin-right: 10%;
  }

  #skill ul li {
    width: 45%;
  }

  /* SideNav */
  .sidenav {
    padding-top: 60px;
    }
    .sidenav a {
    font-size: 30px;
    }
}

  
@media (min-width: 900px) {
  #introduce {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  #introduce h2 {
    padding-bottom: 100px;
  }

  #introduce .content_text p {
    text-align: left;
  }

  #work-process ul li {
    width: 23%;
  }

  #skill ul {
    margin-left: 10%;
    margin-right: 10%;
  }

  #skill ul li {
    width: 458px;
  }

  .sidenav a:nth-child(2) {
    margin-top: 20px;
  }

  .closebtn {
    right: 15px;
    font-size: 60px;
  }

  .title-portfolio {
    margin-top: 3%;
  }
}


@media (min-width: 1600px) {
  #introduce .content_text p {
    text-align: left;
  }
  #showcase h1 {
    font-size: 5vw;
  }

  #portfolio {
    padding-bottom: 100px;
  }

  #work-process {
    height: 400px;
  }

  #work-process .content_wrap {
    padding-top: 20px;
  }

  #work-process ul {
    padding-top: 40px;
  }

  #skill {
    height: 630px;
  }
}

@media (min-width: 1769px) {
  #skill {
    height: 530px;
  }
}