@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root{
  --hactive-color:rgb(255, 251, 192);
  --hl-color:rgb(255, 7, 110);
  --hl2-color:rgb(172, 26, 87);
  --orange-color:rgb(255, 77, 7);
  --orange2-color:rgb(185, 67, 20);
  --green-color:rgb(0, 189, 63);
  --green2-color:rgb(14, 122, 50);
  --light-color: #e5e9eb;
  --dark-color: #212529;
  --gray-400: #ced4da;
  --test-br: 1px solid red;
  --gray-700: #495057;
  --cornmilk: hsl(48, 100%, 93.137%);
}
/*--------------HTML element--------------*/
  body{ 
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url("https://vandupio.github.io/cv/image/metal.jpg")!important;
    background-repeat: no-repeat;
    background-attachment: fixed;
  /*url("https://i.ibb.co/qF6dbHk/metal.jpg")!important; background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));*/
    justify-content: center;
    font-family: "Nunito Sans";
    font-weight: 400;
    color: rgb(255, 7, 110,.1);
    }
  a:link, a:visited ,a:active
    {
      text-decoration: none;
      color:var(--hl-color) ;
    }
  a:hover
    {
      color:var(--hactive-color) ;
    }
  ul
    {list-style-type: none;}
  li 
    {
      padding-top: 1.2rem;
      b{
        color: var(--hl-color);}
      }
    img.img-cir{
          height: 200px;
          width: auto;
          border-radius: 50%;
          border: 5px solid var(--light-color);
    }
  footer{ 
      margin-top: 180px;
      font-family: "Nunito Sans";
      color: var(--light-color);
      width: 100vw;
      .cont-li{ 
          display:flex; 
          align-items:center; 
          justify-content: left;
          .icon-li {
              display:flex; 
              justify-content: center;
              padding: 2rem;
              width: 1.8rem;
            }
          .text-li
            {
              width: 100%;
              padding-left: 10px;
            }
        }
      .fa{
          color:rgb(255, 7, 110);
          font-size: 2rem;
        }
        
    }
/*--------------HTML element--------------*/
/*--------------bootrap element--------------*/
  .mobile{
    display: none;
    visibility: hidden;
  }

    .jumbotron 
    {
      color: var(--hl-color);
      height: 50rem;
      text-transform: uppercase;
      font-size: 10rem;
      font-weight: 700;
      text-shadow: 5px 5px 15px rgba(0,0,0,0.8);
      display: flex;
      justify-content: center;
      align-items: center;
      .jcont{text-align: center;}
        span{
          color: transparent;
          background-color:var(--hl2-color);
          background-clip: text;
          text-shadow: 0px 2px 3px var(--hl-color);
        }img{
          height: 200px;
          width: auto;
          border-radius: 50%;
          border: 5px solid var(--light-color);
        }
    }
    .container{
      justify-content: center;
    }  
