/* FONT IMPORT */

@font-face {
    font-family: coolvetica;
    src: url(./fonts/Coolvetica/Coolvetica\ Rg.otf);
}

@font-face {
    font-family: open-sans;
    src: url(./fonts/OpenSans/OpenSans-VariableFont_wdth,wght.ttf);
}

/* GENERAL CSS */

:root {
    --fake-white: #FAF9F6;
    --fake-grey: #858686;
    --fake-black: #262626;
    --bg-color: #f5e9e1;
    --mockup-bg-grey: #e6e4e3;

    --navbar-font-family: coolvetica;
    --font-family: open-sans;

    --intro-color: #d8125a;
    --work-color: #262626;
    --hobbies-color: #66b32e;
    --carreer-color: #354f9e;
    --contact-color: #fbbb44;
    /* #7acad8 */

    font-family: var(--font-family);

    --work-cover-image-opacity-1: 1;
    --work-cover-image-opacity-2: 0;
    --work-cover-image-opacity-3: 0;
}

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

/* BASICS */

.no-select,
a {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Old versions of Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

/* TRUE CSS */

body {
    display: flex;
    width: 100vw;
    height: 100vh;

    margin: 0;
    overflow: hidden;
    transition: all 0.15s ease-out;
    background-color: var(--bg-color);
}

.darker-body {
    background-color:var(--fake-black);
}

.title-EB {
    font-size: 32px;
    font-weight: 800;
    font-family: open-sans;
}

.text-SB {
    font-size: 18px;
    font-weight: 600;
    font-family: open-sans;
}

.grey {
    color: var(--fake-grey);
}

.button-base {
    cursor:pointer;
}

.button-base:hover{
    filter:brightness(85%);
}

.button-base:active {
    filter: brightness(75%);
}

/* NAVBAR */

.navbar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    width: 200px;
    padding: 15px 20px;
    gap: 15px;

    font-family: var(--navbar-font-family);
}

.navbar-category-button {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position:relative;

    width: 100%;
    padding: 15px 12.5px;
    flex-grow: 0.5;

    transition: all 0.3s ease-in-out!important;
    border-radius: 20px;
    cursor: pointer;
}

.navbar-category-button:not(.active-navbar-element):hover {
    color: var(--fake-black) !important;
    border: 2px solid var(--fake-black) !important;
    background-color: rgba(0, 0, 0, 0) !important;
}

.darker-body .navbar-category-button:not(.active-navbar-element):hover {
    color: var(--fake-white) !important;
    border: 2px solid var(--fake-white) !important;
    background-color: rgba(0, 0, 0, 0) !important;
}

.navbar-category-button p {
    margin: 0;
}

.navbar-category-button p:nth-child(1) {
    font-size: 16px;
}

.navbar-category-button p:nth-child(2) {
    font-size: 18px;
}

.active-navbar-element {
    flex-grow: 3;
}

.landing,
#landing-button {
    color: var(--fake-black);
    border: 2px solid var(--fake-white);
    background-color: var(--fake-white);
}

.intro,
#intro-button {
    color: var(--fake-white);
    border: 2px solid var(--intro-color);
    background-color: var(--intro-color);

}

.work,
#work-button {
    color: var(--fake-white);
    border: 2px solid var(--work-color);
    background-color: var(--work-color);
}

.hobbies,
#hobbies-button {
    color: var(--fake-white);
    border: 2px solid var(--hobbies-color);
    background-color: var(--hobbies-color);
}

.carreer,
#carreer-button {
    color: var(--fake-white);
    border: 2px solid var(--carreer-color);
    background-color: var(--carreer-color);
}

.contact,
#contact-button {
    color: var(--fake-black);
    border: 2px solid var(--contact-color);
    background-color: var(--contact-color);
}

/* CONTENT */

#main {
    display: flex;
    flex-direction: column;

    width: calc(100% - 200px);
    padding-left: 0;
    padding-right: 20px;

    overflow-y: scroll;
}

.main-category-wrapper {
    padding-top: 15px;
}

.main-category-wrapper:last-child {
    padding-bottom: 15px;
}

.main-category-div {
    width: 100%;
    min-height: calc(100vh - 30px);
}

.category-divider {
    display: flex;
    align-items: center;

    width: 100%;
    height: 80px;

    padding: 15px;
    margin-bottom: 15px;
    border-radius: 20px;
}

