styles.css

:root {
    --bg-black-1: #1A1A1A;
    --bg-grey-1: #9BA5B5;
    --bg-red-1: #C1605C;
    --bg-green-1: #224A54;
    --bg-black-2: #2B2F3C;
    --bg-purple-1: #8E5EA2;
    --bg-peach-light: #E9C3B8;
    --font-green-2: #2c798f;
}

html {
    box-sizing: border-box;
    font-size: 62.5%;
}

*, *::after, *::before {
    box-sizing: inherit;
    margin: 0;
}

body {
    font-family: 'Source Sans Pro', sans-serif;
    margin: 0;
}

/* HEADERS */

h1 {font-size: 4rem;}

h2 {font-size: 3.5rem;}

h3 {font-size: 3rem;}

h4 {font-size: 2.5rem;}

h5 {font-size: 2rem;}

h6 {font-size: 1.5rem;}

p {font-size: 1.2rem;}

button {
    border: 0;
    background: transparent;
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

ul {
    padding: 0;
}

a {
    text-decoration: none;
}

svg {
    fill: #FFF;
}

.flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

.bold {
    font-weight: bold;
}

.bold-2 {
    font-weight: 700;
}

.regular-400 {
    font-weight: 400;
}

.bold-700 {
    font-weight: 700;
}

.black-900 {
    font-weight: 900;
}

.fn-2 {font-size: 2rem;}

.fn-3 {font-size: 3rem;}

.fn-4 {font-size: 4rem;}

.fn-5 {font-size: 5rem;}

.fn-6 {font-size: 6rem;}

.fn-7 {font-size: 7rem;}

.fn-8 {font-size: 8rem;}

.fn-9 {font-size: 9rem;}

.fn-16 {font-size: 16rem;}

.title-section-font {
    font-size: clamp(2.9rem, 4vw, 5.2rem);
}

.description-section-font {
    font-size: clamp(2rem, 2.8vw, 3.5rem);
}

.name-section-font {
    font-size: clamp(1.6rem, 2.2vw, 3rem);
}

.uppercase {
    text-transform: uppercase;
}

.text-center {
    text-align: center;
}

.font-white {
    color: #FFF;
}

.font-green-1 {
    color: var(--bg-green-1);
}

.font-green-2 {
    color: var(--font-green-2);
}

.font-red-1 {
    color: var(--bg-red-1);
}

.pointer {
    cursor: pointer;
}

.opacity-0 {
    opacity: 0;
}

.opacity-50 {
    transition: all 250ms ease-in-out 50ms;
}

.opacity-50:hover {
    opacity: 0.5;
}

.display-none {
    display: none;
}

.mt-1 {
    margin-top: 1rem;
}

.mt-2 {
    margin-top: 2rem;
}

.mt-3 {
    margin-top: 3rem;
}

/* TITLES */

.section-title {
    margin: auto;
    text-align: center;
    padding: 1rem;
    margin-top: 5rem;
}



/* MENU */

.wrapper {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    z-index: 4;
    background-color: var(--bg-green-1);
    clip-path: circle(0px at calc(100% - 45px) 45px);
    transition: clip-path 800ms;
}

.wrapper ul {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.wrapper ul li {
    margin: 2rem 0;
}

.wrapper ul li a {
    color: #FFF;
    text-decoration: none;
    font-weight: 700;
    position: relative;
    transition: all 400ms ease 100ms;
}

.wrapper ul li a:after {
    content: "";
    position: absolute;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #FFF;
    transform: scaleX(0);
    transition: all 400ms ease 100ms;
    z-index: -1;
}

.wrapper ul li a:hover:after {
    transform: scaleX(1);
} 

.wrapper ul li a:hover {
    color: #224A54;
}

.navbar-menu {
    z-index: 4;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    width: 5rem;
    height: 5rem;
    justify-self: self-start;
    transition: all 300ms ease;
}

.custom {
    clip-path: circle(100%);
}

.navbar-menu > div {
    background-color: #FFF;
    height: 4px;
    width: 100%;
    transition: all 250ms ease-in-out 50ms;
    border-radius: 0.5rem;
    transform-origin: center;
}


/* NAVBAR */

.navbar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    align-items: center;
    background-color: var(--bg-black-1);
    color: #FFF;
    padding: 1.5rem 2.5rem;
}

.navbar-menu:hover > div:first-child {
    scale: 70%;
}

.navbar-menu:hover > div:last-child {
    scale: 70%;
}

.navbar-menu:hover > div:nth-last-child(2) {
    scale: 110%;
}

.navbar h2 {
    letter-spacing: 1rem;
}

.navbar-name {
    position: relative;
    text-decoration: none;
}

.navbar-name:hover {
    color: #FFF;
    cursor: pointer;
}

.navbar-name::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 2.5px;
    bottom: 0;
    left: 0;
    background-color: #FFF;
    transform: scaleX(0);
    transition: transform 0.5s ease;
}

