/* --------- VARIABLES AND GENERAL STYLES ---------- */

:root {
    --primary-color: #FC1A0D;
    --neutral-color-0: #ffffff;
    --neutral-color-25: #D9D9D9;
    --neutral-color-50: #2d2d2d;
    --neutral-color-100: #000000;

    /* COLOR PRIMITIVE RED */
    --color-primitive-red-10: #FFE8E7;
    --color-primitive-red-20: #FFBFBB;
    --color-primitive-red-30: #FF9690;
    --color-primitive-red-40: #FF6D64;
    --color-primitive-red-50: #FF4339;
    --color-primitive-red-60: #FC1A0D;
    --color-primitive-red-70: #D30C00;
    --color-primitive-red-80: #AA0900;
    --color-primitive-red-90: #820700;
    --color-primitive-red-100: #590500;

    /* COLOR PRIMITIVE GREEN */
    --color-primitive-green-10: #F6FFF1;
    --color-primitive-green-20: #DBFFC8;
    --color-primitive-green-30: #C0FF9E;
    --color-primitive-green-40: #A6FF75;
    --color-primitive-green-50: #91E762;
    --color-primitive-green-60: #7ACA4F;
    --color-primitive-green-70: #65AD3D;
    --color-primitive-green-80: #51902E;
    --color-primitive-green-90: #3E7221;
    --color-primitive-green-100: #2C5515;

}



html {
    scroll-behavior: smooth;
}

body {
    margin: 0px 30px;
    font-family: 'Raleway', sans-serif;
    font-size: 24px;
    color: var(--primary-color);
    /* padding-top: 70px; */
}

section {
    height: 100vh;
    align-items: center;
    scroll-margin-top: 7rem;
}

h1 {
    font-family: 'Playfair Display', serif;
    font-size: 6.5rem
        /* 96px */
    ;
    color: var(--primary-color);
}

h2 {
    font-family: 'Raleway', sans-serif;
    font-size: 3rem
        /* 40px */
    ;
    color: var(--primary-color);
}

h3 {
    font-size: 2.25rem;
    /* 36px */
}

h4 {
    font-size: 1.6875rem;
    /* 27px */
}

h5 {
    font-size: 1.25rem;
    /* 20px */
}

h6 {
    font-family: 'Raleway', sans-serif;
    font-size: 0.8rem;
}

/* --------- NAVBAR ---------- */

.navbar {
    font-family: 'Raleway', sans-serif;
}

.navbar-brand {
    color: var(--primary-color);
    font-weight: bold;
}

/* --------- WHO AM I SECTION ---------- */

.whoami-section {
    justify-content: center;
    align-items: center;
}

.whoami-img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    filter: grayscale(100%);
}

.whoami-img-container {
    z-index: -1;
}

.content-presentation {
    margin-right: -15%;
}

/* --------- PORTFOLIO SECTION ---------- */
.portfolio-section {
    background-color: #fff;
}

.filter-btn {
    text-decoration: none;
    font-weight: normal;
    font-size: 0.9rem;
    cursor: pointer;
    color: var(--primary-color);
}
.filter-btn:hover {
    color: var(--neutral-color-50);
}

.filter-btn.active {
    font-weight: bold;
    color: var(--primary-color);
}

.card {
    border: none;
    border-radius: 1rem;
    transition: transform 0.3s ease;
}

.card:hover {
    transform: scale(1.05);
}

.project-item .card {
    min-height: 8rem;
    justify-content: center;
}

.project-item .project-link {
    color: var(--primary-color);
    text-decoration: none;
}

.project-item .project-link:hover {
    color: var(--neutral-color-50);
}

.project-item .subtitle {
    font-size: 0.8rem;
}

/* --------------------- TO DO LIST PROJECT --------------------- */

.input-group {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

input[type="text"] {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
}

.button-add-task {
    padding: 10px 15px;
    border: none;
    background: #28a745;
    color: white;
    border-radius: 6px;
    cursor: pointer;
}

.button-add-task:hover {
    background: #218838;
}

ul.task-list {
    list-style: none;
    padding: 0;
}

.navbar-nav .nav-item .nav-link {
    color: var(--primary-color);
}

.navbar-nav .nav-item .nav-link:hover {
    color: var(--neutral-color-50);
}

ul.task-list>li {
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 6px;
    display: flex;
    align-items: center;
}

ul.task-list>li.completed {
    text-decoration: line-through;
    color: var(--primary-color);
}

ul.task-list>li button {
    background: var(--primary-color);
    border: none;
    color: white;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-left: 10px;
    border-radius: 4px;
    cursor: pointer;
}

/* --------------------- DICE PROJECT --------------------- */

ul.roll-history {
    list-style: none;
    padding: 0;
}

ul.roll-history>li {
    align-items: center;
    font-size: 1em;
    padding-bottom: 12px;
    display: flex;
    justify-content: center;
}

ul.roll-history>li span {
    font-size: 2em;
    align-items: center;
    padding-left: 20px;
    padding-bottom: 7px;
}

.dice {
    font-size: 7rem;
    margin: 5px;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.roll-animation{
    animation-name: roll;
}

.roll-btn{
    padding: 10px 15px;
    border: none;
    background: var(--color-primitive-green-70);
    color: var(--neutral-color-0);
    border-radius: 6px;

}

.roll-btn:hover {
    background: var(--color-primitive-green-80);
}

@keyframes roll{
    0%{
        transform: rotateY(0deg) rotateX(0deg);
    }   

    100%{
        transform: rotateY(720deg) rotateX(720deg);
    }
}