@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);
}

.btm {
    margin-bottom: 70px;
}

/* * {
    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;
}

.midtitle {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: center;
}

.midline {
    background-color: var(--scolor);
    width: 33%;
    height: 0.35vw;
    display: inline-block;
}

.smidtitle {
    font-weight: 600;
    font-size: 3.2vw;
    color: var(--fcolor);
    text-align: center;
}

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

.red {
    color: red;
    border-color: red;
}
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;
}

/* msg box section */

#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%;
    }
}


/* about me */

/* hero section */

.herobout {
    text-align: center;
    margin: 5vw;
}

.herobout > img {
    border-radius: 7px;
    height: 25vw;
}

.aboutsectionitems {
    margin: 1px 100px;
    font-size: 22px;
}

/* artilces */

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

.marticlesitems {
    display: flex;
    gap: 20px;
    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;
    justify-content: center;
    margin: 20px;
}
.acontactitems {
    display: flex;
    justify-content: space-between;
}

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

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

.contactpg input, .contactpg textarea {
    width: 100%;
}

input, textarea {
    width: 120%;
    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);
}

.boxerro {
    border: 2px red solid;
    width: 50%;
    font-size: 14px;
    border-radius: 7px;
    cursor: pointer;
    display: none;
}



#searchForm {
    display: flex;
    justify-content: center;
    align-items: center;
    /* width: 50%; */
}

#searchForm input[type="text"] {
    background-color: var(--bgcolor);
    border: 2px solid var(--scolor);
    color: var(--scolor);

}

#searchForm input {
    border-radius: 15px;
    padding: 10px;
    margin: 5px;
    width: 40%;
}

#searchForm input[type="submit"] {
    cursor: pointer;
    border: none;
    width: 10%;
}


/* articles page */
.articlesection {
    margin: 50px 0px;
}

.first-row {
    display: flex;
    margin: 0px 100px;
    justify-content: space-between;
    gap: 8vw;
}

.article > img {
    width: 100%;
}

.pdtp {
    margin-top: 5vw;
}

.artcontact {
    margin: 0px 100px;
}

/* single post */
.destext {
    margin: 30px 100px;
}

.destext p {
    padding: 0px;
    margin: 0px;
}

.blogimage {
    text-align: center;
    margin: 20px 100px;
}

.blogimage img{
    height: 40vw;
    border-radius: 9px;
}


.blogcontent > p {
    margin: 20px 100px;
    font-size: 20px;
}
/* articles */

.reactions i {
    font-size: 90px;
    cursor: pointer;
}

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

/* comments */

.commentform {
    width: 30%;
    padding: 0px 100px;
}

.replycommentform {
    width: 60vw;
    /* padding: 0px 100px; */
    /* display: none; */
}

.comment {
    border: var(--fcolor) 4px solid;
    margin: 30px 0px;
    font-weight: 300;
    padding: 20px 50px;
    border-radius: 10px;
}

.replyComment {
    border: #478cecb7 4px solid;
    /* margin: 30px 0px; */
    margin: 3vw 0vw 3vw 9vw;
    font-weight: 300;
    padding: 20px 50px;
    border-radius: 10px;
}

.realcomments {
    margin: 0px 100px;
}

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

.cmnthd span:hover {
    cursor: pointer;
    color: var(--fcolor);
}

.commentactions {
    display: flex;
    gap: 2%;
    justify-content: space-between;
}

.commentactions p:hover {
    color: var(--fcolor);
    cursor: pointer;
}


.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* overflow: auto; */
    background-color: #1a191d44;
}
.modal-content {
    background-color: var(--btext);
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    border-radius: 10px;
    width: 80%;
}
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: white;
    text-decoration: none;
    cursor: pointer;
}


















/* 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{
        header {
            
            padding: 0px 20px;
        }
        .logo {
            font-size: 18px;
        }
        .bars {
            display: block;
        }
        .fa-bars {
            color: var(--mtext);
        }
        .menu {
            display: none;
            flex-direction: column; /* Stack the links vertically */
            gap: 15px; /* Add spacing between links */
            position: absolute;
            top: 60px; /* Adjust the position to appear below the header */
            right: 0;
            background-color: white; /* Background color */
            border: 1px solid #ccc; /* Border to define the menu area */
            padding: 10px;
        }
    
        .bars {
            display: block; /* Show the hamburger icon */
            cursor: pointer;
        }
        footer{
            flex-direction: column;
            gap: 10px;
        }
        .articlesitems, .marticlesitems {
            flex-direction: column;
            text-align: center;
            margin: 0px 20px;
        }
        .aboutsectionitems {
            margin: 1px 20px;
            font-size: 18px;
        }
        input, textarea {
            width: 90%;
        }
        .contactitems {
            padding: 20px;
        }
        .first-row {
            flex-direction: column;
            margin: 0px 20px;
        }
        .acontactitems {
            padding: 20px;
            flex-direction: column;
            gap: 10px;
        }
        .artcontact {
            margin: 0px 20px;
        }
        .blogcontent > p {
            margin: 20px;
            font-size: 18px;
        }
        .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;
        }
        .commentform {
            width: 90%;
            padding: 5px;
        }
        .comment {
            border: var(--fcolor) 4px solid;
            margin: 30px 0px;
            font-weight: 300;
            padding: 5px 15px;
            border-radius: 10px;
        }
        .replyComment {
            border: var(--fcolor) 4px solid;
            margin: 30px 0px;
            font-weight: 300;
            padding: 5px 15px;
            border-radius: 10px;
        }
        
        .realcomments {
            margin: 5px;
        }
        .boxerro {
            width: 90%;
        }
        .cmnthd {
            flex-direction: row;
        }
    }
}

/* iPads, Tablets */
@media (min-width: 481px) and (max-width: 768px) {
    body{

        font-size: 14px;
    
        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;
        }
        .articlesitems, .marticlesitems {
            flex-direction: column;
            text-align: center;
            margin: 0px 20px;
        }
        .aboutsectionitems {
            margin: 1px 20px;
            font-size: 18px;
        }
        input, textarea {
            width: 90%;
        }
        .contactitems {
            padding: 20px;
        }
        .first-row {
            flex-direction: column;
            margin: 0px 20px;
        }
        .acontactitems {
            padding: 20px;
            flex-direction: column;
            gap: 10px;
        }
        .artcontact {
            margin: 0px 20px;
        }
        .blogcontent > p {
            margin: 20px;
            font-size: 18px;
        }
        .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;
        }
        .commentform {
            width: 90%;
            padding: 5px;
        }
        .boxerro {
            width: 90%;
        }
        .cmnthd {
            flex-direction: row;
        }
    }
}

/* Small screens, laptops */
@media (min-width: 769px) and (max-width: 1024px) {
    body{

        font-size: 14px;
        header {
            
            padding: 0px 20px;
        }
        .logo {
            font-size: 22px;
        }
        .menu > a {
            font-size: 18px;
        }
    }
}