@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

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

:root {
    --marfil: #E4E4E4;
    --pink: #FF3660;
    --gray: #9F9F9F;
    --hoverBg: radial-gradient(circle at 0% 0%, #FF5E82, #2B2B2B);
    --Bg: radial-gradient(circle, #5f5f5f, #323232);

}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
    font-family: "Hanken Grotesk", sans-serif;
    color: var(--marfil);
    font-weight: 200;
}

.background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #171717;
    background: radial-gradient(circle, #303030, #171717);
    z-index: -1;
}

ul > li ,
.links-project > li{
    list-style: none;
}
a {
    text-decoration: none;
    color: var(--marfil);
}


@keyframes fade-up {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
    }

    100% {
        opacity: 1;
        transform: translateY(0px) scale(1);
    }
}

@keyframes fade-down {
    0% {
        opacity: 0;
        transform: translateY(-30px) scale(0.9);
    }

    100% {
        opacity: 1;
        transform: translateY(0px) scale(1);
    }
}
/*Barra dezplazadora*/

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background: rgb(14, 14, 14);
}
  
::-webkit-scrollbar-thumb {
    background: rgb(82, 82, 82); 
    border-radius: 8px; 
    width: 8px;
    height: 8px;
  }

/*header*/

.main-mobile {
    display: none;
}

.social-media-mobile {
    display: none;
}