.navbar-name:hover::before {
    transform: scaleX(1);
}

.navbar-icons-parent {
    justify-self: flex-end;
}

.navbar-icons {
    display: flex;
    gap: 2rem;
}

.navbar-icons > li {
    transition: all 280ms ease-in 50ms;
}

.navbar-icons > li:hover {
    scale: 115%;
}

/* HEADER */

.header {
    display: grid;
    place-items: center;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    height: 70vh; /* EXPERIMENTAL */
}

.header h1 {
    letter-spacing: 0.2rem;
}

.header-title {
    grid-row: 1 / 3;
    background-color: var(--bg-green-1);
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    padding: 4rem 0;
}

.header-developer, .header-designer {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    transition: all 350ms ease-in-out 150ms;
}


.header-developer {
    background-color: var(--bg-red-1);
    padding: 4rem 0;
    display: flex;
    justify-content: center;
}

.header-designer {
    background-color: var(--bg-grey-1);
    color: #1A1A1A;
    padding: 4rem 0;
}

/* TITLE */

.relative {
    position: relative;
}

.inline-block {
    display: inline-block;
}

.overflow {
    overflow: hidden;
}

.header-text {
    position: relative;
}

.text-wrapper {
    position: relative;
    padding-top: 0.2rem;
    padding-right: 0.05rem;
    padding-bottom: 0.2rem;
    overflow: hidden;
}

.letter {
    display: inline-block;
    line-height: 1em;
}

/* ABOUT */

.about {
    background-color: var(--bg-black-2);
    height: 80vh; /* EXPERIMENTAL height */
    padding-top: 2rem;
    padding-bottom: 2rem;
    width: 95%;
    margin: auto;
    display: flex;
    flex-direction: column;
    /*justify-content: space-between;*/
}

.about-title, .services-title {
    transition: all 350ms ease-in-out 100ms;
}

.about-flex-art-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: clamp(12rem, 40%, 25rem);
    height: clamp(12rem, 40%, 25rem);
    margin: auto;
    border: 0.5rem solid #FFF;
    border-radius: 2%;
    position: relative;
}

.rotate {
    transform: rotate(45deg);
}

.scale-80 {
    transform: scale(80%);
    z-index: 3;
}

.rotation {
    animation: rotation 5s infinite linear;
}

@keyframes rotation {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(359deg);
    }
}
/*
.about-flex-art {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 0.2rem;
    width: 100%;
    height: 100%;
    gap: 0.5rem;
    justify-content: center;
    border: 0.5rem solid #FFF;
    padding: 1rem;
    border-radius: 5%;
}
*/
.about-flex-art-item {
    cursor: pointer;
    width: 10%;
    height: 10%;
   /* transition: all 200ms ease-out 100ms;*/
    border-radius: 3%;
    background-color: #FFF;
    position: absolute;
}

.flex-art1 {
    grid-column: 1 / 4;
    background-color: var(--bg-red-1)
}

.flex-art2 {
    grid-row: 2 / 5;
    background-color: #E9D520;
}

.flex-art3 {
    grid-row: 2 / 4;
    grid-column: 2 / 3;
    background-color: #17A3CF;
}

.flex-art4 {
    grid-row: 2 / 3;
    grid-column: 3 / 4;
    background-color: var(--bg-green-1);
}

.flex-art5 {
    grid-row: 3 / 4;
    grid-column: 3 / 4;
    background-color: #8917CF;
}

