:root {
    --color-primary: #080a0d;
    --color-secondary: #1e232b;
    --color-third: #000000;
    --color-accent: #8066ff;
    --color-accent-dark: #8800F0;
    --color-accent-opacity: #8066ff40;
    --color-accent-box-shadow: 0 4px 12px 4px #8800f033;
    --color-accent-gradient: linear-gradient(99deg, rgba(128, 102, 255)20%, rgba(136, 0, 240)100%);
    /*
    --color-accent: #a633fd;
    --color-accent-dark: #5b00f0;
    --color-accent-opacity: #8800f040;
    ===================================
    --color-accent: #5b00f0;
    --color-accent-dark: #a633fd;
    --color-accent-opacity: #5b00f040;
    */
    --color-text: #bbbbbb;
    --color-secondary-text: #858992;
    --color-third-text: #ffffff;
    --family-font: sans-serif;
    --font-size: 13.5pt;
    --font-secondary-size: 11pt;
}

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

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
    position: relative;
    height: 100vh;
}

body {
    background-color: var(--color-primary);
}

body img {
    user-select: none;
}

/* Alerts Styles */
.alert {
    padding: 20px 40px;
    min-width: 420px;
    position: absolute;
    right: 0;
    top: 84px;
    overflow: hidden;
    border-radius: 4px;
    font-family: var(--family-font);
}

.alert.success {
    background: #a7ff9b;
    border-left: 8px solid #2cff02;
}

.alert.warning {
    background: #ffdb9b;
    border-left: 8px solid #ffa502;
}

.alert.danger {
    background: #ff9b9b;
    border-left: 8px solid #ff0202;
}

.alert.warning.show {
    animation: show_slide 1s ease forwards;
}

@keyframes show_slide {
    0% {
        transform: translateX(100%);
    }

    40% {
        transform: translateX(-10%);
    }

    80% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-10px);
    }
}

.alert.hide {
    display: none;
}

.alert .msg {
    padding: 0 20px;
    font-size: 18px;
}

.alert.success .msg {
    color: #18ce00;
}

.alert.warning .msg {
    color: #ce8500;
}

.alert.danger .msg {
    color: #ce0000;
}

.alert .close-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: #ffd080;
    padding: 20px 18px;
    cursor: pointer;
}

.alert.success .close-btn {
    color: #07ce00;
}

.alert.warning .close-btn {
    color: #ffd080;
}

.alert.danger .close-btn {
    color: #ce0000;
}

.close-btn.success:hover {
    background: #73ff66;
}

.close-btn.warning:hover {
    background: #ffc766;
}

.close-btn.danger:hover {
    background: #ff6666;
}


/* =========== Section Home =========== */
.home-section {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 105px;
    gap: 100px;
    color: var(--color-text);
    font-family: var(--family-font);
}

.home-section .text {
    flex: 5;
    max-width: 1000px;
}

.home-section .text h2 {
    color: var(--color-third-text);
    font-size: 45px;
}

.home-section .profile {
    display: flex;
    margin: 0;
    padding: 0;
}

.home-section .profile img {
    width: 500px;
    height: auto;
    border-radius: 50%;
}

