* {
    margin: 0;
    padding: 0;
    font-family: poppins;
    box-sizing: border-box;
    transition: all 0.2s ease-in-out;
    scroll-behavior: smooth;
    /* border: 1px solid white; */
}
body {
    height: 100%;
    width: 100%;
    color: rgb(35, 196, 142);
    background-color: black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#circle {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 10px;
    border-radius: 100%;
    background-color: rgb(35, 196, 142);
}
nav {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: start;
    background-color: black;
    padding: 25px;
    width: 100%;
    height: 6rem;
}
nav h2 {
    margin-right: auto;
}
main {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}
#links a {
    color: rgb(35, 196, 142);
    font-size: 1.2rem;
    padding: 5px;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease-in-out;
}
#links a:hover {
    border-bottom: 2px solid rgb(35, 196, 142);
}
.cards {
    margin-top: 1rem;
    padding: 1.8rem;
    width: 45rem;
    display: flex;
    text-align: center;
    background-color: #171717;
    border-radius: 1.5rem;
    border: 2px solid darkslategrey;
}
#info {
    padding: 0.75rem 1.2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40%;
    border-radius: 5px 0px 0px 5px;
    border-right: 2px solid darkslategrey;
    h2 {
        border-bottom: 2px solid darkslategrey;
    }
}
#picture {
    margin-bottom: 1.2rem;
    border-radius: 100%;
    width: 90%;
    border: 4px solid rgb(35, 196, 142);
}
#details {
    padding: 10px 20px;
    text-align: start;
    width: 60%;
    border-radius: 0px 5px 5px 0px;
    h1 {
        font-size: 6rem;
    }
    p {
        color: rgb(25, 147, 106);
    }
}
.sectionTitle {
    scroll-margin-top: 8rem;
    margin-top: 3.5rem;
    width: 45rem;
    justify-self: flex-start;
    display: flex;
    align-items: center;
}
.sectionTitle h2 {
    font-size: 2rem;
}
#skillSet {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.skills {
    display: flex;
    width: 10rem;
    height: 10rem;
    padding: 20px;
    margin: 1rem;
    border-radius: 1rem;
    border: 2px solid darkslategray;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2b2a2a;
    background-size: 80%;
    background-position: 50%;
    background-repeat: no-repeat;
}
.skills:hover {
    scale: 1.25;
    border: 2px solid white;
    background-color: #434343;
}
#C {
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/C_Programming_Language.svg/926px-C_Programming_Language.svg.png");
}
#HTML5 {
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/512px-HTML5_logo_and_wordmark.svg.png");
}
#CSS {
    background-size: 60%;
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/d/d5/CSS3_logo_and_wordmark.svg");
}
#JavaScript {
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Unofficial_JavaScript_logo_2.svg/1200px-Unofficial_JavaScript_logo_2.svg.png");
}
#Python {
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Python-logo-notext.svg/2048px-Python-logo-notext.svg.png");
}
#projects {
    flex-wrap: wrap;
}
.project {
    flex-direction: column;
    text-align: start;
    padding: 1rem 2rem;
    margin: 1rem;
    width: 50rem;
    height: 20rem;
    border-radius: 10px;
    border: 2px solid darkslategray;
    display: flex;
    justify-content: space-evenly;
    background-color: #2b2a2a;
    transition: all 0.1s ease-in-out;
}
.project p {
    color: rgb(25, 147, 106);
}
.project a {
    margin-top: 1rem;
    padding: 1rem;
    background: linear-gradient(to right, rgb(4, 4, 194), rgb(72, 72, 255));
    color: white;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 0.75rem;
    width: 20%;
    text-align: center;
    transition: all 0.2s ease-in-out;
    border: 2px solid rgb(4, 4, 194);
}
.project a:hover {
    scale: 1.1;
    border: 2px solid white;
}
#decisionator {
    background: linear-gradient(to right, black 0%, black 30%, transparent), url(Assets/image.png);
    background-size: cover;
    background-repeat: no-repeat;
}
#sms {
    background: linear-gradient(to right, black 0%, black 30%, transparent), url(Assets/image\ copy.png);
    background-size: cover;
    background-repeat: no-repeat;
}
#Contact {
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
}
.contactMethods {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    background-color: #2b2a2a;
    border-radius: 0.5rem;
    border: 2px solid darkslategray;
    color: rgb(35, 196, 142);
    padding: 1rem;
    margin: 1rem;
    text-decoration: none;
    font-weight: 600;
}
.contactMethods:hover {
    scale: 1.1;
    border: 2px solid white;
    background-color: #333;
}
.contactMethods img {
    width: 2rem;
}
.contactMethods p {
    font-size: 1rem;
}
.contactMethods img,
p {
    padding: 0.4rem;
}
footer {
    width: 100%;
    height: 10rem;
    margin-top: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #171717;
    div {
        display: flex;
        padding: 1rem;
    }
    p {
        font-size: 1rem;
        font-weight: 500;
    }
}
#githubPortfolioRepo {
    border-right: 2px solid darkslategrey;
}
#githubPortfolioRepo,
#Cloudflare {
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 2px solid darkslategray;
    img {
        height: 2.5rem;
    }
    a {
        border-radius: 0.5rem;
        background-color: white;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    a:hover {
        scale: 1.1;
    }
}
@media (max-width: 850px) {
    * {
        font-size: 1rem;
    }
    .cards,
    .sectionTitle {
        width: 40rem;
    }
}
@media (max-width: 768px) {
    * {
        font-size: 2.75dvw;
    }
    .cards,
    .sectionTitle {
        width: 90%;
    }
    .project a {
        padding: 0.5rem;
    }
}