@font-face {
    font-family: "NY";
    src: url("./fonts/NewYork\ PERSONAL\ USE.otf") format("truetype");
}
@font-face {
    font-family: "ba";
    src: url("./fonts/Book\ Antiqua\ Font.ttf") format("truetype");
    src: url("./fonts/book_antiqua_font-webfont.woff2") format('woff2'),
         url("./fonts/book_antiqua_font-webfont.woff") format('woff');
}   
@font-face {
    font-family: "ask";
    src: url("./fonts/AlteHaasGroteskRegular.ttf") format('truetype')
} 

*{  margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}
:root{
    --main-color:rgb(0,0,0);
    --title-color: #C58FFF;
    --title-font: 'Georgia';
    --text-font:'ba'
}
  
/*HOME*/

.main-page{
    display: flex;
    height: 100vh;
}
.nav-phone{
    display: none;
}
.lateral-nav{
    width: 13%;
    position: fixed;
    height: 100vh;
}



.logo{
    min-height: 140px;
    max-height: 140px;
    margin: auto;
    background-image:  url(images/wallpaper.jpg);
    background-position: center;
    background-size: cover;

}


.logo h1{
    text-align: center;
    color: #fff;
    font-family: var(--title-font);
    font-size: 20px;
    padding-top: 60px;

}
.logo img{
    display: none;
}



.nav-links{
    text-align: center;
    background-color: rgb(29, 28, 28);
    height: 100%;
}
.nav-links ul li{
    list-style: none;
    padding: 15px 12px;
    position: relative;
    border: solid 1px black;
}

.nav-links ul li a{
    color: #fff;
    text-decoration: none;
    font-family: 'ba';
}
.nav-links ul li a:hover{
    color: var(--title-color)
    ;
}
.main-content{
    margin-left: 13%;
    width: 87%;
    background-image: url(images/wallpaper.jpg);
    background-position: center;
    background-size: cover;
}
.main-title{
    margin-top: 18%;
    margin-left: 8%;
    margin-right: 3%;
    font-size: 40px;
}
.main-title h1{
    color: #fff;
    font-size: 60px;
    margin-bottom: 5%;
    font-family: var(--title-font);
}

.main-title h2{
    color: #fff;
    font-size: 30px;
    font-family: var(--text-font);

}

.box{
    background: #A9FF03;
    border-radius: 10px;
    box-sizing: border-box;
    width: fit-content;
    height: fit-content;
    transition: 0.5s;
    padding: 25px;
    margin-top: 5% ;
    margin-left: 8%;
}
.box:hover{
    box-shadow: 0 0 40px 0px rgb(223, 131, 46);
    cursor: pointer;
}

.box h3{
    color: black;
    font-family: var(--text-font);
}
.box a{
    text-decoration: none;
}

.portfolio-btn{
    margin: auto;
    margin-top: 10%;
}
.arrow{
    position: absolute;
    margin: auto;
    text-align: center;
    width: fit-content;
    right: 46%;
    bottom: 3%;
}
.fa-arrow-down{
    color: white;
    font-size: 25px;
}


.skill, .datas{
    margin-left: 13%;
    padding: 1% 5%;
    background-color: rgb(0, 0, 0);
}

.about, .projects-box, .datas-box{
    display: flex;
    margin: auto;
    margin-bottom: 7%;
    width: 90%;
}
.about-text{
    width: 65%;
    margin-top: 3%;
}
.about-img{
    width: 50%;
    height: fit-content;
    margin-left: 11%;
    text-align: right;
    margin-top: 5%;
}
.about-img img{
    height: 400px;
    width: 370px;
    border-radius: 50%;
}
.skill h2, .projects h2, .footer h2, .services h2, .datas h2{
    font-family:var(--title-font);
    font-size: 45px;
    color: var(--title-color);
    margin-bottom: 5%;
}

.skill p, .projects p, .services p, .datas p{
    color: #fff;
    font-family: var(--text-font);
    font-size: 18px;
    text-align: justify;
}

.datas-text{
    width: 45%;
    margin-top: 3%;
    margin-left: 14%;
}
.datas-img{
    width: 40%;
    height: fit-content;
    margin-top: 3%;
}
.datas-img img{
    height: 470px;
    width: 430px;

}


