@import url(../variables.css);
@import url(../font.css);
@import url(../animation.css);
@import url(../header.css);
@import url(../footer.css);

body{
    background: var(--bodyBackgroundColor);
}
/* 
 █▄ ▄█ ▄▀▄ █ █▄ █
 █ ▀ █ █▀█ █ █ ▀█
 */

.devIntro{
    width: clamp(200px, 97%, 1000px);
    margin: auto;
}
.devIntro h1{
    font-size: 5dvw;
    color: var(--developerThemeColor);
    margin-bottom: 0;
}
.devIntro h2{
    color: lightskyblue;
    font-size: 4dvw;
    margin: 0;
    text-align: left;

}
.devIntro h2 span{
    color: lightseagreen;
}
.devIntro h3{
    font-size: 5dvw;
    margin-top: 0;
    color: var(--developerThemeColor);
}

section{
    width: clamp(200px, 97%, 1000px);
    margin: 5rem auto;
    h2{
        font-size: 5dvw;
        color: var(--developerThemeColor);
    }
}

.projects{
    a{
        display: flex;
        justify-content: space-between;
        color: var(--text-color);
        font-size: 3rem;
        margin: 1rem;
        border: solid 1px rgb(133, 133, 133);
        border-radius: 10px;
    }
    .writeCode{
        width: 10rem, 100%, 60rem;
        margin: 1rem;
        text-align: left;
        p{
            font-size: 2rem;
            margin: 0;
            padding: 0;
            color: white;
        }
       
    }
    .executeCode{
        width: clamp(10rem, 100%, 40rem);
        margin: 1rem;
        text-align: center;
        border-radius: 10px;
    background: #242424;
    box-shadow: inset 20px 20px 60px #1a1a1a,
                inset -20px -20px 60px #232323;
                h3{
                    margin: 1rem;
                    white-space: no-wrap;
                    font-size: 3rem;
                  }
                  p{
                    margin: 1rem;
                  }
                img{
                  width: 7rem;
                  height: 7rem;
                  border-radius: 40%; 
                  margin: 2rem;
                }
    }
}
.flexReverse{
    display: flex;
    justify-content: space-evenly;
}
.pricingList{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}
.Pricing{
       
    div{
        padding: 1rem;
    }
    h3{
        font-size: 4rem;
        color: aquamarine;
    }
    p{
        font-size: 2.5rem;
        color: lightskyblue;
    }
    p:last-of-type{
        color: lightsalmon;
    }
    span{
        font-size: 4rem;
        color: lightpink;
    }
    li{
        font-size: 2rem;
        color: goldenrod;
        list-style-type: disc;
        text-align: left;
    }
}

.languageList{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    text-align: center;
    p{
        font-size: 4rem;
        color: lightskyblue;
    }
}