main {
    margin-top: 95vh;
    margin-left: auto;
    margin-right: auto;
    max-width: 960px;
    padding: 60px 20px;
    transition: ease-in-out 200ms;
}

main h3 {
    color: var(--header_3);
    margin-bottom: 10px;
    transition: all ease 1s !important;
}

main li {
    margin-left: 30px;
}

/* SECTIONS */
.section {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
    transition: 0.6s ease;
    margin-bottom: 26px;
}

.section.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* CARD */
.card {
    background: var(--card);
    padding: 26px;
    border-radius: 14px;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    box-shadow: 0 6px 18px var(--card_shadow);
}

.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 36px var(--card_shadow);
}

.card p {
    text-indent: 16px;
}

/* GRID */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

/* LANGUAGE GRID */
.lang-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 20px;
    margin-top: 28px;
}

.lang {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--tools_txt);
}

.lang svg, .lang img {
    width: 42px;
    height: 42px;
    background-color: var(--tools_bg);
    border-radius: 2px;
    padding: 2px;
}

.lang svg:hover, .lang img:hover {
    cursor: pointer;
    transition: all 0.1s ease-in-out;
    transform: translateY(-3px);
}

/* Interests */
.interests-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    font-size: 0.9rem;
    color: var(--interests_txt);
}

.interest {
    margin-left: 15%;
    margin-right: auto;
}


/* Awards */
.award {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.award img {
    width: 46px;
    height: 46px;
}

.award img:hover {
    cursor: pointer;
    transition: all 0.1s ease-in-out;
    transform: translateY(-3px);
}

/* Contact form */
.contact {
    /* margin-top: 26px;
    padding: 25px;
    background: var(--card);
    border-radius: 12px;
    transition: 0.4s ease; */
}

.contact input,
.contact textarea {
    width: 100%;
    margin-top: 10px;
    padding: 12px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
}

.contact input {
    background-color: var(--contact_input);
}
.contact input::placeholder {
    color: var(--contact_input_ph);
}

.contact textarea {
    background-color: var(--contact_txt_area);
    resize: vertical;
    max-height: 252px;
    min-height: 42px;
    overflow-y: scroll;
}
.contact textarea::placeholder {
    color: var(--contact_txt_area_ph);
}

.contact button {
    margin-top: 10px;
    padding: 12px;
    width: 100%;
    border: none;
    color: var(--contact_btn_txt);
    background: var(--contact_btn);
    border-radius: 6px;
    font-size: 16px;
    transition: ease-in-out 0.5s;
}

.contact button:hover {
    cursor: pointer;
    filter: invert(1);
}


.year {
    color: var(--exp_year);
}

.experience {
    color: var(--exp_exp);
}

.company {
    color: var(--exp_company);
}

/* resizing */

@media (max-width: 1024px) {
    main {
        padding-left: 32px;
        padding-right: 32px;
    }
}

@media (max-width: 600px) {
    main {
        padding: 50px 32px;
    }
    main li {
        margin-left: 25px;
    }
}