:root {
    --Green: hsl(75, 94%, 57%);
    --White: hsl(0, 0%, 100%);
    --Grey: hsl(0, 0%, 20%);
    --DarkGrey: hsl(0, 0%, 12%);
    --OffBlack: hsl(0, 0%, 8%);
}
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body {
    background-color: var(--OffBlack);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 100px;
}
.container {
    width: 330px;
    border-radius: 1rem;
    align-items: center;
    justify-content: center;
    background-color: var(--DarkGrey);
}
.img-container {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 10px;
}

img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
}
.header {
    display: flex;
    align-items: center;
    justify-content: center;
}
.info {
    display: flex;
    align-items: center;
    justify-content: center;
}
.name {
    color: var(--White);
}
.top {
    padding-bottom: 0.5rem;
}
.middle {
    padding-bottom: 1.2rem;
    font-weight: 600;
}
.bottom {
    padding-bottom: 1rem;
    font-weight: 400;
}
.addres {
    color: var(--Green);
}
.skills {
    color: var(--White)
}
.items {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding-bottom: 2rem;
}
.item {
    width: 80%;
    height: 40px;
    background-color: var(--Grey);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    transition: 0.5s;
}
.item:hover {
    background-color: var(--Green);
    .link {
        color: var(--OffBlack);
    }
}
.link {
    color: var(--White);
    text-decoration: none;
    font-weight: 600;
}
@media screen and (max-width: 375px) {
    .container {
        width: 90%;
    }
}