/*--------------- basic styling --------------- */
html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      font-family: "Roboto Mono" !important;
      background: #E9D47B !important;
      color: #FF90A8 !important;
}




/*--------------- content --------------- */
#me1{
      padding-left: 300px;
}
.col-lg-4 h6{
      padding-left:450px; 
      padding-top: 5px;

}
.col-lg-4 h6 a{
     color: #FF90A8;
      text-align: center;
}
.container{
      height: 100%;;
}

.col-lg-8 img{
      width: 300px;
}
.desc{
      float: right;
      text-align: center;
      position: justify;
      padding-top: 100px;
      padding-right:100px ;

}
.col-lg-4 h6{
      font-size: 25px;
      text-align: center;
      margin-bottom: 20px;
}
.col-lg-4 p{
      margin-left: 10px;
}
.col-lg-12 h1{
      font-size: 30px;
      margin-bottom: 100px;
      margin-top: 10px;

}
#lang{
      padding-left: 45px;
}
#me{
      
      margin-bottom: 100px;
      margin-left: 50px;
       margin-right: 50px
}
/*--------------- typewriter effect --------------- */
.line {
      width: 24em;
      top: 50%;
      margin: auto;
      border-right: 2px solid rgba(255, 255, 255, 0.75);
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      transform: translateY(-50%);
}

.anim-typewriter {
      animation: typewriter 4s steps(40) 1s 1 normal both,
      blinkTextCussor 500ms steps(40) infinite normal;
}

@keyframes typewriter {
      from {
            width: 0;
      }
      to {
            width: 18em;
      }
}

@media(max-width: 768px) {
      @keyframes typewriter {
            from {
                  width: 0;
            }
            to {
                  width: 10em;
            }
      }
}

@keyframes blinkTextCussor {
      from {
            border-right-color: rgba(255, 255, 255, 0.75);
      }
      to {
            border-right-color: transparent;
      }
}
/*------------------ footer contact --------------*/
.footer{
      padding-top: 50px;
}
#personal h4 a:hover{
      color: #FF90A8;

}
#personal h4 a{
      color: #fff;

}
#address h4 a:hover{
      color: #FF90A8;
   
}
#address h4 a{
      color: #fff;
}

#media ul li {
      color: #fff;      
}
#media ul li a{
      color: #fff;      
}
#media ul li a:hover{
      color: #FF90A8;
}
/*--------------- navigation --------------- */
nav {
      width: 100%;
      background: rgb(34, 33, 32);
      height: 80px;
      position: fixed;
      z-index: 1;
}

nav #brand {
      float: left;
      display: block;
      margin-left: 82px;
      line-height: 80px;
      font-weight: bold;
}

nav #brand a {
      color: #FF90A8;
      transition: all 0.3s ease-out;
}

nav #brand a:hover {
      text-decoration: none;
}

nav #menu {
      float: left;
      right: 80px;
      position: fixed;
}

nav #menu li {
      padding-left: 40px;
      display: inline-block;
      cursor: pointer;
      font-weight: 300;
      line-height: 80px;
      position: relative;
      transition: all 0.3s ease-out;
}

nav #menu li span {
      font-weight: 700;
}

nav #menu li a {
      color: #FF90A8;
}

nav #menu li a:hover {
      text-decoration: none;
      font-size:150%;
}

#toggle {
      position: absolute;
      right: 20px;
      font-weight: 300px;
      z-index: 2;
      width: 30px;
      height: 30px;
      cursor: pointer;
      float: right;
      transition: all 0.3s ease-out;
      opacity: 100;
      display: none;
}

.close-btn {
      position: absolute;
      right: 16px;
      font-weight: 300;
      z-index: 2;
      cursor: pointer;
      top: -2px;
      line-height: 80px;
}

#resize {
      z-index: 1;
      top: 0px;
      position: fixed;
      background: #0f0f0f;
      width: 100%;
      height: 100%;
      visibility: hidden;
      opacity: 0;
      transition: all 1s ease-out;
}

#resize #menu {
      height: 90px;
      position: absolute;
      left: 45%;
      transform: translateX(-40%);
      text-align: center;
      display: table-cell;
      vertical-align: center;
}

#resize #menu li {
      display: block;
      text-align: center;
      padding: 10px 0;
      font-size: 50px;
      min-height: 50px;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.3s ease-out;
}

#resize li:nth-child(1) {
      margin-top: 140px;
}

#resize #menu li a {
      color: #fff;
}

#resize #menu li a:hover {
      text-decoration: none;
}

#resize.active {
      visibility: visible;
      opacity: 1;
}

/*--------------- responsive --------------- */
@media (max-width: 768px){

      #resize #menu li a:hover{
            font-size: 70%;
      }
      #resize #menu li a{
            font-size: 28px;
      }
      #toggle {
            position: absolute;
            right: 40px;
            font-weight: 300px;
            z-index: 2;
            width: 50px;
            height: 10px;
            cursor: pointer;
            float: right;
            padding-top: 30px;
            transition: all 0.3s ease-out;
            opacity: 100;
            display: inline;
      }

      nav {
            width: 100%;
            background: rgb(34, 33, 32);
            height: 80px;
            position: fixed;
            z-index: 1;
      }
      
      nav #brand {
            float: left;
            display: none;
            margin-left: 10px;
            padding-right: 10px;
            line-height: 80px;
            font-weight: bold;
      }
      nav #menu {
            float: left;
            right: 80px;
            position: fixed;
      }
      nav #menu li {
            
            font-size: 12px;
            padding-left: 6px;
            display: inline-block;
            cursor: pointer;
            font-weight: 400;
            line-height: 80px;
            position: relative;
            transition: all 0.3s ease-out;
            display: none;
            
            
      }
      .header h1{
           font-size: 30px; 
      }
      .desc{
            width: fit-content;
            float: right;
            text-align: center;
            position: justify;
      
            padding-top: 50px;
            padding-right:100px ;
      
      }
      .col-lg-8 img{
            width: 260px;
      }
      #media{
            position: absolute;
            display: block;
            padding-top: 200px;
      }
      #personal {
            position: absolute; 
            padding-top:100px ;
     }
     .footer{
           position: absolute;
           width: auto;
           padding-top: 400px;
     }
     .col-lg-4 h6{
      padding-left:50px; 
      padding-top: 5px;
      }
      #me1{
            padding-left: 0px;
      }

}