@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");

:root {
    --theme-bg-color: rgba(16 18 27 / 40%);
    --border-color: rgba(113 119 144 / 25%);
    --theme-color: #f9fafb;
    --inactive-color: rgb(113 119 144 / 78%);
    --body-font: "Poppins", sans-serif;
    --hover-menu-bg: rgba(12 15 25 / 30%);
    --content-title-color: #999ba5;
    --content-bg: rgb(146 151 179 / 13%);
    --button-inactive: rgb(249 250 251 / 55%);
    --dropdown-bg: #21242d;
    --dropdown-hover: rgb(42 46 60);
    --popup-bg: rgb(22 25 37);
    --search-bg: #14162b;
    --overlay-bg: rgba(36, 39, 59, 0.3);
    --scrollbar-bg: rgb(1 2 3 / 40%);
}

* {
    outline: none;
    box-sizing: border-box;
}

html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: var(--body-font);
    padding: 0em;
    width: 98%;
    height: 100%;
}

@media screen and (max-width: 750px) {
    body {
        padding: 0em;
        width: 98%;
    }
}

@media screen and (max-width: 380px) {
    body {
        padding: 0em;
        width: 98%;
    }
}

.wrapper-1 {
    min-height: 100%;
    display: grid;
    grid-template-rows: min-content 1fr min-content;
}

h1 {
    font-size: 1em;
    margin: 0;
    padding: 0;
}

.logo {
    background-color: var(--theme-bg-color);
    height: 5vh;
    overflow-y: hidden;
    position: relative;
    width: 98%;
    border-radius: 14px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    padding: 0px 0px;

    color: #9cc4eb;
    display: grid;
    grid-column: 1;
    align-items: center;
}

.app {
    background-color: var(--theme-bg-color);
    top: 28px;
    height: 84vh;
    overflow-y: auto;
    position: relative;
    width: 100%;
    border-radius: 14px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    padding: 0px 10px;

    color: #9cc4eb;
    margin-bottom: 0px;
}


/* BOTON FLOTANTE CAMBIO DE MODO OSCURO/CLARO */

.dark-light {
    /*position: fixed;
    top: 5px;
    right: 50px;*/
    width: 20px;
    background-color: var(--dropdown-bg);
    box-shadow: -1px 3px 8px -1px rgba(0, 0, 0, 0.2);
    padding: 2px 4px 0px 4px;
    border-radius: 50%;
    z-index: 3;
    cursor: pointer;
    opacity: 0.8;
    margin-top: 0px;
    margin-bottom: 2px;
    margin-right: 5px;
}

.dark-light svg {
    /*top: 2px;
    position: relative;
    width: 24px;
    flex-shrink: 0;*/
    fill: #ffce45;
    stroke: #ffce45;
    transition: 0.5s;
    opacity: 1;
    text-align: center;

}


.footer-sticky {
    position: fixed;
    left: 7px;
    bottom: 7px;
}

.header-sticky {
    position: fixed;
    left: 7px;
    top: 7px;

}


.dark-light2 {
    position: fixed;
    top: 20px;
    right: 0px;
    z-index: 5;
    cursor: pointer;
}



.parent-1 {
    display: grid;
    grid-template-columns: repeat(3, 1fr) repeat(2, 0);
    grid-template-rows: 1fr repeat(4, 0);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

.parent-1.div1 {
    grid-area: 1 / 1 / 2 / 2;
}

.parent-1.div2 {
    grid-area: 1 / 2 / 2 / 3;
}

.parent-1.div3 {
    grid-area: 1 / 3 / 2 / 4;
}

.parent-2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr) repeat(2, 0);
    grid-template-rows: 1fr repeat(4, 0);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    align-items:center;
    font-size: 10px;
    justify-items: end;    
    
}

@media screen and (max-width: 750px) {
    .parent-2 {
        font-size: 9px;
    }
}

@media screen and (max-width: 380px) {
    .parent-2 {
        font-size: 8px;
    }
}

.parent-2 div {
    
}

.parent-2 a{
    color: white;
    
}

.parent-2.div1 {
    grid-area: 1 / 1 / 2 / 2;
    background-color: white;
    border-radius: 50%;
}

.parent-2.div2 {
    grid-area: 1 / 2 / 2 / 3;
    background-color: white;
    border-radius: 50%;
}

.parent-2.div3 {
    grid-area: 1 / 3 / 2 / 4;
    width: 100%;
}