.category-divider .category-divider-title {
    display: flex;
    align-items: center;
    gap: 7.5px;
}

.category-divider i {
    font-size: 36px;
    line-height: 36px;

    font-weight: bold;
    font-style: normal;
    text-transform: uppercase;
}

.category-divider h3 {
    font-size: 24px;
    line-height: 24px;

    font-weight: bold;
    text-transform: uppercase;
}

/* LANDING */
#landing-presentation-div {
    display: flex;
    justify-content: space-around;

    /* --landing-me-height:800px; */
    --landing-me-height: calc(100vh - 30px);
    height: var(--landing-me-height);
    --landing-me-padding: 60px;
    padding: var(--landing-me-padding) 180px var(--landing-me-padding) 60px;

    gap: 120px;
}

.landing-presentation-text-div {
    display: flex;
    flex-direction: column;

    padding: 120px 60px;
}

.landing-presentation-text-div h1 {
    font-family: coolvetica;
    font-size: 72px;
    font-weight: normal;
    margin-bottom: 5px;
    line-height: 68px;
}

.landing-presentation-text-div h1 b {
    font-size: 92px;
    font-weight: normal;
}

.landing-presentation-text-div h1 i {
    font-family: coolvetica;
    font-weight: 800;
    font-style: normal;
    letter-spacing: 3px;
    color: var(--intro-color);
}

.landing-presentation-text-div h2 {
    font-family: open-sans;
    font-stretch: condensed;
    font-size: 36px;
    margin-bottom: 30px;
    font-weight: normal;
}

.landing-presentation-text-div h2 b {
    font-weight: 600 !important;
}

.landing-presentation-text-div p {
    font-size: 24px;
}

.landing-presentation-text-div p b {
    font-weight: 650 !important;
}

.landing-presentation-img-div {
    display: grid;
    height: 100%;
}

.landing-presentation-img-div .landing-me {
    border-radius: 10px;
    height: calc(var(--landing-me-height) - calc(var(--landing-me-padding) * 2));
}

.landing-presentation-img-div * {
    position: relative;
    grid-row: 1;
    grid-column: 1;
}

.landing-presentation-img-div #landing-popup-code {
    display: flex;
    align-items: start;
    justify-content: start;

    position: relative;
    z-index: 2;
}

.landing-presentation-img-div #landing-popup-code img {
    position: absolute;
    width: 210px;

    -webkit-transform: translateX(-55%) translateY(15%);
    -moz-transform: translateX(-55%) translateY(15%);
    transform: translateX(-55%) translateY(15%);
}

.landing-presentation-img-div #landing-popup-aspect {
    display: flex;
    align-items: end;
    justify-content: end;

    position: relative;
    z-index: 2;
}

.landing-presentation-img-div #landing-popup-aspect img {
    position: absolute;
    width: 240px;

    -webkit-transform: translateX(35%) translateY(20%);
    -moz-transform: translateX(35%) translateY(20%);
    transform: translateX(35%) translateY(20%);
}

/* INTRO */

/* WORK */

#work-wrapper .category-divider {
    margin-bottom: 5px;
}

#work-category-div {
    padding-top:15px;
}

#work-controls-div {
    display:flex;
    align-items:center;
    justify-content: space-between;
    
    width:100%;
}

#work-controls-filter-div, #work-controls-sorting-div {
    display:flex;
    align-items:center;
    height:100%;
    gap:10px;
}

#work-controls-filter-div .controls-filter-button {
    display:flex;
    align-items:center;

    padding: 2.5px 5px;
    padding-right:10px;
    gap:2.5px;
    
    font-size:14px;
    border-radius:9999px;
    color:var(--work-color);
    border:2px solid var(--work-color);
    background-color:var(--bg-color);
}

#work-controls-filter-div #controls-filter-reset {
    display:flex;
    align-items:center;

    padding:5px;
    border-radius:5px;
    
    font-size:14px;
    text-decoration:underline;
    color:var(--work-color);
    background-color:var(--bg-color);
}

#work-controls-filter-div .controls-filter-button svg {
    width:30px;
    height:30px;
    padding:2.5px;
    padding-left:5px;
}

.active-work-filter {
    color:var(--fake-white)!important;
    border:2px solid var(--work-color)!important;
    background-color:var(--work-color)!important;
}

.work-filtered-out {
    opacity:0;
    animation: removeFilteredOut 0.15s forwards;
}

@keyframes removeFilteredOut {
    100% {
        display:none;
    }
}