.flex-art6 {
    grid-row: 4 / 5;
    grid-column: 2 / 4;
    background-color: #AAAAAA;
}

/* SERVICES */

.services {
    width: 95%;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.services-section {
    height: auto;
    padding-top: 2rem;
    padding-bottom: 1rem;
    grid-column: 1 / 3;
    background-color: var(--bg-green-1);
}

.design-first-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    gap: 2rem;
    height: 100%;
}

.services-section, .services-1, .services-2 {
    height: clamp(250px, 70vh, 600px);
    padding: 5rem;
}

.services-1 {
    background-color: var(--bg-purple-1);
}

.services-1, .services-2 {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.services-flex {
    width: 100%;
    padding: 1rem 0;
    height: 25rem;
}

.services-flex-box {
    display: flex;
    gap: 2rem;
    place-items: center;
    justify-content: center;
}

.services-flex-grid {
    display: grid;
    grid-template: repeat(3, 1fr) / repeat(3, 1fr);
    gap: 0.5rem;
    justify-items: center;
    align-items: center;
}

.services-flex-item {
    background-color: #FFF;
    height: clamp(6rem, 40%, 8rem);
    width: clamp(6rem, 40%, 8rem);
    box-shadow: 0 2px 1px rgba(0,0,0,0.09), 
              0 4px 2px rgba(0,0,0,0.09), 
              0 8px 4px rgba(0,0,0,0.09), 
              0 16px 8px rgba(0,0,0,0.09),
              0 32px 16px rgba(0,0,0,0.09);
}

.services-2 {
    background-color: var(--bg-red-1);
}

.services-buttons {
    display: flex;
    gap: 2rem;
    justify-content: center;
}

.animation-button {
    padding: 1.2rem;
    cursor: pointer;
    border-radius: 10%;
    border: 0.5rem solid #FFF;
    transition: all 300ms ease-in-out 100ms;
}

/* SECTION-3 */

.section-3 {
    height: auto;
    width: 95%;
    margin: auto;
    display: grid;
    grid-template: repeat(2, 1fr) / repeat(3, 1fr);
}
.sec-3-sub-1 {
    grid-column: 1 / 4;
    background-color: var(--bg-peach-light);
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 70vh;
}


.sec-3-sub-2 {
    background-color: var(--bg-green-1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    gap: 2rem;
    height: 70vh;
}

.sec-3-anime-1 {
    width: 100px;
    height: 100px;
    background-color: #FFF;
    box-shadow: 0 2px 1px rgba(0,0,0,0.5), 
              0 4px 2px rgba(0,0,0,0.5), 
              0 8px 4px rgba(0,0,0,0.8), 
              0 16px 8px rgba(0,0,0,0.5),
              0 32px 16px rgba(0,0,0,0.25);
}

.sec-3-sub-3 {
    background-color: var(--bg-purple-1);
}

.sec-3-sub-4 {
    background-color: var(--bg-black-2);
}

.sec-3-sub-3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    gap: 2rem;
    height: 70vh;
}

.sec-3-anime-2 {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    position: relative;
}

.square {
    height: 2rem;
    width: 2rem;
    /*background-color: #FFF;*/
    position: relative;
    box-shadow: 0 2px 1px rgba(0,0,0,0.5), 
              0 4px 2px rgba(0,0,0,0.5), 
              0 8px 4px rgba(0,0,0,0.3), 
              0 16px 8px rgba(0,0,0,0.5),
              0 32px 16px rgba(0,0,0,0.25);
}

.sec-3-sub-4 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    gap: 2rem;
    height: 70vh;
}

.sec-3-anime-3 {
    display: flex;
    flex-direction: column;
    column-gap: 5px;
    border: 2px solid #FFF;
    border-radius: 10px;
}

.sec-3-anime-3-square {
    width: 5rem;
    height: 5rem;
    border-radius: 0.5rem;
    background-color: #FFF;
    margin: 5px;
}

/* Section 4 Portfolio */

.section-4 {
    height: auto;
    width: 95%;
    margin: auto;
}

.section-4-name {
    background-color: var(--bg-peach-light);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 2rem;
    gap: 4rem;
}