.services{
    background-color: var(--main-color);
    margin-left: 13%;
    padding: 1% 5%;
}
.serv-text{
    width: 80%;
    margin-left: 5%;
}
.serv-text a, .about-intro-text a, .services-text a, .portfolio-text a, .contact-text a, .projects-text a,
.article-text a{
    text-decoration: none;
    color: var(--title-color);
    font-family: var(--text-font);
}
.serv-text a:hover, .about-intro-text a:hover, .services-text a:hover, .portfolio-text a:hover, 
.contact-text a:hover, .projects-text a:hover, .article-text a:hover{
    background-color: #cececa;
    color: black;
    border-radius: 10px;
    padding: 2px;
}
.services-box{
    display: flex;
    margin: auto;
    margin-top: 3%;
    width: 95%;
}

.box-col{
    background-color: white;
    min-height: 100px;
    width: 32%;
    margin-left: 1%;
    padding: 1.5%;
    border-radius: 10px;
}
.box-col h3{
    font-size: 20px;
    margin-bottom: 3%;
    font-family: var(--title-font);
}
.box-col p{
    color: black;
    font-size: 15px;
    font-family: var(--text-font);
}


.skill-btn{
    text-align: center;
    margin: auto;
    margin-top: 5%;
}


.projects, .footer{
    margin-left: 13%;
    padding: 1% 5%;
    background-color: black;
}

.projects-box{
    margin-bottom: 2%;
}





.myproj-img{
    width: 50%;
    height: fit-content;
    margin-left: 11%;
    margin-top: 5%;
    text-align: right;
}
.myproj-img img{
    height: 280px;
    width: 350px;

}



.footer-box{
    width: 90%;
    margin-left: 4%;
}
.footer h2{
    margin-bottom: 3%;
}

.footer-box p{
    color: #ffffff;
    margin-bottom: 3%;
    width: 95%;
    font-size: 20px;
    font-family: var(--text-font);
}

.footer-box p a{
    color: #fff;
    font-family: var(--text-font);
    text-decoration: none;
}
.footer-box p a:hover{
    background-color: #A9FF03;
    color: black;
    padding: 2px;
    border-radius: 10px;
}
.contact-form{
    margin: auto;
}
.form-row{
    margin-bottom: 2%;
}
.form-row label{
    color: #ffffff;
    font-family: var(--text-font);
}
.Mybtn span{
    font-family: var(--title-font);
}

.form-row input, .form-row textarea{
    width: 80%;
    padding: 3px 18px;
    outline: none;
    font-size: 18px;
    background-color: white;
    border: 1px solid #cccccc
}

.short input{
    width: 40%;
}

.Mybtn{
    width: fit-content;
    background-color: white;
    color: black;
    padding: 2%;
    border: none;
    font-family: 'antiqua';
    margin-bottom: 5%;
}
.Mybtn:hover{
    cursor: pointer;
    box-shadow: 0 0 20px 0px rgba(0,0,0,0.2);
    background-color: #A9FF03;
    color: var(--main-color);
}


/*ABOUT*/

.about-intro{
    display: flex;
    width: 80%;
    margin-left: 10%;
    margin-top: 5%;
}
.about-intro-text{
    width: 50%;
}
.about-intro-text h1{
    font-family: var(--title-font);
    margin-bottom: 10%;

}
.about-intro-text p{
    font-family: var(--text-font);

}

.about-intro-img{
    width: 30%;
    margin-left: 10%;
    margin-top: 7%;
    height: fit-content;
    text-align: right;
}
.about-intro-img img{
    height: 380px;
    width: 350px;

}

.my-skills{
    background-color: var(--main-color);
    color: #ffffff;
    padding-bottom: 5%;
    display: grid;
    justify-content: center;
    align-content: center;
    gap: 5px;
    padding-top: 5%;
}

.my-skills > div {
    color: #ffffff;
}