.controls-sort-select {
    height:39px;
    width:fit-content;
    font-size:14px;
    
    padding-left: 5px;
    padding-right: 60px;
    border-radius: 10px;
    
    outline: none;
    border: 2px solid var(--work-color);
    background-color:var(--bg-color);

    background-image:
        linear-gradient(45deg, transparent 50%, var(--work-color) 50%),
        linear-gradient(135deg, var(--work-color) 50%, transparent 50%),
        linear-gradient(to right, var(--work-color), var(--work-color));
    background-position:
        calc(100% - 20px) calc(50%),
        calc(100% - 15px) calc(50%),
        calc(100% - 45px) 50%;
    background-size:
        6.5px 6.5px,
        6.5px 6.5px,
        1px 75%;
    background-repeat: no-repeat;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

#work-controls-display-div {
    display:flex;
    flex-direction:row;
}

.controls-display-switch {
    display:flex;
    padding:2.5px 7.5px;
    height:100%;
    background-color:var(--bg-color);
}

.controls-display-switch:nth-child(1) {
    border-top-left-radius:9999px;
    border-bottom-left-radius:9999px;
    border:2px solid var(--work-color);
    border-right:0!important;
}

.controls-display-switch:nth-child(2) {
    border-top-right-radius:9999px;
    border-bottom-right-radius:9999px;
    border:2px solid var(--work-color);
}

.controls-display-switch svg{
    width:30px;
    height:30px;
    padding:5px;
}

.active-display-switch {
    color:var(--fake-white)!important;
    border:2px solid var(--work-color)!important;
    background-color:var(--work-color)!important;
}

#work-list-div {
    display:flex;
}

/* -- Grid display -- */
.work-display-grid {
    flex-direction: row;
}

.work-display-grid .work-list-div-header {
    display:none;
}

.work-display-grid .work-list-div-body {
    display: flex;
    flex-wrap: wrap;

    gap:20px;
    margin-top:20px;
}

.work-display-grid .work-list-div-unit {
    display:grid;
    width: calc(calc(100% / 3) - calc(40px / 3));
    aspect-ratio:16/12;

    border-radius:10px;
    overflow:hidden;
    background-color: #e6e4e3;
    transition: all 0.15s ease-out;
}

.work-display-grid .work-diapo-div:hover {
    animation : cycleThroughPictures 3s infinite linear;
}

@keyframes cycleThroughPictures {
    0% {
        --work-cover-image-opacity-1:1;
        --work-cover-image-opacity-2:0;
        --work-cover-image-opacity-3:0;
    }
    33.33% {
        --work-cover-image-opacity-1:0;
        --work-cover-image-opacity-2:1;
        --work-cover-image-opacity-3:0;
    }
    66.67% {
        --work-cover-image-opacity-1:0;
        --work-cover-image-opacity-2:0;
        --work-cover-image-opacity-3:1;
    }
    100% {
        --work-cover-image-opacity-1:1;
        --work-cover-image-opacity-2:0;
        --work-cover-image-opacity-3:0;
    }
}


.work-display-grid .work-list-div-unit .work-cover-image {
    width:100%;
    aspect-ratio:16/12;
}

.work-display-grid .work-list-div-unit .work-cover-image:nth-child(1) {
    opacity:var(--work-cover-image-opacity-1);
}

.work-display-grid .work-list-div-unit .work-cover-image:nth-child(2) {
    opacity:var(--work-cover-image-opacity-2);
}

.work-display-grid .work-list-div-unit .work-cover-image:nth-child(3) {
    opacity:var(--work-cover-image-opacity-3);
}

.work-display-grid .work-list-themes-div {
    display:flex;
    align-items:end;
    justify-content: end;

    z-index:5;
    padding-bottom:10px;
    padding-right:10px;

    grid-row:1;
    grid-column:1;
    pointer-events: none;
}

.work-display-grid .work-project-name {
    display: flex;
    flex-direction: column;
    align-items:flex-start;
    justify-content: flex-end;
    
    z-index:5;
    padding-bottom:12.5px;
    padding-left:12.5px;
    grid-row:1;
    grid-column:1;

    grid-row: 1;
    grid-column: 1;
    pointer-events: none;
    
    font-size:24px;
    font-weight:700;
    font-stretch: condensed;
}

.work-display-grid .work-project-name i{
    font-style:normal;
    font-size:18px;
    font-weight:600;
    font-stretch:normal;
}

