@import './variables.css';

/* THEME DESIGN */

body,
a,
h1,
h2,
h3,
h4,
h5,
p {
    font-family: "theme-font" !important;
}

.text-light li a,
.text-light {
    color: var(--light);
}

button.amd-primary-btn,
a.amd-primary-btn {
    background: var(--primary-color);
    text-transform: capitalize;
    color: white;
    border-radius: var(--thm-radius);
    transition: .3s;
    padding: 5px 20px;
}

button.amd-primary-btn:hover,
a.amd-primary-btn:hover {
    background: var(--secondary-color);
}

button.amd-outlined-btn,
a.amd-outlined-btn {
    border: 1px solid var(--primary-color)!important;
    color: var(--primary-color)!important;
    text-transform: capitalize!important;
    border-radius: var(--thm-radius)!important;
    transition: .3s!important;
    background: transparent;
    padding: 5px 20px;
}

button.amd-outlined-btn:not([disabled]):hover,
button.amd-secondary-btn:hover,
a.amd-outlined-btn:not([disabled]):hover,
a.amd-secondary-btn:hover {
    background: var(--primary-color);
    color: var(--light)!important;
}

button.amd-secondary-btn,
a.amd-secondary-btn {
    background: var(--secondary-color)!important;
    text-transform: capitalize!important;
    color: white!important;
    border-radius: var(--thm-radius)!important;
    transition: .3s;
}

button[disabled],
a[disabled] {
    filter: grayscale(90%);
}


/* Header navbar */

.amd-header {
    z-index: 10;
    position: absolute;
    width: 100%;
}

.amd-header #header-grid {
    background-color: #fff;
    margin: 10px;
    border-radius: var(--thm-radius);
    overflow: hidden;
}

.amd-header #header-grid nav {
    border-radius: var(--thm-radius);
}


/* Banner */

.amd-banner {
    background: radial-gradient(90em at 90% 80%, #063d63 0, #fff 100%);
}

.amd-description h1 {
    margin: 0;
}

.amd-description p {
    line-height: 1.5;
}

.amd-banner-counter .elementor-counter-number-prefix {
    display: none;
}

.amd-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.amd-skills .skill {
    padding: 2px 20px;
    border-radius: 20px;
    text-transform: capitalize;
}

.frontend .skill {
    border: 1px solid #0051ffde;
    background: #0051ff2f;
    color: #0051ffde;
}

.backend .skill {
    border: 1px solid #318434;
    color: #086102;
    background: #31843438;
}

.devops .skill {
    border: 1px solid #84317B;
    color: #84317B;
    background: #84317a3b;
}

.others .skill {
    border: 1px solid #E58916;
    color: #E58916;
    background: #e588163b;
}


/* git activity */

.git-activity {
    display: flex;
    width: 100%;
    gap: 2px
}

.git-activity .weeks {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.git-activity .weeks span {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--activity-git);
    filter: brightness(min(2, calc(0.5 + (1.5 / 9) * (attr(data_value number) - 1))));
}

.git-activity .weeks span[data_value="0"] {
    background: rgba(0, 0, 0, 0.233);
}


/* MOSAIC POSTS */

#mosaic_posts {
    width: 80%;
    margin: auto;
}

#mosaic_posts .item {
    break-inside: avoid;
    max-height: 700px;
    width: calc(100% / 3 - 20px);
    height: max-content;
    border-radius: var(--thm-radius);
    box-shadow: 1px 1px 8px 8px #ebebeb;
    margin-bottom: 40px;
    overflow: hidden;
}

@media screen and (max-width: 750px) {
    #mosaic_posts .item {
        width: 100%;
    }
}

@media screen and (min-width:750px) and (max-width: 1200px) {
    #mosaic_posts .item {
        width: calc(100% / 2 - 10px);
    }
}

#mosaic_posts .item .thumbnail {
    border-radius: 0 0 40px 0;
    height: 180px;
}

#mosaic_posts .item .description,
#mosaic_posts .item h4 {
    padding: 0 20px;
}

#mosaic_posts .item .links {
    padding: 20px;
}

#mosaic_posts+button#load-more-realisations {
    display: flex;
    margin: auto;
}


/* SINGLE POST  */

.amd-single-post {}

.amd-single-post .header-banner {
    background: radial-gradient(90dvh at 50% 0%, #063d63 0%, #fff 100%);
    height: 90dvh;
    display: flex;
    flex-direction: column;
    position: relative;
}

.amd-single-post .header-banner a {
    position: absolute;
    left: calc(50% - 20px);
    bottom: 200px;
}

.amd-single-post .header-banner .title-card {
    margin: auto;
    padding: 40px;
    text-align: center;
    width: 50%;
    border-radius: 20px;
    background: #fefefe25;
}

.amd-single-post .header-banner .title-card h1 {
    color: #fff;
    text-transform: uppercase;
    font-weight: 400;
}

.amd-single-post .header-banner .title-card .terms {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 80%;
    margin: auto;
    justify-content: center;
}

.amd-single-post .header-banner .title-card .terms span {
    padding: 5px 20px;
    border-radius: 20px;
    border: 1px solid #000;
    text-transform: uppercase;
}