.gradient {
    font-size: 45px;
    color: #8066FF;
    position: relative;
    background: linear-gradient(99deg, rgba(128, 102, 255, 1) 50%, rgba(136, 0, 240, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media (max-width: 1150px) {

    .home-section .text h2,
    .home-section .text .gradient {
        font-size: 35px;
    }

    .home-section {
        flex-direction: column;
        gap: 60px;
    }

    .home-section .profile img {
        width: 325px;
        height: auto;
    }
}

@media (max-width: 800px) {
    .home-section .text {
        font-size: 13px;
    }

    .home-section .text h2,
    .home-section .text .gradient {
        font-size: 25px;
    }

    .home-section {
        padding: 0 55px;
        margin-top: 120px;
        gap: 40px;
    }

    .home-section .profile img {
        width: 200px;
        height: auto;
    }
}

@media (max-width: 430px) {
    .home-section .text {
        font-size: 9px;
    }

    .home-section .text h2,
    .home-section .text .gradient {
        font-size: 18px;
    }
}

/* =========== Section About Me =========== */
.about-me-section {
    position: relative;
    height: 100vh;
    width: 100%;
    background-color: var(--color-third)
}

/* =========== Section Skills =========== */
.skills-section {
    position: relative;
    height: 100vh;
    width: 100%;
    padding: 0 60px;
    margin-bottom: 100px;
    color: var(--color-text);
    font-family: var(--family-font);
}

.skills-section h2 {
    text-align: center;
    color: var(--color-third-text);
    font-size: 35px;
}

.skills-section .text {
    text-align: center;
    margin-bottom: 20px;
}

.skills-section .cells {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.skills-section .cells .cell {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 200px;
    padding: 18px 20px;
    margin: 10px;
    border: 1.5px solid var(--color-secondary);
    border-radius: 5px;
}

.skills-section .cells .cell img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    border-radius: 2px;
}

.skills-section .cells .cell p,
span {
    font-size: 18px;
}

.skills-section .cells .cell a {
    text-decoration: none;
    color: var(--color-third-text);
}

@media (max-width: 1150px) {
    .skills-section {
        padding: 0 105px;
    }

    .skills-section .cells .cell span {
        font-size: 16px;
    }
}

@media (max-width: 800px) {
    .skills-section {
        padding: 0 55px;
    }

    .skills-section h2 {
        font-size: 25px;
    }

    .skills-section .text {
        font-size: 13px;
    }
}

@media (max-width: 550px) {
    .skills-section .cells .cell {
        padding: 10px 10px;
        justify-content: baseline;
    }

    .skills-section .cells .cell img {
        width: 20px;
        height: 20px;
    }

    .skills-section .cells .cell a span {
        font-size: 12px;
    }
}

@media (max-width: 430px) {
    .skills-section h2 {
        font-size: 18px;
    }

    .skills-section .text {
        font-size: 9px;
    }

    .skills-section .cells .cell img {
        width: 15px;
        height: 15px;
    }

    .skills-section .cells .cell a span {
        font-size: 10px;
    }
}

/* =========== Section Skills =========== */
.services-section {
    position: relative;
    height: 100vh;
    width: 100%;
    background-color: var(--color-third)
}

/* =========== Section Projects =========== */
.projects-section {
    position: relative;
    height: 100vh;
    width: 100%;
}

/* =========== Content Section =========== */
.contact-section {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 105px;
    color: var(--color-third-text);
    font-family: var(--family-font);
}

.contact-section h2 {
    font-size: 45px;
}

.contact-section .group {
    display: flex;
    gap: 100px;
}

.contact-section .group .text {
    flex: 3;
    margin-top: 20px;
}

.contact-section .group form {
    flex: 3;
    display: flex;
    flex-direction: column;
}

.contact-section .group form label {
    margin-bottom: 5px;
}

.contact-section .group form input,
.contact-section .group form textarea {
    border: 2px solid var(--color-secondary);
    color: var(--color-third-text);
    background-color: transparent;
    padding: 10px;
    margin-bottom: 15px;
    outline: none;
    resize: none;
    border-radius: 5px;
    font-family: var(--family-font);
}

.contact-section .group form .g-recaptcha {
    margin-bottom: 15px;
}

.contact-section .group form input:focus,
.contact-section .group form textarea:focus {
    border: 2px solid var(--color-accent);
}

.contact-section .group form button {
    font-size: 16px;
    color: var(--color-third-text);
    background: var(--color-accent-gradient);
    background-position: right;
    background-repeat: no-repeat;
    background-size: 0% 100%;
    background-color: var(--color-accent);
    box-shadow: var(--color-accent-box-shadow);
    border: none;
    border-radius: 5px;
    height: 50px;
    cursor: pointer;
    transition: background-size 500ms ease, background-color 500ms ease;
}

.contact-section .group form button:hover {
    background-size: 100% 100%
}

.contact-section .group form input,
.contact-section .group form textarea {
    padding-left: 40px;
}

.input-with-icon {
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 20px 20px;
    padding-left: 50px;
    color: var(--color-secondary-text);
}

.textarea-with-icon {
    background-repeat: no-repeat;
    background-position: 10px 10px;
    background-size: 20px 20px;
    padding-left: 50px;
    padding-top: 40px;
    color: var(--color-secondary-text);
}


.name-icon {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23858992"><path d="M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-160v-112q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v112H160Zm80-80h480v-32q0-11-5.5-20T700-306q-54-27-109-40.5T480-360q-56 0-111 13.5T260-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T560-640q0-33-23.5-56.5T480-720q-33 0-56.5 23.5T400-640q0 33 23.5 56.5T480-560Zm0-80Zm0 400Z"/></svg>');
}

.email-icon {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23858992"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm320-280L160-640v400h640v-400L480-440Zm0-80 320-200H160l320 200ZM160-640v-80 480-400Z"/></svg>');
}

.message-icon {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23858992"><path d="M240-400h320v-80H240v80Zm0-120h480v-80H240v80Zm0-120h480v-80H240v80ZM80-80v-720q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H240L80-80Zm126-240h594v-480H160v525l46-45Zm-46 0v-480 480Z"/></svg>');
}

.input-with-icon::placeholder,
.textarea-with-icon::placeholder {
    color: var(--color-secondary-text);
    opacity: 1;
}

@media (max-width: 1350px) {
    .contact-section .group {
        flex-direction: column;
    }
}

@media (max-width: 800px) {
    .contact-section {
        padding: 0 35px;
    }
}

@media (max-width: 660px) {
    .contact-section {
        height: 100%;
        margin-top: 84px;
        margin-bottom: 87px;
    }

    .contact-section .group {
        gap: 50px;
    }
}

/* =========== Privacy Policy Section =========== */
.privacy-policy-section {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-primary);
    color: var(--color-third-text);
    font-family: var(--family-font);
    font-size: 70px;
}