/*--------------bootrap element--------------*/
/*--------------font--------------
  .nunito-sans-sysfont {
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
    font-variation-settings:
      "wdth" 100,
      "YTLC" 500;
  }
/*--------------font--------------*/
/*--------------custom--------------*/
  .link-box{
      padding-top: 3rem;
      font-family: "Nunito Sans";
      font-weight: 400;
      justify-content: center;
      width: 50rem;
      a{
          color: var(--light-color);
      }
      a:link, a:visited ,a:active{
        color: var(--light-color);
      }
      .link-box-title{
          width: 100%;
        }
      .link-box-content{
          display: flex;
          align-content: center;
          height: 10rem;
          span{ width: 3rem; }
          .box{
  
           /* background-color: var(--hl2-color);*/
            display: flex;
            align-content: center;

          }
          .box:hover{
              opacity: .5;
              img{
                   opacity: .5;
              }
            }
      .link-box-text{
          display: block;
          text-align: left;
          padding:10px;
          font-size: 15px;


        }
      }
      .img-icon{
          width: 20rem;
          background-repeat: no-repeat;
          background-position-x: center;
          background-position-y: center;
          background-size:  5rem;
          background-color: var(--hl2-color);
        }
   }
  .cont-style-1{
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    width: 50rem;
    margin: 0 auto;
    font-family:"Nunito Sans";
    font-weight: 500;
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--light-color);
    text-align: justify;
    opacity: 0;
    animation: fade-in linear forwards;
    animation-timeline: view();
    animation-range: cover 10% 50%;
    scale:0;
    p{
        padding-top: 1.5rem;

      }
    p, li{opacity: 0;
      scale: 0;
        animation: fade-in linear forwards;
        animation-timeline: view();
        animation-range: cover .25% 20%;}
   }
  .cont-style-2{
      padding-top: 1.5rem;
      padding-bottom: 1.5rem;
      width: 70rem;
      margin: 0 auto;
   }
  .head{
      color: var(--hl-color);
      font-size: 2rem;
      text-align:left;
      font-weight: bolder;
      border-bottom: 3px solid var(--hl-color);
   }
  .cont-style-2-head
    {
      font-size: 2.5rem;
      color:rgba(255, 7, 110,1);
      text-align:center;
      font-weight: bolder;
      border-bottom:3px solid rgba(255, 7, 110,1);}
  .cx{
    background-color:rgba(255, 7, 110,1);
    text-align: center;
    animation: fade-in linear forwards;
    animation-timeline: view();
    animation-range: cover .25% 20%;}
  .progress
    {
      background-color: #292424;
    }
  .sub{
        color: var(--light-color);
        font-size: 2rem;
      }
  .infolink{
      font-size:1rem;
      justify-content: space-evenly;
      display: flex;    
      color: var(--light-color);
      padding-left:10rem;
      padding-right:10rem;
      }
    .info-cont{
      display:flex; 
      align-items:center; 
      justify-content: left;
      }
    .info-body{
      padding:1rem;
      font-size:2rem;
      color:rgb(255, 7, 110);
      }
  .cover{
      width: 100%;
      height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }
  .colcontent{
      margin: 0px auto;
      align-items: center;
      display: flex;
      justify-content: center;
      padding-top: 20px;
      img{
        width: 4.5rem;
      } 
    }
  .img-cont
      {
        scale: 0;
        padding: 3px; 
        background-color:var(--light-color);
        width: 150px;
        height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 100px;
        border: 5px solid var(--hl-color);
        animation: show 3s forwards;
        animation-timeline: view();
        animation-range: cover 10% 20%;
      }
 /*rtest
      {
        border:solid 1px turquoise;
      }*/
  .fa{
      font-size:5rem;
    }
  .fa:hover
    {
       color:red;
       animation: shake 0.5s;
       animation-iteration-count: infinite;
    }
  .col-cont{
        align-items: center;
        display: flex;
        justify-content: center;
        margin-top: 2rem;
        margin-bottom: 2rem;
      }
  .col-img{
        background-size:cover;
        background-position-x: center;
        background-position-y:center ;
        width: 15rem;
        height: 15rem;
        border-radius: 100%;
        border: 10px solid snow;
      }
  .col-text{
        margin-left: 3rem;
        width: 35rem;
      }
  .col-icon{
        font-size: 1.5rem;
        i{padding-left: 5px; padding-right: 5px;}
      }