.work-display-grid .work-diapo-div {
    display:grid;
    grid-row:1;
    grid-column:1;
}

.work-display-grid .work-diapo-div * {
    grid-row:1;
    grid-column:1;
    transition: all 0.15s ease-in-out !important;
}

.work-display-grid .work-favorite-icon-div {
    display:flex;
    justify-content: end;

    grid-row:1;
    grid-column:1;

    z-index:5;
    padding-top:12.5px;
    padding-right:12.5px;
    pointer-events: none;
}

.work-display-grid .work-favorite-icon-div svg {
    grid-row:1;
    grid-column:1;

    width: 35px;
    height: 35px;

    padding: 2.5px;
    fill:var(--contact-color);
    color:var(--contact-color);
}

.work-display-grid .work-list-themes-div svg {
    grid-row:1;
    grid-column:1;

    width: 35px;
    height: 35px;

    padding: 2.5px;
    color: var(--work-color);
}

.work-display-grid .work-list-div-unit .work-file-icon,
.work-display-grid .work-list-div-unit .work-project-date {
    display:none;
}

/* -- Column display -- */
.work-display-column {
    flex-direction: column;
    margin-top:10px;
}

.work-display-column .work-list-div-body {
    display:flex;
    flex-direction:column;
    position:relative;
}

.work-display-column .work-list-div-header, .work-display-column .work-list-div-unit {
    display:flex;
    flex-direction:row;
    align-items:center;
    
    cursor:default;
    gap:10px;
    padding: 10px 0;

    border-bottom:2px solid var(--fake-grey);
    background-color:var(--bg-color);
}

.work-display-column .work-cover-image {
    display: none;
}

.work-display-column .work-list-div-unit:last-child {
    border-bottom:0!important;
}

.work-display-column .work-list-div-header p, .work-display-column .work-list-div-unit p {
    width:100%;
}

.work-display-column .work-list-div-header p {
    font-weight:600;
}

.work-display-column .work-list-div-unit .work-list-themes-div {
    width: 100%;
}

.work-display-column .work-list-themes-div svg {
    width: 30px;
    height: 30px;
    padding: 2.5px;
    color:var(--work-color);
}

.work-display-column .work-file-icon {
    width:25px;
    height:25px;
    min-width:25px;
    min-height:25px;
    margin-left:10px;
}

.work-display-column .work-list-div-unit p {
    padding: 0;
}

.work-display-column .work-favorite-icon-div {
    display: flex;
    width: 100%;
    position: absolute;

    grid-row: 1;
    grid-column: 1;

    padding:5px;
    align-items: center;
    justify-content: flex-end;
}

.work-display-column .work-favorite-icon-div svg {
    grid-row: 1;
    grid-column: 1;

    width: 30px;
    height: 30px;
    padding: 2.5px;

    fill: var(--contact-color);
    color: var(--contact-color);
}

/* PASSIONS */
.hobby-polaroid-gallery {
    width: 100%;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.hobby-polaroid {
    height:250px;
    padding:10px 10px 50px 10px;
    aspect-ratio:1/1;
    
    background-color:var(--fake-white);
}

.hobby-polaroid-img-div {
    height:100%;
    background-color: var(--fake-black);
}

.hobby-polaroid-img-div img {
    height:100%;
}



/* WORK */
#carreer-wrapper .category-divider {
    margin-bottom: 5px;
}

#carreer-category-div {
    display:flex;
    flex-direction:column;
    gap:15px;
    padding-top:15px;
}

.diploma-div {
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    height:250px;
    border-radius: 20px;
    border: 2px solid var(--fake-black);
}

.diploma-body-div {
    display:flex;
    width:100%;
    height:calc(100% - 70px);
    gap:20px;
    justify-content: space-between;
}

.diploma-card {
    display:flex;
    width:60%;
    height:100%;
}

.diploma-card-icon {
    height:100%;
}

.diploma-card-icon img{
    height:100%;
    padding:5px 20px;
}

.diploma-card-desc {
    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:20px 0;
}

.diploma-card-desc .diploma-title {
    color:var(--carreer-color);

    font-size: 32px;
    font-weight: 700;
    font-stretch: condensed;
}

.diploma-card-desc .diploma-description {
    font-style: normal;
    font-size: 24px;
    font-weight: 600;
    font-stretch: normal;
}

