@import url('https://fonts.googleapis.com/css?family=Roboto:700');

@mixin textShadow($text-shadow) {
    -webkit-text-shadow: $text-shadow;
    -moz-text-shadow: $text-shadow;
    -ms-text-shadow: $text-shadow;
    -o-text-shadow: $text-shadow;
    text-shadow: $text-shadow;
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    list-style-type: none;    
    text-decoration:none;
    font-family:'Poppins';      
}
html{
    overflow-x:hidden !important;
}
body{
    background: rgb(0, 0, 0);
    overflow:hidden;
    position:relative;    
}

/* START NAVBAR */
nav{
    border-bottom: 1px solid white;
}
nav  a {
    color:#fff !important;
}

@media(max-width:768px){    
    .navbar-nav{
        position:absolute;
        top:0%;
        left:29%;
        transform: translate(50%,50%);
    }
    .nav-item{
        margin:21px 30px !important;
    }
    .navbar-collapse {
        position: absolute;    
        right: 100%;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 15px;
        width: 100%;
        height:100vh;
        transition: all 0.4s ease;
        display: block;
        background-color:black;
        border-right:1px solid #fff;
        top:0;
        z-index:20;
    }
    .navbar-collapse.collapsing {    
        margin-left: 50%;
        right: 100%;
        transition: all 0.2s linear;
    }
    .navbar-collapse.show {
        right: 20%;
    }
}

.nav-item{
    position:relative !important;
    margin:0px 30px;
}
.nav-link:before{
    content:'';
    width:0%;
    height:2px !important;    
    background-color:#ff3838 !important;
    position:absolute !important;
    transition:all 0.6s linear !important;
    left:0;
    bottom:0;
}
.nav-link{    
    transition:all 0.5s linear ;
    padding:0 !important;
}
.nav-link:hover:before{
    width:100%;
}
.navbar-brand{
    z-index:30;
}
.navbar-brand > span{
    color:#fff;
    font-family: sans-serif !important;
    font-size: 50px;
    font-weight:800;
    text-shadow: -0.08em 0.03em 0.12em rgb(255 0 0 / 0%);
    -webkit-mask-image: linear-gradient(-75deg, rgb(227 220 220 / 60%) 30%, #0006 50%, rgb(213 13 13) 70%);
    -webkit-mask-size: 200%;
    animation: shine 2s infinite;
}
@-webkit-keyframes shine {
    from {
      -webkit-mask-position: 150%;
    }
    
    to {
      -webkit-mask-position: -50%;
    }
}

.navbar-brand > span:not(:first-child){
    margin-left:-12px;
}

.navbar-toggler{
    position:relative;
    width:45px;
    outline:none;
    border:none;
    z-index:40;
}
.navbar-toggler:focus{
    outline:none;
}
.navbar-toggler > span {
    background-color: #ff3838;
    width:100%;
    display:inline-block;    
    height:4px; 
    position:absolute;
    left:10%;
    outline:none;  
    border:none; 
    transition: .25s linear;
}
.navbar-toggler > span:nth-child(1){
    top: -12px;  
    transform-origin: left center;
}
.navbar-toggler > span:nth-child(2){
    top: 2px;
    transform-origin: left center;
}

.navbar-toggler > span:nth-child(3){
    top: 16px;
    transform-origin: left center;
}
.navbar-toggler.open span:nth-child(1) {
    transform: rotate(45deg);
    top: -12px;
    left: 8px;
}
  
.navbar-toggler.open span:nth-child(2) {
    width: 0%;
    opacity: 0;
}
  
.navbar-toggler.open span:nth-child(3) {
    transform: rotate(-45deg);
    top: 20px;
    left: 8px;
}
/* END NAVBAR */

.my-img{
    border-radius:50%;
    max-height: 400px;
}
@media (max-width:768px){
    .my-img{
        margin-top:20%;
    }
    .img-fluid{
        max-width:80% !important;
    }
}
.mypage{
    margin-top: 5rem !important;
}
.Intro h1  {
    opacity:0.8;
    font-weight:600;
    font-size:50px;
}
@media (max-width:768px){
    .Intro h1  {        
        font-size:45px;
    }
    .mypage{
        margin-top: 0rem !important;
        text-align:center;
    }
    .BtnHello{
        margin-top:3rem;
    }
}
.Intro h3  {
    opacity:0.8;
    font-weight:600;
    font-size:28px;
}
.BtnHello{
    background-color:#ff3838;
    padding: 5px 20px;
    border: none;
    border-radius:30px 33px 30px 0;
    font-size:18px;
    color:#fff;
    font-weight:600;
}
#container {
    color:#999;
    text-transform: uppercase;
    font-size:36px;
    font-weight:bold;    
    width:100%;    
    display:block;
    top:20%;
  }