header {
    padding: 1.8rem 7%;
    position: fixed;
    width: 100%;
    background: linear-gradient(to bottom, #171717, #30303000);
    z-index: 1;
}

.header, .main-items, .social-items {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header .logo img.logo-principal {
    height: 50px;
}

.logo-mobile, .icon-links {
    display: none;
}

.main-items {
    gap: 10px;
}

.social-items {
    gap: 20px;
}

.social-items li, .main-items li {
    font-size: 15px;
    font-weight: 300;
}

.main-items li {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--Bg);
    width: 115px;
    border-radius: 50px;
}

li.select {
    border: 1px solid #7c7c7c;
}

.main-items li a {
    padding: 5px 25px;
    border-radius: 50px;
}

.social-items li.item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.social-items a {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 15px;
}
/*hover*/

.main-items li:hover {
    background: var(--hoverBg);
    border: 1px solid #7c7c7c;
}

.social-items a:hover {
    color: var(--pink);
}

/*Footer*/

footer {
    padding: 1.8rem 7% 3.6rem 7%;
}

.img-logo-footer img {
    height: 40px;
}

.content-one, .content-two {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.content-one {
    margin-bottom: 15px;
}

.copy, .update  {
    font-size: 14px;
    font-weight: 200;
    color: var(--gray);
}

.copy .copyright, 
.update .email {
    font-size: 16px;
    font-weight: 300;
    color: var(--marfil);
}

.content-two .update {
    text-align: right;
}

/*Collage*/
/*
.container {
    margin-top: 12vh;
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: 0.65fr 0.15fr 0.10fr 0.10fr 0.10fr 0.10fr 0.60fr 0.1fr 0.1fr 0.1fr 0.50fr 0.10fr 0.10fr 0.10fr 0.10fr 0.50fr 0.20fr 0.10fr 0.5fr;
    grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
    gap: 20px 100px; 
    grid-template-areas: 
      "item1 item2"
      "item1 item2"
      "item1 item2"
      "item3 item2"
      "item3 item4"
      "item3 item4"
      "item3 item6"
      "item5 item6"
      "item5 item8"
      "item7 item8"
      "item7 item9"
      "item7 item9"
      "item10 item9"
      "item10 item12"
      "item11 item12"
      "item11 item13"
      "item11 item13"
      "item14 item13"
      "item14 item15"; 
}
*/

main {
    padding: 1.8rem 12%;
}

.container {
    margin-top: 12vh;
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: 0.2fr 0.2fr 0.2fr 0.2fr 0.2fr 0.2fr 0.2fr 0.2fr 0.2fr 0.2fr 0.2fr 0.2fr 0.2fr 0.2fr 0.2fr 0.2fr 0.2fr 0.2fr 0.2fr; 
    grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
    gap: 30px 80px; 
    grid-template-areas: 
      "item1 item2"
      "item1 item2"
      "item1 item2"
      "item3 item2"
      "item3 item4"
      "item3 item5"
      "item3 item5"
      "item6 item5"
      "item7 item5"
      "item7 item8"
      "item7 item9"
      "item7 item9"
      "item10 item9"
      "item11 item9"
      "item11 item12"
      "item11 item13"
      "item11 item13"
      "item14 item13"
      "item14 item13"; 
}

.item1, .item2, .item3, .item4, .item5,
.item6, .item7, .item8, .item9, .item10,
.item11, .item12, .item13, .item14 {
    background-color: #2b2b2b;
}

.item1 { 
    grid-area: item1; 
    height: 620px;
    animation: fade-up 0.5s;
}
  
.item2 { 
    grid-area: item2; 
    background-image: url(../img/foto_principal.png);
    height: 750px;
    animation: fade-up 0.5s;
}
  
.item3 { 
    grid-area: item3; 
    background-image: url(../img/ciudad_salta.jpeg);
}

.item4 { 
    grid-area: item4; 
}
  
.item5 { 
    grid-area: item5; 
    background-image: url(../img/art.jpeg);
    height: 650px;
}
  
.item6 { 
    grid-area: item6; 
}
  
.item7 { 
    grid-area: item7; 
    background-image: url(../img/biblio.jpeg);
}
  
.item8 { 
    grid-area: item8; 
}
  
.item9 { 
    grid-area: item9; 
    background-image: url(../img/foto_olim.jpeg);
    height: 650px;
}
  
.item10 {
    grid-area: item10; 
}
  
.item11 {
    grid-area: item11; 
    background-image: url(../img/foto_panoramica.jpeg);
}
  
.item12 {
    grid-area: item12; 
}
  
.item13 {
    grid-area: item13; 
    background-image: url(../img/foto_dev.jpeg);
    height: 650px;
}

.item14 {
    grid-area: item14; 
}

.item2, .item3, .item5, .item7, 
.item9, .item11, .item13 {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 3px solid rgb(109, 109, 109);
    border-radius: 20px;
    box-shadow: 0px 0px 7px 0px #0c0c0cb4;
}

.item3, .item5, .item7, 
.item9, .item11, .item13 {
    animation: reveal linear both 1s;
    animation-timeline: view();
    animation-range: entry 10% cover 50%;
    z-index: -1;
}

@keyframes reveal {
    from {
        opacity: 0;
        translate: 0 30px;
        scale: 0.9;
        transition: 0.5s;
    }
    to {
        opacity: 1;
        translate: 0 0;
        scale: 1;
    }
}

.container-mobile {
    display: none;
}

/*Items Style*/

/*Item 1*/
.title-about h3 {
    font-size: 15px;
    font-weight: 400;
    color: var(--gray);
    font-family: "Montserrat", sans-serif;
}

.title-about {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 40px;
}

.title-about .circle {
    height: 10px;
    width: 10px;
    background: var(--pink);
    border-radius: 50px;
}

.about-phrase h2 {
    font-family: "Hanken Grotesk", sans-serif;
    font-weight: 400;
    font-size: 41px;
    margin-top: 10px;
}

.about-phrase h2 > span {
    color: var(--pink);
    font-weight: 400;
    font-family: "Montserrat", sans-serif;
}

.about-phrase h2 > span.white {
    color: var(--white);
    font-family: "Montserrat", sans-serif;
}

.about-phrase h2 > span.my_name {
    font-family: "Libre Baskerville", serif;
    font-style: italic;
    font-size: 43px;
}

.item1 {
    display: flex;
    align-items: center;
    background: transparent;
}

/*icon fa-down animation bounce */
.fa-icon {
    margin-top: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fa-icon img {
    height: 50px;
    opacity: 0.1;
}

/*items parraf*/

.item4, .item6, .item8, .item10, .item12, .item14  {
    padding: 20px;
    background: transparent;
    
    animation: reveal linear both 1s;
    animation-timeline: view();
    animation-range: entry 20% cover 30%;
}

.subtitle-about h4 {
    font-family: "Hanken Grotesk", sans-serif;
    font-size: 18px;
    font-weight: 300;
    margin-bottom: 17px;
    color: white;
    letter-spacing: .4px;
}

.item4 .subtitle-about h4 {
    font-weight: 200;
    line-height: 27px;
}

.subtitle-about h4 > span {
    color: var(--pink);
    font-weight: 500;
}

.subtitle-about p {
    font-family: "Hanken Grotesk", sans-serif;
    margin-top: 18px;
    font-weight: 200;
    color: rgba(242, 242, 242, .6);
    letter-spacing: .3px;
    font-size: 16px;
    line-height: 23px;
}

span.shine {
    text-shadow: 0px 0px 8px rgb(255, 255, 255);
    color: rgb(230, 230, 230);
}

.subtitle-about img {
    margin-top: 15px;
}

p span.my_name {
    color: rgb(231, 231, 231);
}


@keyframes reveal-right {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

/*More information*/
/*Screen Header*/

.header-screen-container {
    padding: 0px 25px;
}

.more-information {
    margin-top: 25px;
}

.circle-colors {
    display: flex;
    align-items: center;
    gap: 10px;
}

.circle-screen {
    height: 27px;
    width: 27px;
    border: 1px solid #E4E4E4;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: 0.3s;
}

.circle-screen i {
    font-size: 12px;
    display: none;
}

.circle-screen:hover {
    transform: scale(1.1);
    transition: 0.3s;
}

.circle-screen:hover i {
    display: block; 
}

.circle-screen.red {
    background: #F8466B;
    box-shadow: 0px 0px 15px #f46e5ccb;
}

.circle-screen.green {
    background: #F3BD4E;
    box-shadow: 0px 0px 15px #f3bc4ec0;
}

.circle-screen.yellow {
    background: #57C353;
    box-shadow: 0px 0px 15px #57c353c5;
}

.line {
    margin: 30px 0px 10px;
    border: 1px solid rgba(255, 255, 255, 0.048);
}

/*Screen body*/
.container-more-information {
    background: linear-gradient(to bottom,#2f2f2f88, #1c1c1c00 );
    border-radius: 30px;
    padding: 40px 30px;
    animation: reveal-right linear both 1s;
    animation-timeline: view();
    animation-range: entry 20% cover 30%;
}

/*Buttons*/

.btn-selectors {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 5px;
    margin-left: 25px;
}

.btn-selectors button{
    color: rgb(218, 218, 218);
    background: #3f3f3f98;
    border: none;
    padding: 8px 30px;
    border-radius: 10px;
    font-family: "Hanken Grotesk", sans-serif;
    font-size: 15px;
    font-weight: 200;
    margin-bottom: 5px;
    cursor: pointer;
}

.btn-selectors button.btn-selected {
    background: #1f1f1f;
    padding: 9px 30px;
    padding-bottom: 18px;
    border-radius: 10px 10px 0px 0px;
    font-weight: 300;
    color: white;
    margin-bottom: -6px;
}

/*Screen inside*/
.screen-container {
    background: #1f1f1f;
    padding: 20px 35px;
    border-radius: 10px;
}

/*sections career, experience, courses*/

.container-ruta {
    display: grid;
    grid-template-columns: 1fr 1fr 0.5fr;
    gap: 30px;
    margin-bottom: 10px;
}

.container-ruta .name, .container-ruta .status {
    display: flex;
    align-items: center;
    justify-content: left;
}

.d-flex-box {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 10px;
}

.d-flex-box .container-img-box {
    width: 30px;
    height: 30px;
    background-color: white;
    padding: 2px;
    border-radius: 4px;
}

.d-flex-box .container-img-box img {
    width: 26px;
    height: 26px;
}

.container-ruta .name p.title{
    font-weight: 300;
    font-size: 16px;
    color: rgb(255, 255, 255);
}

.container-ruta .status p, .container-ruta p.institution {
    font-weight: 200;
    font-size: 15px;
    color: rgb(185, 185, 185);
}

.container-ruta {
    background-color: rgba(73, 73, 73, 0.089);
    padding: 10px;
    border-radius: 7px;
}

/*header screen inside*/
.header-screen-flex {
    display: grid;
    grid-template-columns: 1fr 1fr 0.5fr;
    gap: 30px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.137);
    margin-bottom: 15px;
}

.header-screen-flex span {
    color: rgb(122, 122, 122);
    font-weight: 300;
    font-size: 15px;
}

.title.flex {
    display: none;
}



/*contacto*/

section.contact {
    margin-top: 60px;
    margin-bottom: 50px;
    animation: reveal-right linear both 1s;
    animation-timeline: view();
    animation-range: entry 20% cover 30%;
}

/*Contacto Screen body*/
.container-more-information {
    background: linear-gradient(to bottom,#2f2f2f88, #1c1c1c00 );
    border-radius: 30px;
    padding: 40px 45px;
}

.container-info-contact h2{
    font-size: 48px;
    font-weight: 500;
}

.container-info-contact h2 > span {
    color: var(--pink);
    font-weight: 400;
    font-family: "Montserrat", sans-serif;
}

.container-info-contact p {
    font-size: 18px;
    font-weight: 200;
    margin-top: 18px;
    margin-bottom: 18px;
    color: rgb(216, 216, 216);
    width: 80%;
}

.container-info-contact a.mail {
    font-size: 17px;
    font-weight: 300;
    color: white;
    font-style: italic;
    padding-bottom: 1px;
    transition: 0.2s;
    border-bottom: 1px solid white;

}

.container-info-contact a:hover {
    transition: 0.2s;
    color: var(--pink);
}

.container-info-contact a.mail:hover {
    border-bottom: 1px solid var(--pink);
}

.items-social {
    margin-top: 15px;
}

.items-social a {
    font-size: 20px;
}

.container-contact-flex {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
}

.container-info-contact {
    display: flex;
    align-items: center;
    justify-content: left;
}

.contact-form .field-group,
.contact-form .field {
    display: grid;
}

.contact-form .field-group.flex {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.contact-form .field-group {
    margin-bottom: 15px;
}

.contact-form .field-group label {
    color: rgb(160, 160, 160);
    font-weight: 200;
    font-size: 15px;
    margin-bottom: 5px;
}

.contact-form .field-group input,
.contact-form .field-group textarea, 
.contact-form input.btn{
    background: linear-gradient(to bottom, #35353583, #25252521);
    border: 2px solid #7c7c7c54;
    border-radius: 10px;
    padding: 8px 15px;
    color: rgb(216, 216, 216);
    font-family: "Hanken Grotesk", sans-serif;
    font-weight: 200;
    font-size: 16px;
    width: 100%;
}

.contact-form input.btn {
    background: radial-gradient(circle, #5f5f5f, #323232);
    border: 1px solid #7c7c7c00;
    color: rgb(231, 231, 231);
    font-size: 16px;
    width: 100%;
    padding: 10px 15px;
    cursor: pointer;
    transition: 0.2s;
}

.contact-form input.btn:hover {
    border: 1px solid #7c7c7c;
    transform: scale(1.02);
    transition: 0.2s;
    background:radial-gradient(circle at 0% 0%, #FF5E82, #2B2B2B);
}

@keyframes slidein {
    from {
      opacity: 0;
      scale: 95%;
    }
    to {
      opacity: 1; 
      scale: 100%;
    }
}


@media (max-width: 1300px) {
    main {
        padding: 1.8rem 7%;
    }

    .container {
        grid-template-columns: auto auto; /* Utiliza auto para ajustar las columnas al contenido */
        gap: 50px; 
    }
    
    .item1 {
        height: 550px;
    }
    .item2, .item5, .item9, .item13 {
        height: 600px;
    }
}

@media (max-width: 900px) {
    .header .logo img.logo-principal {
        display: none;
    }
    .logo-mobile {
        display: block;
        height: 45px;
        position:absolute;
        left: 7%;
        top: 1.5rem;
    }
   .icon-links {
        display: contents;
    }
    .dropdown {
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--Bg);
        height: 30px;
        width: 32px;
        border-radius: 100%;
    }
    .dropdown:hover {
        background: var(--hoverBg);
        border: 1px solid #7c7c7c;
    }
    .social-media {
        display: none;
    }
    .header {
        display: flex;
        align-items: center;
        justify-content: right;
        gap: 10px;
    }
    .main-items li {
        width: 100px;
    }
    li.select {
        border: 1px solid #7c7c7c;
    }
    .main-items li a {
        padding: 5px 15px;
        border-radius: 50px;
    }
    .show {
        display: block;
    }
    .social-media-mobile {
        position: absolute;
        margin-top: 9rem;
        background: radial-gradient(circle, #5f5f5f6c, #3232323b);
        backdrop-filter: blur(10px);
        padding: 10px;
        border-radius: 15px;
    }
    .social-media-mobile .social-items {
        display: block;
        width: 100%;
    }
    .social-media-mobile .social-items a {
        display: flex;
        justify-content: space-between;
        width: 100%;
        gap: 20px;
        padding: 5px 10px;
        background: var(--Bg);
        border-radius: 10px;
    }
    .social-media-mobile .social-items a:hover {
        background: var(--hoverBg);
        border: 1px solid #7c7c7c;
        color: var(--marfil);
    }


    /*Collage*/

    main {
        padding: 1.8rem 7%;
    }
    
    .item1 {
        height: 450px;
    }

    .container {
        display: none;
    }

    .container-mobile {
        display: block;
        margin-top: 10vh;
        padding: 0 0.3rem;
        padding-left: 5%;
        padding-right: 5%;
    }

    .container-mobile .item2 { 
        height: 600px;
    }

    .container-mobile  .item5, .container-mobile  .item11 {
        height: 600px;
    }

    .container-mobile  .item3 {
        height: 400px;
    }

    .container-mobile .item7, .container-mobile .item11 { 
        height: 400px;
    }

    /*Styles de items*/
    .container-mobile .title-about {
        margin-bottom: 30px;
    }

    .container-mobile .item1 {
        padding-top: 30px;
        padding-bottom: 40px;
    }
    
    .container-mobile .about-phrase h2 {
        font-family: "Hanken Grotesk", sans-serif;
        font-weight: 400;
        font-size: 39px;
        margin-top: 5px;
    }
    
    .container-mobile .about-phrase h2 > span.my_name {
        font-family: "Libre Baskerville", serif;
        font-style: italic;
        font-size: 40px;
    }

    .container-mobile .item2 {
        margin-bottom: 40px;
    }

    .item4, .item6, .item8, .item10, .item12, .item14  {
        padding: 40px 10px;
        background: transparent;
    }

    .container-mobile .item4 .subtitle-about h4 {
        margin-bottom: 0px;
    }


    
    /*Contacto*/
    .container-contact-flex {
        display: grid;
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .container-info-contact h2{
        margin-top: 50px;
    }
}

@media (max-width: 600px) {
    .logo-mobile {
        height: 40px;
    }
    .icon-links {
        display: none;
    }
    .social-media {
        display: block;
    }
    .main-items{
        display: none;
    }
    .main-mobile {
        display: block;
    }
    .main-items-mobile {
        margin-top: 30px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 99%;
        background: radial-gradient(circle, #5f5f5f6c, #3232323b);
        backdrop-filter: blur(10px);
        padding: 10px;
        border-radius: 50px;
    }
    .main-items-mobile li {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50px;
    }
    li.select {
        border: 1px solid #7c7c7c;
        background: var(--Bg);
    }
    .main-items-mobile li a {
        padding: 5px 18px;
        border-radius: 50px;
        font-size: 14px;
    }
    .main-items-mobile li:hover {
        background: var(--hoverBg);
        border: 1px solid #7c7c7c;
    }
    .social-media-mobile {
        display: none;
    }

    /*Collage*/
    .container {
        display: none;
    }

    .container-mobile {
        display: block;
        margin-top: 16vh;
        padding: 0 0.3rem;
    }

    .container-mobile .item1 { 
        height: 100%;
    }

    .item5, .item11 {
        height: 500px;
    }

    .item3 {
        height: 300px;
    }

    .item7, .item11 { 
        height: 300px;
    }

    /*Styles de items*/
    .container-mobile .title-about {
        margin-bottom: 30px;
    }

    .container-mobile .item1 {
        padding-top: 30px;
        padding-bottom: 40px;
    }
    
    .container-mobile .about-phrase h2 {
        font-family: "Hanken Grotesk", sans-serif;
        font-weight: 400;
        font-size: 36px;
        margin-top: 5px;
    }
    
    .container-mobile .about-phrase h2 > span.my_name {
        font-family: "Libre Baskerville", serif;
        font-style: italic;
        font-size: 38px;
    }

    .container-mobile .item2 {
        margin-bottom: 40px;
    }

    .item4, .item6, .item8, .item10, .item12, .item14  {
        padding: 40px 10px;
        background: transparent;
    }

    .container-mobile .item4 .subtitle-about h4 {
        margin-bottom: 0px;
    }

    /*Contacto*/
    .contact-form .field-group.flex {
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .container-info-contact p {
        width: 100%;
    }

}

@media (max-width: 700px) {
      /*Screen inside*/
      .header-screen {
        display: none;
    }

    .screen-container {
        padding: 25px 25px;
        border-radius: 10px;
    }

    /*sections career, experience, courses*/

    .container-ruta {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 10px;
    }

    .container-ruta .name{
        display: none;
    }

    .container-ruta .status p {
        font-size: 15px;
        border-bottom: 1px solid rgb(58, 58, 58);
        width: 100%;
        padding-bottom: 10px ;
    }

    .container-ruta .status {
        order: 1;
    }

    .container-ruta .name {
        order: 2;
    }

    .container-ruta .d-flex-box {
        order: 3;
    }

    .container-ruta {
        padding: 15px;
    }

    .title.flex {
        display: block;
        font-size: 16px;
        font-weight: 300;
        color: white;
        margin-bottom: 3px;
    }

    .d-flex-box .container-img-box {
        width: 35px;
        height: 35px;
        background-color: white;
        padding: 2px;
        border-radius: 4px;
    }
    
    .d-flex-box .container-img-box img {
        width: 31px;
        height: 31px;
    }

    /*Buttons*/

    .btn-selectors {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        margin-left: 0px;
    }

    .btn-selectors button{
        padding: 8px 15px;
        border-radius: 10px;
        font-family: "Hanken Grotesk", sans-serif;
        font-size: 15px;
        font-weight: 200;
        margin-bottom: 5px;
        cursor: pointer;
    }

    .btn-selectors button.btn-selected {
        background: #1f1f1f;
        padding: 9px 15px;
        padding-bottom: 18px;
        border-radius: 10px 10px 0px 0px;
        font-weight: 300;
        color: white;
        margin-bottom: -6px;
    }

      /*footer*/
      .content-two {
        display: grid;
        margin-top: 30px;
    }
    
    .content-two .update {
        text-align: left;
        margin-top: 10px;
    }
}

@media (max-width: 500px) {
    .container-more-information {
        background: linear-gradient(to bottom,#2f2f2f88, #1c1c1c00 );
        border-radius: 30px;
        padding: 40px 20px;
    }

    .btn-selectors button{
        padding: 8px 13px;
        font-size: 14px;
    }

    .screen-container {
        padding: 20px;
    }

    .circle-screen {
        height: 20px;
        width: 20px;
    }

    .line {
        margin: 25px 0px 10px;
        border: 1px solid rgba(255, 255, 255, 0.048);
    }
}