@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Merriweather:ital,wght@0,300..900;1,300..900&family=Roboto+Slab:wght@100..900&family=Source+Code+Pro:wght@200..900&family=Lora:wght@400..700&display=swap');

:root{
--primary:#2563eb;
--secondary:#ff2b2b;
--dark:#1f2937;
--light:#f9fafb;
--text:#374151;
--card:#ffffff;
}

*{
box-sizing:border-box;
}

body{
margin:0;
padding:0;
height:100vh;
overflow-x:hidden;
overflow-y:auto;
background:var(--card);
color:var(--text);
}

.Nav-container{
background-color:#333;
width:100%;
margin:0;
padding:0;
}

.UL-container{
list-style-type:none;
display:flex;
padding:30px 0;
margin:0;
justify-content:center;
align-items:center;
}

.TextNavbar-container{
padding:20px;
font-family:'Merriweather',Sans-Serif;
}

.ElementNavbar-container{
color:#e6e6e6;
font-size:20px;
text-decoration:none;
display:inline-block;
transform:translateY(0);
transition:transform 0.35s cubic-bezier(.25,.8,.25,1),
filter 0.35s cubic-bezier(.25,.8,.25,1),
text-shadow 0.35s ease;
}

.ElementNavbar-container:hover{
transform:translateY(-7px);

}

.Konten .Konten-profile{
display:flex;
justify-content:space-between;
align-items:center;
padding:50px 10px;
flex-wrap:wrap;
}


.ImgKonten1-container{
display:flex;
justify-content:flex-end;
align-items:center;
margin:40px;
}

.ImgKonten1-container aside{
background-color:#f3f3f3;
box-shadow:20px 20px 5px #ccc;
width:90%;
min-height:600px;
border-radius:25px;
flex-direction:column;
display:flex;
align-items:center;
justify-content:flex-start;
}

.ImgTagKonten1-container{
width:220px;
height:220px;
object-fit:cover;
border-radius:50%;
margin-top:50px;
box-shadow:0px 10px 20px rgba(0,0,0,0.2);
display:block;
}

.Table-Container{
margin:40px 30px 30px 30px;
display:flex;
justify-content:center;
flex-direction:column;
}

.Table-tag-Container{
font-family:'Roboto Slab',sans-serif;
font-size:18px;
color:#333;
width:100%;
}

.Table-tag-Container tr{
border:none;
}

.table-row{
padding:3px;
}

.Table-tag-Container tr td:nth-child(1){
font-weight:500;
width:160px;
}

.Table-tag-Container tr td:nth-child(2){
width:10px;
}

.Table-tag-Container tr td:nth-child(3){
font-weight:400;
font-size:80%;
}

.Icon-bio{
display:flex;
justify-content:center;
align-items:center;
margin-top:40px;
gap:20px;
}

.Icon-bio a{
color:black;
font-size:35px;
text-decoration:none;
}

.typing::after{
content:"Programming";
font-family:Arial,Sans-Serif;
padding-right:5px;
animation:words 13s infinite;
}

.js .typing::after{
display:none;
}

#typing{
border-right:3px solid #555;
padding-right:5px;
animation:cursor 0.8s infinite;
}

@keyframes cursor{
50%{border-color:transparent;}
}

@keyframes words{
0%{content:"IT Software Programmer";}
33%{content:"Network Enthusiast";}
66%{content:"Digital Ilustration Artist";}
100%{content:"";}
}

.Konten .Name-container{
display:flex;
line-height:1;
justify-content:space-between;
}

.Konten .Name-container h3{
font-size:80px;
margin-left:120px;
position:relative;
margin-top:-120px;
font-family:"Merriweather",Sans-Serif;
font-style:italic;
color:#333;
white-space:normal;
}

.Konten .Name-container .Intro-Name-Container{
font-family:"Great Vibes",Times New Roman;
font-size:40px;
font-weight:lighter;
}

.Keterangan-Name-container{
font-size:40px;
color:#555555;
opacity:0.4;
position:relative;
margin-top:-20px;
}

.Konten-Bio{
background-color:#f3f3f3;
box-shadow:20px 20px 10px #ccc;
margin:30px;
border-radius:40px;
margin-bottom:120px;
margin-top:-40px;
}

.Konten-Bio .Biodata-container p{
margin-top:40px;
margin-bottom:40px;
}

.Konten-Bio .Biodata-container h6{
margin-bottom:-90px;
font-size:40px;
font-weight:600;
font-family:Lora;
}

.Paragraf-BIO{
color:#333;
margin:40px;
padding:25px;
font-size:40px;
font-family:'Roboto Slab';
font-weight:350;
line-height:120%;
}

.capabilities{
background:#fafafa;
padding:80px 20px;
text-align:center;
}

.section-title{
font-size:28px;
letter-spacing:2px;
margin-bottom:50px;
color:#222;
position:relative;
}

.section-title::after{
content:"";
width:60px;
height:3px;
background:#ff2b2b;
display:block;
margin:10px auto 0;
}

.capabilities-container{
max-width:1100px;
margin:auto;
display:flex;
justify-content:center;
gap:25px;
flex-wrap:wrap;
}

.cap-card{
background:#f3f3f3;
width:300px;
padding:35px 25px;
border-radius:12px;
transition:0.3s;
box-shadow:20px 20px 10px #ccc;
}

.cap-card:hover{
transform:translateY(-8px);
box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

.icon{
font-size:45px;
margin-bottom:15px;
}

.cap-card:nth-child(1){
color:#ff2b2b;
}

.cap-card:nth-child(2){
color:#2563eb;
}

.cap-card h3{
font-size:20px;
margin-bottom:10px;
color:#222;
}

.cap-card p{
font-size:14px;
color:#555;
line-height:1.6;
}

.Footer-container{
height:8vh;
background-color:#333;
}

.TextFooter-container{
display:flex;
justify-content:center;
color:#cccccc;
align-items:center;
padding-top:10px;
font-size:20px;
font-family:Source Code Pro;
}

.Konten-profile{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
  flex-wrap: wrap;
}

.Name-container{
  max-width: 420px;
}

.ImgKonten1-container{
  width: 300px;
}


@media (max-width: 900px){

.Konten-profile{
  flex-direction: column;
  text-align: center;
}

.ImgKonten1-container{
  width: 85%;
}

.Name-container{
  max-width: 100%;
}

.Konten-profile{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
  flex-wrap: wrap;
}

.Name-container{
  max-width: 420px;
}

.ImgKonten1-container{
  width: 300px;
}

}

@media (max-width:768px){

.ElementNavbar-container{
font-size:16px;
}

.Konten .Name-container h3{
font-size:50px;
margin-left:20px;
margin-top:20px;
}

.Paragraf-BIO{
font-size:20px;
}

}

@media (max-width: 600px){

/* Container utama */
.Konten{
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Nama */
.Konten .Name-container h3{
    font-size: 32px;
    line-height: 1.2;
}

/* Hello / I'm */
.Konten .Name-container .Intro-Name-Container{
    font-size: 24px;
}

/* Card profile */
.Profile-Card{
    width: 85%;
    margin-top: 30px;
}

/* About me */
.About-Me{
    width: 85%;
    margin-top: 30px;
}

.About-Me p{
    font-size: 15px;
    line-height: 1.7;
}

}

@media (max-width:480px){

.ElementNavbar-container{
font-size:14px;
}

.Konten .Name-container h3{
font-size:36px;
}

.Keterangan-Name-container{
font-size:24px;
}

.cap-card{
width:90%;
}

}