@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&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');

body{
    background: linear-gradient(to left(rgba(6, 0, 0, 0.877)) (rgb(12, 12, 159)));
    font-family: "Roboto", sans-serif;
}

/*Nav links*/
nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

ul{
    list-style: none;
    text-decoration: none;
    display: flex;
}

li{
    list-style: none;
    margin-right: 1cm;
}
a{
    text-decoration: none;
}

/*Main content*/
header{
    margin-left: 15cm;
    padding-top: 8cm;
}

.Home >h1{
    font-size: 80px;
    font: xx-large;
}
h2{
    font-size: 25px;
}

.btn{
    display: inline-block;
    padding: 12px 28px;
    background: rgb(7, 70, 109);
    border-radius: 40px;
    box-shadow: 0 0 10px rgb(66, 158, 204);
    font-size: 16px;
    letter-spacing: 1px;
    text-decoration: none;
    font-weight: 600;
  }

/*About me section*/
  .About-me{
    padding-top: 7cm;
  }

  .AboutHeader{
    margin-left: 20cm;
  }

.continue {
    display: flex;
    gap: 40px;
    margin-left: 200px;
}

.continue p{
    width: 800px;
    height: 500px;
}

/*Project section*/
 .mine{
    padding-top: 9cm;
    margin-left: 5cm;
 }

 .ProjectHeader{
    margin-left: 15cm;
 }

 /*Skill section*/
.container2{
    padding-top: 7cm;
    margin-left: 5cm;
}

.SkillHeader{
    margin-left: 15cm;
}

.con1{
    display: flex;
    justify-content: space-between;
}


/* Contact section*/
.container3{
    padding-top: 8cm;
}

.ContactHeader{
    margin-left: 20cm;
}


/*Mobile screen*/
@media only screen and (max-width: 600px) {
    nav{
        flex-direction: column;
        align-items: center;
    }

    ul{
        margin-right: 7cm;
        display: list-item;
    }

    a{
        text-decoration: none;
    }

    header {
        margin-left: 5%;
        padding-top: 2%;
    }

    .About-me{
        padding-top: 10%;
    }

    .AboutHeader{
        margin-left: 3cm;
    }

    .continue {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin-left: 0;
        
    }

    .continue p {
        width: auto;
        height: auto;
    }

    .mine {
        padding-top: 6cm;
        margin-left: 0cm;
    }

    .ProjectHeader{
        margin-left: 3cm;
     }

    .container2 {
        padding-top: 6cm;
        margin-left: 0cm;
    }

    .SkillHeader{
        margin-left: 3cm;
    }
    .con1{
        width: auto;
        height: auto;
        margin-left: 0cm;
    }

    .container3 {
        padding-top: 6cm;
    }

    .ContactHeader{
        margin-left: 3cm;
    }
}


/*Tablet screen*/
@media only screen and (min-width:600px) and (max-width: 1024px) {
    nav{
        flex-direction: column;
        align-items: center;
    }

    ul{
        margin-right: 17cm;
        display: list-item;
    }

    a{
        text-decoration: none;
    }

    header {
        margin-left: 25%;
        padding-top: 58%;
    }

    .About-me{
        padding-top: 9%;
    }

    .AboutHeader{
        margin-left: 8cm;
    }

    .continue {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin-left: 0;
        
    }

    .continue p {
        width: auto;
        height: auto;
    }

    .mine {
        padding-top: 6cm;
        margin-left: 0cm;
    }

    .ProjectHeader{
        margin-left: 8cm;
    }

    .container2 {
        padding-top: 6cm;
        margin-left: 0cm;
    }

    .SkillHeader{
        margin-left: 8cm;
    }

    .con1{
        width: auto;
        height: auto;
        margin-left: 0cm;
    }

    .container3 {
        padding-top: 6cm;
    }

    .ContactHeader{
        margin-left: 8cm;
    }
}