/*--------------custom--------------*/
/*--------------keyframes--------------*/
  @keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }

  }

  @keyframes show {
    to{scale: 1;}
  }
  /*  @keyframes scroll-watcher
  {
      to { opacity: 1; 
        width: 100px;}
  }*/
  @keyframes fade-in-bar {
    to{width: 100px;}
  }
  @keyframes  fade-in {
       to {scale: 1; opacity: 1;}
      }
  @keyframes firstart {
    0% {color:rgba(255, 7, 110, 0.15)};
    5% {color:rgba(255, 7, 110, 0.2)};
    10% {color:rgba(255, 7, 110, 0.3)};
    15% {color:rgba(255, 7, 110, 0.4)};
    20% {color:rgba(255, 7, 110, 0.5)};
    25% {color:rgba(255, 7, 110, 0.6)};
    30% {color:rgba(255, 7, 110, 0.7)};
    35% {color:rgba(255, 7, 110, 0.8)};
    40% {color:rgba(255, 7, 110, 0.9)};
    45% {color:rgba(255, 7, 110, 1)};
    50% {color:rgba(255, 7, 110, 1)};
    55% {color:rgba(255, 7, 110, 1)};
    60% {color:rgba(255, 7, 110, 0.9)};
    65% {color:rgba(255, 7, 110, 0.8)};
    70% {color:rgba(255, 7, 110, 0.7)};
    75% {color:rgba(255, 7, 110, 0.6)};
    80% {color:rgba(255, 7, 110, 0.5)};
    85% {color:rgba(255, 7, 110, 0.4)};
    90% {color:rgba(255, 7, 110, 0.3)};
    95% {color:rgba(255, 7, 110, 0.2)};
    100% {color:rgba(255, 7, 110, 0.15)};
  }
/*--------------keyframes--------------*/
/*--------------card--------------*/
  .card-cover {
    width: 300px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;

  }
  .card-custom {
    background-color: rgba(0, 0, 0, 0.5);
    display: grid;
    grid-template-columns: 300px;
    grid-template-rows: 210px 210px 80px;
    grid-template-areas: "image" "text" "stats";
    border-radius: 18px;
    background: #000000;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.9);
    font-family: Nunito Sans;
    font-weight: 400;
    font-size: 1rem;
    text-align: center;
    cursor: pointer;
    margin:30px;
    color: #e5e9eb;
    transform-style: preserve-3d;
    perspective: 1000px;
  }
  .card-custom-image {
    grid-area: image;
    /*background: url("img/img1.jpg");*/
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-size: 325px;
    background-position-x: center;
    background-position-y:center ;
    
  }
  .card-custom-text {
    grid-area: text;
    margin: 25px;
    transform: translateZ(30px);
  }
  .card-custom-text .date {
    color: var(--hl-color);
    font-size:13px;
  }
  .card-custom-text p {
    /*color: grey;*/
    
    font-size:15px;
    font-weight: 300;
  }
  .card-custom-text h2 {
    margin-top:0px;
    font-size:28px;
  }
  .card-custom-stats {
    grid-area: stats; 
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    background: var(--hl-color);
  }
  .card-custom-stats .stat {
    padding:10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
  }
  .card-custom-stats .border {
    border-left: 1px solid var(--hl2-color); 
    border-right: 1px solid var(--hl2-color);
  }
  .card-custom-stats .value{
    font-size:22px;
    font-weight: 500;

  }
  .valueicon
  {
    width: 30px;
    transform: translateZ(30px);
  }
  .card-custom-stats .value sup{
    font-size:12px;
  }
  .card-custom-stats .type{
    font-size:11px;
    font-weight: 300;
    text-transform: uppercase;
  }
  .t-c
  {
    text-align: center;
  }
/*--------------card--------------*/
/*card2*/
  .card-custom-image.card2 {
    background: url("img2.jpg");
    background-size: cover;
  }
  .card-custom-text.card2 .date {
    color: var(--orange-color);
  }

  .card-custom-stats.card2 .border {
    border-left: 1px solid var(--orange2-colo);
    border-right: 1px solid var(--orange2-colo);
  }
  .card-custom-stats.card2 {
    background: var(--orange-colo)
  }
  /*card3*/
  .card-custom-image.card3 {
    background: url("img3.jpg");
    background-size: cover;
  }
  .card-custom-text.card3 .date {
    color: var(--green-color);
  }

  .card-custom-stats.card3 .border {
    border-left: 1px solid var(--green2-color);
    border-right: 1px solid var(--green2-color);
  }
  .card-custom-stats.card3 {
    background: var(--green-color);
  }