.card-projects {
    background-color: #FFF;
    border-radius: 10px;
    width: clamp(150px, 40%, 225px);
    margin: auto;
    height: 250px;
    padding: 2rem;
    box-shadow: -6px 8px 12px 4px rgba(0,0,0,0.75);
    -webkit-box-shadow: -6px 8px 12px 4px rgba(0,0,0,0.75);
    -moz-box-shadow: -6px 8px 12px 4px rgba(0,0,0,0.75);
}

.card-flex {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}


.card-arrow {
    color: #FFF;
    background-color: var(--bg-black-2);
    padding: 1.5rem;
    border-radius: 10px;
    font-size: 2rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 200ms ease-in 50ms;
    box-shadow: -3px 5px 20px 2px rgba(0,0,0,0.75);
-webkit-box-shadow: -3px 5px 20px 2px rgba(0,0,0,0.75);
-moz-box-shadow: -3px 5px 20px 2px rgba(0,0,0,0.75);
}

.card-arrow:hover {
    transform: scale(1.2);
}

/* SECTION 5 */

.section-5 {
    height: auto;
    width: 95%;
    margin: auto;
}

.section-5-name {
    background-color: var(--bg-green-1);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 2rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/*SLIDER BUTTONS and SLIDER */

.buttons-slider {
    display: flex;
    justify-content: center;
    gap: 10rem;
}

.slide-flex {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.slide > p {
    font-size: clamp(2rem, 2.9vw, 3.8rem);
}

.prev-button, .next-button {
     font-size: 1.8rem;
     text-align: center;
     cursor: pointer;
     width: 4rem;
     height: 4rem;
     padding: 1rem;
     border: none;
     border-radius: 50%;
     font-weight: bold;
     z-index: 3;
     cursor: pointer;
     background-color: black;
     color: #FFF;
}
 /*
 .btn-prev {
     top: -45%;
     left: 3%;
 }
 
 .btn-next {
     top: -45%;
     right: 3%;
 }
 */

.number-display {
    margin-bottom: 2rem;
}

/*IMAGES SLIDER*/

.slider {
    width: 100%;
    max-width: 100%;
    height: 680px;
    display: flex;
    justify-content: center;
    overflow: hidden; /* <===  */
    border-radius: 15px;
}

.slide {
    width: 90%;
    max-width: 850px;
    height: auto;
    /*position: absolute;*/
    transition: all 0.5s;
}

.slide img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 20px;
}

/*SECTION tools */

.section-tools {
    height: auto;
    width: 95%;
    margin: auto;
}

.section-tools-name {
    background-color: var(--bg-green-1);
    /*height: 70vh;*/
    padding-bottom: 2rem;
    padding-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* CARDS */

.gallery {
    display: flex;
    left: calc(50% - 330px);
    margin-top: 1.5rem;
    justify-content: center;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}
.card {
    position: relative;
    left: 0px;
    width: 210px;
    height: 220px;
    padding: 0.8rem;
    background-color: white;
    border-radius: 8px;
    transition: all 0.5s ease-in-out 0.25s;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 5px 25px;
    display: grid;
    grid-template-rows: 30% 70%;
    gap: 2rem;
}

.cards-title {
    font-size: clamp(2.1rem, 2.9vw, 3.2rem);
}

.card-font {
    font-size: clamp(2rem, 1.5vw, 2.8rem);
}

.card-description {
    font-size: clamp(1.5rem, 1.2vw, 2rem);
}

.card:nth-child(1) {
    background-color: var(--bg-red-1);
}
.card:nth-child(2) {
    background-color: var(--bg-peach-light)
}
.card:nth-child(3) {
    background-color: var(--bg-grey-1);
}
.card:nth-child(4) {
    background-color: #ED6A5E;
}

.card:not(:first-child) {
    margin-left: -55px;
}

/* SECTION 6 */

.section-6 {
    height: auto;
    width: 95%;
    margin: auto;
}

.section-6-name {
    background-color: var(--bg-black-2);
    height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container-section-6-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    width: 90%;
}
#contact-name {
    border-radius: 10px;
    padding: 1rem;
    display: block;
}

#contact-email {
    border-radius: 10px;
    padding: 1rem;
    display: block;
}

#contact-phone {
    border-radius: 10px;
    padding: 1rem;
    display: block;
}