.my-skills :nth-child(2n) {
    font-size: 2rem;
    color: #ffffff;
    font-weight: bold;
    font-family: var(--text-font);

}
.my-skills :nth-child(3n) {
    writing-mode: vertical-lr;
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: vertical-lr;
    color: #a6fcff;
    font-family: var(--text-font);

}
.my-skills :nth-child(4n) {
    font-size: 3rem;
    color: #32ffff;
    font-family: var(--text-font);

}
.my-skills :nth-child(5n) {
    font-size: 4rem;
    color: #00f7ff;
    font-family: var(--text-font);
}

#Programming {
    grid-area: Programming;
}
#Algorithm {
    grid-area: Algorithm;
}
#Software {
    grid-area: Software;
}
#Documentation {
    grid-area: Documentation;
}
#Coding {
    grid-area: Coding;
}
#Information {
    grid-area: Information;
}
#Testing {
    grid-area: Testing;
}
#Computer {
    grid-area: Computer;
}
#Debugging {
    grid-area: Debugging;
}
#Design {
    grid-area: Design;
}
#Readability {
    grid-area: Readability;
}
#Learning {
    grid-area: Learning;
}

.my-skills{
    grid-template:
    '. . . Information Documentation Documentation Documentation Documentation'
    'Computer Computer Computer Information Coding Debugging Learning Testing'
    '. Readability Software Information Coding Debugging Learning Design     '
    '. . Software Information Programming Debugging Learning Design'
    '. . Software Information Algorithm Debugging Learning Design'
    '. . . Information . . Learning .';
}

.my-skills > div {
    text-shadow: 3px 5px 8px rgba(255, 255, 255, 0.452);
}





/*SERVICES*/

.srv{
    height: fit-content;
}

.services-main, .about-main, .portfolio-main, .article-main{
    background-color: var(--main-color);
    margin-left: 13%;
    width: 87%;
}
.services-text, .portfolio-text{
    margin-top: 5%;
    margin-left: 10%;
    width: 80%;
}
.services-text h1, .about-intro h1, .portfolio-text h1{
    color: var(--title-color);
    font-size: 45px;
    font-family: var(--title-font);

}
.services-text p, .about-intro p, .portfolio-text p{
    color: #fff;
    font-size: 18px;
    margin-top: 3%;
    font-family: var(--text-font);

}

.serv-list{
    color: white;
    display: flex;
    width: 80%;
    margin-left: 10%;
    margin-top: 5%;
}
.serv-col{
    width: 100%;
}
.serv-row{
    width: 90%;
    margin-bottom: 10%;
    background-color: #cccccc;
    color: black;
    padding: 3%;
    border-radius: 10px;
    height: fit-content;
    min-height: 385px;
}
.serv-row h3{
    text-align: center;
    font-size: 20px;
    font-family: var(--title-font);

}

.serv-row p{
    text-align: justify;
    font-size: 17px;
    margin-top: 3%;
    font-family: var(--text-font);
}


/*CONTACT ME*/


.contact-main{
    background-color: var(--main-color);
    margin-left: 13%;
    width: 87%;
    height: fit-content;
}

.contact-text{
    margin-top: 3%;
    margin-left: 5%;
    width: 80%;
}
.contact-text h1{
    color: var(--title-color);
    font-size: 40px;
    margin-bottom: 3%;
    font-family: var(--title-font);
}

.contact-text p{
    color: #fff;
    font-size: 95%;
    font-size: 18px;
    font-family: var(--text-font);

}

.page{
    margin-left: 5%;
    margin-top: 3%;
}

/*PORTFOLIO*/

.port-list{
    color: white;
    display: flex;
    width: 90%;
    margin-left: 10%;
    margin-top: 5%;
    color: #C58FFF;
}
.port-col{
    width: 80%;
}
.port-row{
    width: 80%;
    min-height: 400px;
    height: fit-content;
    text-align: left;
}
.port-row h3{
    font-family: var(--title-font);
    margin-top: 2%;
}
.port-row p{
    font-family: var(--text-font);
    margin-top: 2%;
    font-size: 15px;
}
.port-row img{
    width: 100%;
    min-height: 210px;
    max-height: 210px;
    border-radius: 10px;
}