#flip {
    height:50px;
    overflow:hidden;
  }
  
  #flip > div > div {
    color:#fff;
    padding:0px 12px;
    height:45px;
    margin-bottom:45px;
    display:inline-block;
  }
  
  #flip div:first-child {
    animation: show 10s linear infinite;
  }
  
  #flip div div {
    background:#42c58a;
  }
  #flip div:first-child div {
    background:#4ec7f3;
  }
  #flip div:last-child div {
    background:#DC143C;
  }
  
  @keyframes show {
    0% {margin-top:-270px;}
    5% {margin-top:-180px;}
    33% {margin-top:-180px;}
    38% {margin-top:-90px;}
    66% {margin-top:-90px;}
    71% {margin-top:0px;}
    99.99% {margin-top:0px;}
    100% {margin-top:-270px;}
  }
.facebook{
    border:none;
    transition:0.6s;
    outline:none;
    cursor:pointer;
    background-color:#4b4b4b;
    color:#17c0eb;
    border-radius:10px;
}
.facebook i{
    border:none;
    font-size:20px;
}
.facebook:hover{
    background-color:#4b4b4b;
    color:#17c0eb;
    border-radius:10px;
}
.instagram{
    border:none;
    transition:0.6s;  
    outline:none; 
    cursor:pointer;
    background-color:#4b4b4b;
    border-radius:10px; 
    color:#ff3838;
}
.instagram i{
    border:none;
    font-size:20px;
}
.instagram:hover{
    background-color:#4b4b4b;
    color:#ff3838;
    border-radius:10px;
}
.whatsapp{
    border:none;
    transition:0.6s;
    outline:none;
    cursor:pointer;
    background-color:#4b4b4b;
    border-radius:10px;
    color:#32ff7e;
}
.whatsapp i{
    border:none;
    font-size:20px;
}
.whatsapp:hover{
    background-color:#4b4b4b;
    color:#32ff7e;
    border-radius:10px;
}
.image-border{
    border:13px solid #d8d8d8;
    border-radius:50%;
    width: 400px;
    height:400px; 
    background:url('../images/uv.jpg');
    background-repeat: no-repeat;
    background-size: contain, cover;
    margin:auto;
}

/* START ABOUT*/

.About{
    margin-top: 5rem!important;
}
.cartoon-img{
    width:455px !important;
}
.About h1,h2,h3 , p{
   opacity:0.8;
}
.About > div > div > ul > li {
    display:inline-block;
    padding: 0px 10px;
    border: 1px solid #ff3838 !important;
    border-radius: 10px;
    margin-top: 5px;
}

.CV{
    border:none;
    padding:10px 20px;
    background-color: #ff3838;
    border-radius:10px;
    color:#fff;
    cursor:pointer;
}
.fa-bullseye{
    color:#9774fa;
    font-size:30px;
}
.fa-code{
    color:#ed7256;
    font-size:30px;
}
.fa-object-ungroup{
    color:#2796e2;
    font-size:30px;
}

/* END ABOUT*/

/* START SKILLS*/
 .Skills{
    margin-top: 5rem !important;
 }
 .Skills h1{
    opacity:0.8;
 } 
/* END SKILLS*/



/* START footer */

.footer{
    color:#fff;
    border-top:1px solid #fff;
}
/* END footer */

/* START BACK TO TOP BUTTON */
#backbutton {
    display: inline-block;
    background-color: #ff3838;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 4px;
    position: fixed;
    bottom: 50px;
    right: 30px;
    transition: background-color .3s
    opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
}
#backbutton::after {
    content: "\f077";
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    font-size: 2em;
    line-height: 50px;
    color: #fff;
}
#backbutton:hover {
    cursor: pointer;
    background-color: #ff3838;
}
#backbutton:active {
    background-color: #ff3838;
}
#backbutton.show {
    opacity: 1;
    visibility: visible;
}
.unscrollHtml{
    overflow-x:hidden;
    overflow-y:hidden;
}

/*  END BACK TO TOP BUTTON */