.diploma-internships {
    display:flex;
    justify-content: end;

    height:100%;
    width:40%;

    gap:20px;
    padding:20px;
}

.diploma-internship-unit {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items: center;

    position:relative;
    padding:10px;
    overflow:hidden;
    border-radius:10px;

    width:100%;
    background-color:var(--carreer-color);
}

.diploma-internship-unit .diploma-internship-background  {
    position:absolute;
    width:100%;
}

.diploma-internship-background-veil {
    position:absolute;
    width:100%;
    height:100%;
    z-index:2;
    opacity:0.9;
    background-color:var(--mockup-bg-grey);
}

.diploma-internship-unit .diploma-intership-title {
    display:flex;
    flex-direction: column;
    
    width:100%;
    height:100%;

    font-size:18px;
    font-weight:800;
    z-index:3;
}

.diploma-internship-unit .diploma-intership-desc {
    font-size:18px;
    font-style:normal;
    font-weight:600;
}

.diploma-footer-div {
    display:flex;
    justify-content: space-between;
    height:70px;

    margin:0 20px;
    padding:15px 0;
    border-top:2px solid var(--fake-black);
}

.diploma-category {
    display:flex;
    width:100%;
    gap:10px;
}

.diploma-category p {
    display: flex;
    align-items: center;

    padding: 5px 10px;

    font-size: 18px;
    border-radius: 9999px;
    color: var(--work-color);
    border: 2px solid var(--work-color);
    background-color: var(--bg-color);
}

.diploma-location {
    display: flex;
    align-items: center;

    padding: 2.5px 5px;
    padding-right: 10px;
    gap: 2.5px;

    font-size: 18px;
    color: var(--carreer-color);
}

.diploma-location svg {
    width: 35px;
    height: 35px;
    padding: 5px;
}

.diploma-location p {
    font-weight:700;
}

/* CONTACT */

#contact-category-div {
    display: flex;
    border-radius: 20px;
    background-color: var(--fake-white);
    max-height: calc(100vh - 30px);
}

#contact-form-div {
    display: flex;
    flex-direction: column;

    width: 45%;
    min-height: 100%;

    margin: 60px;
}

#contact-form-desc {
    margin-top: 10px;
    line-height: 28px;
}

#contact-form-inner-div {
    display:flex;
    flex-direction:column;

    gap:25px;
    margin-top: 50px;
}

#contact-form-names-div,
#contact-form-topic-div,
#contact-form-email-div,
#contact-form-content-div,
#contact-form-submit-div {
    display: flex;
    width: 100%;
    gap:35px;
}

.contact-text-input,
.contact-textarea-input {
    width:100%;
    outline: none;
    border: 0;
    transition: all 0.15s ease-out;
    background-color: rgba(0, 0, 0, 0);
}

.contact-text-input {
    padding: 10px 0;
    border-bottom: 2px solid var(--fake-grey);
}

.contact-text-input:focus {
    border-bottom: 2px solid var(--contact-color);
}

.contact-textarea-input {
    height:160px;
    padding: 10px;
    resize:none;
    margin-top:10px;
    border: 2px solid var(--fake-grey);
}

.contact-textarea-input:focus {
    border: 2px solid var(--contact-color);
}

.contact-text-input::placeholder,
.contact-textarea-input::placeholder {
    color:var(--fake-grey);
}

#contact-form-type-label-div {
    display:flex;
    gap:15px;
    justify-content:space-between;
}

.contact-label:has(input[type="radio"]:checked){
    border:2px solid var(--contact-color);
    /* outline:1px solid var(--contact-color); */
}

.contact-label {
    display:flex;
    width:100%;

    padding:10px;

    border-radius:10px;
    border:2px solid var(--fake-grey);
    background-color:var(--fake-white);
}

.contact-label-svg {
    width:80px;
    height:65px;
    
    padding:15px;
    padding:7.5px;

    color:var(--fake-black);
    border-radius:10px;
}

.contact-label-desc-div p{
    font-size:16px;
}

.contact-label-desc-div p:first-child {
    font-weight:bold;
}

.contact-submit-input {
    display:flex;
    padding:10px 20px;

    width:100%;
    height:60px;
    margin-top:30px;

    border-radius:10px;
    border:2px solid var(--contact-color);
    background-color: var(--contact-color);
}

#contact-portrait-div {
    display: flex;

    width: 55%;
    min-height: 100%;

    margin: 20px;
    border-radius: 20px;
    background-color: var(--contact-color);
}