@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&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 {
    --mtext: #fefefe;
    --btext: #000000;
    --fcolor: #73A7F2;
    --scolor: #10E956;
    --bgcolor: #1A191D;
    --hover: #4eda9a;

}

body {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
    font-style: normal;
    font-size: 18px;
    background-color: var(--bgcolor);
    color: var(--mtext);
}


/* * {
    border: red 1px solid;
} */


a {
    color: var(--mtext);
    text-decoration: none;
}

.code {
    font-family: "Fira Code", monospace;
}

.scolor {
    color: var(--scolor);
}

.fcolor {
    color: var(--fcolor);
}

.buttons {
    background-color: var(--fcolor);
    color: var(--btext);
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 510;
}

.buttons:hover {
    background-color: var(--scolor);
}

.line {
    background-color: var(--scolor);
    width: 7vw;
    height: 0.5vw;
    display: inline-block;
}

.stitle {
    font-weight: 600;
    font-size: 2.5vw;
    color: var(--fcolor);
}

.sidetitle {
    display: flex;
    align-items: center;
    gap: 20px;
}

header {
    border-bottom: 3px solid var(--scolor);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 90px;
}

.logo {
    color: var(--fcolor);
    font-size: 35px;
    font-weight: 500;
    margin: 10px 0px;
}

#active {
    color: var(--scolor);
}

.bars {
    display: none;
}
.menu > a {
    font-size: 22px;
    color: var(--fcolor);
}

.menu {
    display: flex;
    gap: 30px;
}

.menu > a:hover {
    color: var(--scolor);
    font-size: 22.5px;
    transition: ease-in 200ms;
}

/* error */

#msgbox {
    position: fixed;
    top: 80px;
    /* right: 0px; */
    right: -100%;
    width: 50%;
    padding: 10px 25px;
    background-color: rgb(145, 0, 0);
    color: white;
    display: none;
    border-radius: 7px 0px 0px 7px;
    z-index: 1000;
    /* animation: slideInFromRight 1s ease-in-out forwards; */
}

@keyframes slideInFromRight {
    from {
        right: -100%;
    }
    to {
        right: 0px;
    }
}


@keyframes slideOutToRight {
    from {
        right: 0px;
    }
    to {
        right: -100%;
    }
}

/* Hero section */

.herosection {
    display: flex;
    padding: 50px 90px;
    gap: 70px;
}

.hello {
    font-size: 22px;
    font-weight: 500;
}

.lefthero > h1 {
    padding: 0px;
    margin: 0px;
    font-weight: 600;
}

.lefthero p {
    padding-top: 20px;
}

.des {
    letter-spacing: 2px;
}

.herobtns {
    margin: 50px 0px 0px 0px;
}

.second {
    margin-left: 55px;
}

.righthero > img {
    height: 30vw;
}

.scroll {
    text-align: center;
}

.scroll img {
    height: 3vw;
    animation: bounce 700ms infinite;
}