/*ARTICLE*/
.article-main{
    height: fit-content;
}
.article-text{
    margin-top: 5%;
    margin-left: 10%;
    width: 80%;
    text-align: justify;
}
.article-text h1{
    color: var(--title-color);
    font-size: 45px;
    font-family: var(--title-font);
}
.article-text h2{
    color: var(--title-color);
    font-size: 30px;
    font-family: var(--title-font);
    padding-top: 5%;
}
.article-text p{
    color: #fff;
    font-size: 18px;
    margin-top: 3%;
    font-family: var(--text-font);
}
.article-img{
    margin: auto;
    text-align: center;
    padding-top: 4%;
}
.article-text img{
    width: 700px;
    height: 350px;
}
.stock img{
    width: 600px;
    height: 300px;
}

.btn-back{
    margin: auto;
    margin-top: 5%;
    margin-bottom: 5%;

}

@media(max-width: 576px){
    .nav-phone{
        max-width: 200px;
    }
    .container .slide-container .slide{
        max-width: 70%;
    }

    

    .serv-row{
        padding: 5%;
        width: 90%;
        min-height: 200px;

    }

    .serv-row p{
        font-size: 13px;
    }




}

@media(max-width: 1040px){
    .lateral-nav{
        display: none;
    }
    .main-page, .skill, .datas, .services,.projects, .footer{
        margin: auto;
        
    }

    .main-content{
        width: 100%;
        height: 100vh;
        margin: auto;
        text-align: center;
    }
    .main-title{
        position: relative;
        margin: auto;
        top: 30%;
    }
    .main-title h1{
        font-size: 28px;
    }
    .main-title h2{
        font-size: 15px;
        padding: 2%;
    }
    .box{
        margin: auto;
        position: relative;
        top: 40%;
        padding: 20px;
    }
    .box h3{
        font-size: 15px;
    }
    .nav-phone{
        display: block;
    }
    .nav-phone ul li{
        list-style: none;
        padding: 0.7rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .nav-phone ul{
        margin-top: 2%;
    }
    .nav-phone ul li a{
        text-decoration: none;
        color: #C58FFF;
    }
    .nav-phone ul li a:hover{
        color: #A9FF03;
    }
    .nav-phone{
        position: absolute;
        right: 3.5rem;
        top: 30px;
        width: 250px;
        height: 0;
        background-color: rgba(68, 65, 65);
        border-radius: 10px;
        overflow: hidden;
        transition: height 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        
        /*
        -webkit-backdrop-filter: blur(2rem);
        -moz-backdrop-filter: blur(2rem);
        -ms-backdrop-filter: blur(2rem);
        backdrop-filter: blur(2rem);
        */

    }
    .nav-phone.open{
        height: 220px;


    }

    .toggle-btn{
        color: #C58FFF;
        text-align: right;
        margin-right: 3%;
        margin-top: 3%;
        font-size: 30px;
        cursor: pointer;
    }
    .arrow{
        right: auto;
        left: 47%;
    }

    .about{
        width: 100%;
        flex-direction: column;
        margin: auto;
    }
    .about-text{
        width: 90%;
        text-align: center;
        margin: auto;
        margin-top: 5%;
    }

    .about-text p{
        margin-bottom: 5%;
    }
    .about-img{
        margin: auto;
        text-align: center;
        margin-top: 5%;
        width: 100%;

    }
    .about-img img{
        max-height: 270px;
        max-width: 250px;
    
    }

    .datas-img{
        display: none;
    }
    .datas-box{
        display: unset;
        margin: auto;
        text-align: center;
    }
    .datas-text{
        width: 90%;
        margin: auto;
    }
    .about-text h2, .datas-text h2, .serv-text h2, .projects-text h2, .footer-box h2{
        font-size: 35px;
    }
    .about-text p, .datas-text p, .serv-text p, .projects-text p, .footer-box p{
        font-size: 15px;
    }

    .services-box{
        flex-direction: column;
        width: 100%;
        margin: auto;
    }
    .serv-text{
        width: 90%;
        text-align: center;
    }
    .box-col{
        width: 90%;
        min-height: 110px;
        text-align: center;
        margin: auto;
        margin-top: 7%;
        padding: 3%;
    }

    .projects-box{
        flex-direction: column;
        width: 90%;
        margin: auto;
        text-align: center;
    }
    .projects-text{
        text-align: center;
    }

    .projects-text p{
        margin-bottom: 5%;
        margin-right: 5%;
    };


    .myproj-img{
        margin-top: 5%;

    }
    .myproj-img img{
        max-height: 230px;
        max-width: 250px;
    }

    .footer-box h2, .footer-box p{
        text-align: center;
    }
    .contact-form{
        margin-top: 5%;
        margin-bottom: 5%;
        
    }
    .form-row input{
        width: 80%;
    }

    .abt{
        height: 100%;
        max-height: fit-content;
    }

    .about-main, .contact-main, .services-main, .portfolio-main, .article-main{
        width: 100%;
        height: 100%;

        margin: auto;
        text-align: center;
    }

    .about-intro{
        flex-direction: column;
        text-align: justify;
        justify-content: center;
        width: 90%;
        margin: auto;
        margin-bottom: 0;
    }

    .about-intro-text{
        width: 100%;
    }
    .about-intro-text h1{
        margin-top: 8%;
        text-align: center;
    }
    .about-intro-text p{
        margin-bottom: 5%;
        font-size: 15px;
    }

    .about-intro-img{
        margin: auto;
        text-align: center;
        width: 100%;

    }
    .about-intro-img img{
        max-height: 270px;
        max-width: 250px;
    }

    .my-skills :nth-child(2n) {
        font-size: 0.6rem;
    
    }

    .my-skills :nth-child(4n) {
        font-size: 1rem;
    
    }
    .my-skills :nth-child(5n) {
        font-size: 1.5rem;
    }


    .reviews{
        background-color: var(--main-color);
        padding-bottom: 5%;
        margin: auto;
    }
    .container .slide-container .slide{
        width: 70%;

    }
    .container .slide-container .slide .testim-box{
        margin: auto;
    }
    .testim-box{
        width: 100%;
        text-align: center;
    }
    .user-info span{
        font-size: 25px;
    }
 
    .testim-box p{
        font-size: 15px;
    }
    .indicator{
        margin-top: 5%;
    }
 



    .services-text{
        margin: auto;
        text-align: justify;
        justify-content: center;
        width: 90%;
        margin-top: 5%;
        margin-bottom: 10%;
    }
    .services-text h1{
        text-align: center;
    }
    .services-text p{
        font-size: 15px;
    }

    .serv-list{
        flex-direction: column;
        width: 100%;    
        margin: auto;
        margin-top: 5%;
        text-align: center;
    }
    .serv-col{
        text-align: center;
        margin: auto;
        width: 80%;
    }

    .serv-row{
        padding: 5%;
        height: fit-content;
    }
    .cnt{
        height: fit-content
    }


    .contact-text{
        text-align: justify;
        justify-content: center;
        margin: auto;
        width: 90%;
        margin-top: 5%;
        margin-bottom: 10%;

    }
    .contact-text h1{
        text-align: center;
    }
    .contact-text p{
        font-size: 15px;
    }
    .page{
        text-align: left;
        margin-left: 8% ;
    }
    .portfolio-text{
        margin: auto;
        text-align: justify;
        justify-content: center;
        width: 90%;
        margin-top: 5%;
        margin-bottom: 15%;
    }
    .portfolio-text h1{
        text-align: center;
    }
    .portfolio-text p{
        font-size: 15px;
    }
    .port-list{
        width: 100%;
        margin: auto;
        flex-direction: column;
    }
    .port-col{
        width: 100%;

    }

    .port-row{
        width: 80%;
        margin: auto;
        text-align: center;
        margin-bottom: 0;
    }

    .article-text{
        margin: auto;
        text-align: justify;
        justify-content: center;
        width: 90%;
        margin-top: 5%;
        margin-bottom: 10%;
    }
    .article-text h1{
        text-align: center;
    }
    .article-text p{
        font-size: 15px;
        margin-top: 10%;
        margin-bottom: 10%;
    }

    .article-text img{
        width: 350px;
        height: 175px;
    }
    .stock img{
        width: 350px;
        height: 175px;}


}