@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

:root,
.lightmode {
    --bg-color: white;
    --body-text-color: black;
    --h1-menuBtn-color: #dd9700;
    --text-link-color: #1b2122;
}

.darkmode {
    --bg-color: black;
    --body-text-color: white;
    --h1-menuBtn-color: #dd9700;
    --text-link-color: #c4f5fc;
}

*,
::after,
::before {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    background-color: var(--bg-color);
    font-size: 1rem;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    padding: 2rem 0;
    max-width: 112.5rem;
    margin: 0 auto;
}

.container-body {
    background-color: var(--bg-color);
    margin: 0 auto;
    color: var(--body-text-color);
}

main,
header,
footer {
    margin: 1.25rem 0;
    padding: 0 1.25rem;
    border: 0.125rem inset;
    border-image: linear-gradient(7deg, purple, red, yellow) 30;
    animation-name: border-color;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}

.container-header,
.container-footer {
    display: flex;
    justify-content: space-between;
    height: 100px;
}

.header-right,
.footer-right,
.header-left,
.footer-left {
    width: 50%;
}

#theme-switch {
    font-size: 1.5rem;
    padding: 0;
    position: absolute;
    top: 1.5%;
    right: 6%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    background-color: transparent;
    color: var(--h1-menuBtn-color);
    cursor: pointer;
}

#theme-switch i:last-child {
    display: none;
}

.darkmode #theme-switch i:first-child {
    display: none;
}

.darkmode #theme-switch i:last-child {
    display: block;
}


.btn {
    border: none;
    font-size: 2rem;
    position: absolute;
    top: 76px;
    right: 30px;
    background: transparent;
    background-color: transparent;
    color: var(--h1-menuBtn-color);
    cursor: pointer;
    z-index: 2;
}

.btn::after {
    content: '\002630';
}

ul.ul-container {
    background-color: var(--bg-color);
    transition: all 0.5s linear;
    padding-top: 1rem;
    list-style: none;
    height: 100%;
    width: 100%;
    position: fixed;
    overflow: hidden;
    top: 0;
    text-align: center;
    z-index: 1;
    border: 0.188rem solid;
    border-image: linear-gradient(7deg, rgb(13, 0, 128), red, yellow) 30;
    animation-name: border-color;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}

.close {
    left: -100%;
}

.show {
    left: 0%;
}

ul.ul-container>li {
    margin: 0 0.5rem;
}

li>a {
    display: inline-block;
    margin-top: 1.8rem;
    text-decoration: none;
    color: var(--text-link-color);
    font-size: 1.4rem;
    transition-property: all;
    transition-duration: 0.9ms;
    transition-timing-function: linear;
}

li>a:hover {
    color: var(--h1-menuBtn-color);
}

.header-left {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.logo,
.logo>img {
    max-width: 100%;
    width: 100%;
    max-width: 5rem;
    display: block;
    height: auto;
    margin-right: 0.4rem;
}

h1 {
    font-size: 1rem;
    color: var(--h1-menuBtn-color);
}

@media screen and (min-width:900px) {

    #theme-switch {
        right: 2.6%;
    }

    h1 {
        font-size: 1.2rem;
    }

    .btn {
        display: none;
    }

    ul.ul-container {
        background-color: transparent;
        padding-top: 0;
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        position: static;
        left: 0;
        border: none;
        border-image: none;
        animation-name: none;
    }

    ul.ul-container>li {
        margin-right: 1rem;
    }

    li>a {
        display: inline;
        text-decoration: none;
        color: var(--text-link-color);
        font-size: 1.3rem;
        transition-property: all;
        transition-duration: 400ms;
    }

    .logo,
    .logo>img {
        max-width: 100%;
        width: 100%;
        max-width: 4.375rem;
        margin-left: 0.4rem;
    }
}

/*....................... main ....................... */
.container-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    max-width: 93%;
    margin: 0 auto;
    padding-top: 1.75rem;
    font-size: 1rem;
    line-height: 2rem;
    color: var(--text-link-color);
}

/*..... sec-media-left image .....*/
.sec-media-left {
    margin-top: 3.25rem;
}

.img,
.img>img {
    max-width: 100%;
    width: 100%;
    min-width: 6.25rem;
    max-width: 18.75rem;
    display: block;
    margin: auto;
    margin-bottom: 3rem;
}

.border-img {
    border-bottom: 0.1rem solid var(--body-text-color);
    border-radius: 0.1rem;
}

/* ............ text ............*/
.sec-media-right {
    margin-bottom: 3.25rem;
}

.sec-media-right>h2 {
    margin-bottom: 1.25rem;
}

@media screen and (min-width:900px) {
    .sec-media {
        width: 100%;
        margin: auto;
        text-align: justify;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 0.625rem;
        font-size: 1.2rem;
    }

    .img,
    .img>img {
        margin-right: 1.5rem;
    }

    .sec-media-right {
        padding-top: 6rem;
        max-width: 50%;
    }
}

.space {
    margin-top: 2.25rem;
    margin-bottom: 1.25rem;
}

/* ................ cards ................ */


.items>h3 {
    margin-bottom: 3rem;
}

.items>section.cards {
    display: flex;
    flex-direction: column;
}

section.cards>.card {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 1.75rem;
    margin-right: 1rem;

    border-radius: 0.3rem;
    background: linear-gradient(to right, rgba(196, 244, 252, 0.103), var(--bg-color),
            rgba(196, 244, 252, 0.103));
}

.card>div.svg,
.svg>img {
    max-width: 100%;
    width: 100%;
    max-width: 5rem;
    display: block;
    height: auto;
}

body.darkmode .svg>img {
    filter: invert(75%);
}

.card>h4,
div.svg,
.card {
    margin-bottom: 0.8125rem;
}

@media screen and (min-width:900px) {
    .items>section.cards {
        flex-direction: row;
    }
}

/* ............................ footer ............................ */

.footer-left {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.icons {
    margin-left: 0.9rem;
}

.icons>a {
    font-size: 1.8rem;
    margin-right: 0.9rem;
    color: #1c2541;
    filter: blur(0.031rem);
}

.icons>a:hover i.fa-github {
    color: var(--body-text-color);
    filter: blur(0rem);
}

.icons>a:hover i.fa-telegram {
    color: #24abeb;
    filter: blur(0rem);
}

.icons>a:hover i.fa-instagram {
    color: transparent;
    background-image: linear-gradient(90deg, red, blue);
    background-clip: text;
    filter: blur(0rem);
}

@media screen and (min-width :400px) {
    .icons>a {
        margin-right: 1rem;
    }
}

.footer-right {
    display: flex;
    justify-content: end;
    align-items: center;
}

p.design {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--body-text-color);
    font-style: italic;
    text-transform: capitalize;
    text-align: center;
}

/*.................. animation ...................*/
@keyframes border-color {
    10% {
        border-image: linear-gradient(7deg, purple, red, yellow) 5;
    }

    30% {
        border-image: linear-gradient(7deg, yellow, purple, red) 5;
    }

    60% {
        border-image: linear-gradient(7deg, red, rgb(255, 255, 0), purple) 5;
    }

    100% {
        border-image: linear-gradient(7deg, purple, red, yellow) 5;
    }
}