#contact-mensaje {
    border-radius: 10px;
    display: block;
}

.submit-message {
    display: block;
    border-radius: 10px;
    height: 50px;
    text-transform: uppercase;
    font-weight: bold;
    background-color: var(--bg-red-1);
    color: white;
    cursor: pointer;
}



/* MEDIA QUERIES */

@media (width >= 769px) {
    .about-title:hover, .services-title:hover {
        letter-spacing: 1.2rem;
    }

    .animation-button:hover {
        transform: scale(115%);
    }
    
    .card:hover {
        transform: translateY(-18px);
        font-weight: 900;
        cursor: pointer;
    }
    .card:hover ~ .card {
        left: 55px;
    }

    #contact-name, #contact-email, #contact-phone, #contact-mensaje, .submit-message {
        width: 700px;
    }

    .card-projects-container {
        display: grid;
        align-items: center;
        justify-items: center;
        grid-template-columns: 25% 50% 25%;
        place-content: center;
    }

    .card-arrow {
        font-size: 5rem;
        padding: 2rem;
    }

}

/*FOOTER*/

.footer {
    background-color: var(--bg-black-1);
    height: 100px;
    display: flex;
    place-content: center;
    align-items: center;
    margin-top: 2rem;
}

@media (width <= 768px) {

    .fn-2 {font-size: 1rem;}

    .fn-3 {font-size: 1.5rem;}

    .fn-4 {font-size: 2rem;}

    .fn-5 {font-size: 3rem;}

    .fn-6 {font-size: 3.5rem;}

    .fn-7 {font-size: 3.8rem;}

    .fn-8 {font-size: 4.1rem;}

    .fn-9 {font-size: 5rem;}

    .navbar-name {
        font-size: 2rem;
    }

    .header-title {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
    }

    .navbar {
        display: grid;
        grid-template-columns: 50% 50%;
    }

    .navbar-menu {
        width: 3rem;
        height: 3rem;
    }

    .navbar-name-container {
        justify-self: flex-end;
    }

    .icons-navbar{
        display: none;
    }

    .about-flex-art-container {
        width: 15rem;
        height: 15rem;
    }

    .services {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 1fr);
    }

    .services-section {
        grid-column: 1 / 2;
    }

    .services-1, .services-2 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .services-flex {
        height: 15rem;
    }

    .services-flex-item {
        width: 4rem;
        height: 4rem;
    }

    .section-3 {
        display: flex;
        flex-direction: column;
    }
    .sec-3-sub-1 {
        grid-column: 1 / 4;
    }

    .card:hover {
        transform: translateY(-18px);
        font-weight: 900;
        cursor: pointer;
    }
    .card:hover ~ .card {
        left: 55px;
    }

    #contact-name, #contact-email, #contact-phone, #contact-mensaje, .submit-message {
        width: 450px;
    }

    .card-projects-container {
        display: grid;
        align-items: center;
        justify-items: center;
        grid-template-columns: 15% 60% 15%;
        place-content: center;
    }

    .card-arrow {
        font-size: 2rem;
        padding: 1.5rem;
    }

}

@media (width <= 500px) {

    .fn-2 {font-size: 0.8rem;}

    .fn-3 {font-size: 1rem;}

    .fn-4 {font-size: 1.5rem;}

    .fn-5 {font-size: 2.1rem;}

    .fn-6 {font-size: 2.5rem;}

    .fn-7 {font-size: 3rem;}

    .fn-8 {font-size: 3.5rem;}

    .fn-9 {font-size: 3.8rem;}

    .about-flex-art-container {
        width: 10rem;
        height: 10rem;
    }

    .about-flex-art-container {
        width: 20rem;
        height: 20rem;
    }

    .services-flex {
        height: 10rem;
    }
    
    .services-flex-item {
        width: 2rem;
        height: 2rem;
    }

    .buttons-slider {
        gap: 2rem;
    }
    .slider {
        height: 315px;
    }

    #contact-name, #contact-email, #contact-phone, #contact-mensaje, .submit-message {
        width: 250px;
    }

    .card:hover {
        transform: translateY(-18px);
        font-weight: 900;
        cursor: pointer;
    }
    .card:hover ~ .card {
        left: 55px;
    }
    
}