.scroll img:hover {
    cursor: pointer;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

/* about section homepage */

.itemsabt {
    display: flex;
    gap: 100px;
    align-items: center;
    margin: 30px 0px 70px 0px;
    padding: 0px 100px;
}

.leftabt > img{
    height: 30vw;
    border-radius: 7px;
}

.rightabt {
    font-size: 20px;
    letter-spacing: 2px;
}

/* portfolio section */

.catbtns {
    text-align: center;
}

.catbtns > a {
    margin: 10px 15px;
}

.projects {
    display: grid;
    grid-template-columns: 70% 30%;
    gap: 50px;
    margin: 40px 100px;
}

.project {
    background-color: var(--fcolor);
    border-radius: 7px;
}



.pflex {
    display: flex;
}

.ptitle {
    margin: 15px 0px;
    color: var(--btext);
    font-size: 22px;
    font-weight: 600;
}

.projectbtn {
    text-align: center;
    margin: 20px 0px;
}

.projectbtn > .buttons {
    background-color: var(--btext);
    color: var(--mtext);
}

.project1, .project3 {
    padding: 20px;
}

.project2 {
    grid-row: span 2;
    padding: 10px;
}

.project2 > img {
    width: 100%;
}





/* artilces */

.articlesitems {
    display: flex;
    gap: 20px;
    margin: 20px 100px;
    align-items: center;
    justify-content: space-between;
}

.article {
    background-color: var(--fcolor);
    padding: 16px;
    border-radius: 5px;
}

.artitle {
    font-size: 24px;
    font-weight: 600;
    margin: 20px 0px;
}



/* Contact form */


.contactitems {
    display: flex;
    padding: 40px 100px;
    gap: 15vw;
    justify-content: space-between;
}

.leftcontact {
    font-size: 26px;
    font-weight: 600;
}

label {
    display: block;
    margin: 10px 0px;
}

input, textarea {
    width: 95%;
    background-color: var(--fcolor);
    color: var(--mtext);
    border-radius: 10px;
    border: none;
    font-size: 18px;
    padding: 10px 10px;
    font-family: "Fira Code", monospace;
    letter-spacing: 0px;
    margin-bottom: 5px;
}

input:focus, textarea:focus {
    background-color: #b9d4f9;
    color: var(--btext);
    border: var(--scolor) 1px solid;
    outline: none;
}

input[type=submit] {
    width: 50%;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    margin: 15px 0px;
}

input[type=submit]:hover {
    color: black;
    background-color: var(--hover);
}






/* Footer */

footer {
    border-top: 3px solid var(--scolor);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 90px;
    font-size: 22px;
    font-weight: 500;
}
footer > a {
    color: var(--fcolor);
}


/* responsiveness */

/* Mobile devices */
@media (max-width: 480px) {
    body{
        font-size: 14px;
    
    header {
        padding: 0px 20px;
    }
    .logo {
        font-size: 18px;
    }
    .bars {
        display: block;
    }
    .fa-bars {
        color: var(--mtext);
    }
    .menu {
        display: none;
    }
    footer{
        flex-direction: column;
        gap: 10px;
    }
    .herosection {
        padding: 20px;
        flex-direction: column-reverse;
        text-align: center;
    }
    .herosection h1 {
        font-size: 25px;
    }
    .herosection p {
        font-size: 18px;
    }
    .righthero > img {
        height: 50vw;
    }
    .itemsabt {
        text-align: center; 
        flex-direction: column;
        gap: 5px;
        padding: 0px 20px;
    }
    .projects {
        display: grid;
        grid-template-columns: 100%;
        gap: 50px;
        margin: 40px;
    }
    .pflex {
        flex-direction: column;
    }
    .articlesitems {
        flex-direction: column;
        text-align: center;
    }
    .contactitems {
        padding: 20px;
        flex-direction: column;
        gap: 10px;

    }
    .catbtns {
        text-align: center;
    }
    
    .catbtns > a {
        margin: 2px;
    }
    .buttons {
        background-color: var(--fcolor);
        color: var(--btext);
        padding: 4px 8px;
        border-radius: 4px;
        font-weight: 500;
    }
};
}

/* iPads, Tablets */
@media (min-width: 481px) and (max-width: 768px) {
    body{
        header {
            
            padding: 0px 20px;
        }
        .logo {
            font-size: 24px;
        }
        .bars {
            display: block;
        }
        .fa-bars {
            color: var(--mtext);
        }
        .menu {
            display: none;
        }
        footer{
            flex-direction: column;
            gap: 10px;
        }
        .herosection {
            padding: 20px 30px;
            flex-direction: column-reverse;
            text-align: center;
        }
        .righthero > img {
            height: 50vw;
        }
        .itemsabt {
            text-align: center; 
            flex-direction: column;
            gap: 5px;
            padding: 0px 20px;
        }
        .projects {
            display: grid;
            grid-template-columns: 100%;
            gap: 50px;
            margin: 40px;
        }
        .pflex {
            flex-direction: column;
        }
        .articlesitems {
            flex-direction: column;
            text-align: center;
        }
        .contactitems {
            padding: 20px;
            flex-direction: column;
            gap: 10px;
        }
        .catbtns {
            text-align: center;
        }
        
        .catbtns > a {
            margin: 2px;
        }
        .buttons {
            background-color: var(--fcolor);
            color: var(--btext);
            padding: 4px 8px;
            border-radius: 4px;
            font-weight: 500;
        }
    }
}

/* Small screens, laptops */
@media (min-width: 769px) and (max-width: 1024px) {
    body{
        header {
            
            padding: 0px 20px;
        }
        .logo {
            font-size: 22px;
        }
        .menu > a {
            font-size: 18px;
        }
    }
}