/*card2*/
.js-tilt-glare {
  border-radius: 18px;
}

/*media*/
/*   Extra small devices (portrait phones, less than 576px) */
      @media (max-width: 575.98px )
        {
          .desk{
                display: none;
                visibility: hidden;
            }
          .mobile{
                display: contents;
                visibility: visible;
              }
          body{
            padding: 0px;
            margin: 0px;
            }
          .head, .card-cover, .container,.cont-style-2,.cont-style-2-head, .cover .colcontent,.infolink{
            width: 100%;
            }
          
          .jumbotron
            {
              margin-top: 1rem;
              height: 35rem;
              font-size: 3rem;
              padding-top: 3rem;
              padding-bottom: 3rem;
              align-items: center;
              justify-content: center;
            }
          .infolink
            {
                display: block;
                justify-content: left;
                padding: 0px;
                margin: 0px;
              .info-cont{
                border-bottom: 2px solid var(--hl-color); 
                }
              .info-body{
                margin: 0px;
                i{ 
                    font-size: 1.5rem;
                    width: 30px;
                  }
               }
            }
          .container
            {
              padding-top: 10rem;
            }
          .cont-style-1{
              width: 100%;
              p,li{
                font-size: 1rem;
                }
            }
          .link-box-content
            {
              padding: 0px;
              margin: 0px;
              .box{ width: 100%;
                  
                  background-color: var(--cornmilk);
                  color: var(--dark-color);
                .img-icon{
                  background-size: 5rem ;
                  }
                .link-box-text{
                  h5{
                    font-size: .8rem;
                    font-weight: bolder;
                  }
                  p{ 
                    font-size: 12px;
                    }
                  }
                }
            }
          
          .colcontent{
              margin-top: 2rem;
              margin-bottom: 2rem;
              .img-cont{
                  height: 100px;
                  width: 100px;
              .fa{
                  font-size: 3rem;
                  }    
                }
            }
          .cont-style-2{
            row{ 
              width: 100%; 
              padding: 10px;
              margin: 0px;}
           }
          .cont-style-2-head{
              font-size: 2rem;
            }
            .link-box{
              width: 100%;
            }
          .cover{
            justify-items: center;
            }
          .card-cover
            {
              display: block;
              justify-items: center;
              margin-top: 3rem;
              margin-bottom: 3rem;
              .card-custom {
                  width: 300px;
                  margin: 0 auto;
                  }
            }
          .col-cont
            {
              margin-left:50px;
            }
          .col-text{
              width: 15rem;
              padding: 0px;
              margin: 15px;
            }
          .col-img
            {
              width: 8rem;
              height: 8rem;
              padding: 0px;
              margin: 0px;
              border: 3px solid snow;
            }
        }
      @media (min-width: 576px) and (max-width: 767.98px) 
        {
          body{
            padding: 0px;
            margin: 0px;
            gap:0;
          }
        .desk{
            display: none;
            visibility: hidden;
            }
        .mobile{
            display: contents;
            visibility: visible;
            }
        body, .jumbotron, .cont-style-1, .head, .card-cover, .container, .cont-style-2,.cont-style-2-head, .cover .colcontent, .link-box-content {
            width: 100%;
            padding: 0px;
            margin: 0px;
            gap: 0;
            }
        .jumbotron {
              margin-top: 1rem;
              font-size: 3rem;
              height: 20rem;
              .sub{ 
                  font-size: 1rem;
                }
            }
        .container{
            padding-left: 0px;
            padding-right: 0px;
            max-width: 970px!important;
            }
        .infolink
            {
            display: flow-root;
            justify-content: center;
            align-items: center;
            padding: 0px;
            width: 100vw;
            float: none;
            .info-cont{
               border-bottom: 2px solid var(--hl-color);
               float: left;
               padding-left:50px;
                .info-body{
                    margin: 0px;
                    i{ 
                        font-size: 1.5rem;
                        width: 30px;
                      }
                  }
              }
            }
        .cont-style-1{
            margin-top: 30px;
            animation-timing-function: linear;
            animation-range: cover 1% 15%;
            }
        .link-box-content
            {        
              box{
                  width: 40.5rem;
                  background-color: var(--cornmilk);
                  color: var(--dark-color);
                .img-icon{
                  background-size: 5rem ;
                  width: 350px;
                  }
                .link-box-text{
                    h5{
                        font-size: .8rem;
                        font-weight: bolder;
                      }
                    p{ 
                      font-size: 12px;
                      }
                  }
                  }
            }         
        .colcontent
            {
              .img-cont{
                display:flex ;
                justify-content: centwer;
                width: 100px;
                height: 100px;
                .fa{
                    font-size: 2rem;
                  }
                  img{
                    width: 40px; 
                  }
                }
            }
        .cover{
              justify-items: center;
            }
        .card-cover
            {
              display: block;
              justify-items: center;
              margin-top: 3rem;
              margin-bottom: 3rem;
              .card-custom {
                  width: 300px;
                  margin: 0 auto;
                  }
            }
        footer
            {
              margin-top: 5rem ;
              li {
                  display: flex;
                  width: 20rem;
                  align-content: center;
                  float: left;
                  padding: 0px;
                  margin: 0px;
                }
            }
        }
      @media (min-width: 768px) and (max-width: 991.98px) 
        {
            body
            {
              background-color: turquoise !important;
            }
        }
      @media (min-width: 992px) and (max-width: 1199.98px) 
        {
          body{
                margin: 0px;padding: 0px;gap: 0;
              }
          body, .jumbotron, .cont-style-1, .head, .card-cover, .container, .cont-style-2,.cont-style-2-head, .cover .colcontent, .link-box-content,footer {
                  width: 100%;
                  padding: 0px;
                  margin: 0px;
                  gap: 0;
                  font-size: 3rem;
                }
           .desk{
                display: none;
                visibility: hidden;
              }
          .mobile{
                display: contents;
                visibility: visible;
              }
          .jumbotron {

                border: var(--test-br);
                font-size: 3rem;
                height: 50rem;
                .sub{ 
                    font-size: 2rem;
                  }
              }
          .container{
              padding-left: 0px;
              padding-right: 0px;
              max-width: 970px!important;
              }
          .infolink
              {
                display: flow-root;
                justify-content: center;
                align-items: center;
                padding: 0px;
                width: 100vw;
                float: none;
                .info-cont{
                   font-size: 2rem;
                   border-bottom: 2px solid var(--hl-color);
                   float: left;
                   padding-left:50px;
                    .info-body{
                        margin: 0px;
                        i{ 
                            width: 30px;
                          }
                      }
                  }
              }
          .cont-style-1{
                  font-size: 2rem;
                  margin-top: 30px;
                  animation-timing-function: linear;
                  animation-range: cover 1% 15%;
                  p{font-size: 2rem;}
              }

          .link-box-content
              {        
                .box{
                    width: 50rem;
                    background-color: var(--cornmilk);
                    color: var(--dark-color);
                  .img-icon{
                    background-size: 5rem ;
                    width: 350px;
                    }
                  .link-box-text{
                      h5{
                          font-size: 1.5rem;
                          font-weight: bolder;
                        }
                      p{ 
                        font-size: 1rem;
                        }
                    }
                    }
              }
          .t-c{
              font-size: 1.5rem;
            }
          footer
            {
              div.text-li{
                display: block;
              }
            }
          .col-cont
            {
              margin-left:50px;
            }
          .col-text{
              width: 20rem;
              padding: 0px;
              margin: 15px;
            }
          .col-img
            {
              width: 8rem;
              height: 8rem;
              padding: 0px;
              margin: 0px;
              border: 3px solid snow;
            }
        }

      @media (min-width: 1200px) 
        {
          body
            {
              /*background-color: seagreen !important;*/
            }
        }