@font-face {
    font-family: 'IndieFlower';
    src: url('../fonts/IndieFlower-Regular.ttf');
}

:root {
    --color1: #F35588;
    --color2: #05DFD7;
    --color3: #A3F7BF;
    --color4: #FFF591;
    --color1-deg: #f75b64;
    --color2-deg: #07e1cb;
    --color3-deg: #bff8ac;
    --color4-deg: #fff670;
}

html {
    width: 100%;
}

body{
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color1);
    font-family: 'IndieFlower', sans-serif;
    font-weight: bolder;
}

section{
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden;
    flex-wrap: wrap;
    padding: 2rem 0rem;
    justify-content: center;
}

#navBar{
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: var(--color3-deg);
    height: 3rem;
    align-items: center;
    position: sticky;
    z-index: 3;
    top: 0;
    box-shadow: 0 1rem 2rem 0.25rem rgb(0 0 0 / 57%);
    padding: unset !important;
    font-size: 1.5rem;
}

#header{
    background-color: var(--color2-deg);
    z-index: 2;
    border-top-width: thin;
    border-top-style: inset;
    border-top-color: black;
    padding-bottom: unset;
    font-size: 2rem;
    text-shadow: 1px 0px 3px black;
}
    #name{
        margin: unset !important;
    }

    #subtitle{
        margin: unset !important;
    }

    #logo{
        height: 100%;
    }

    .headers{
        font-size: xx-large;
        text-decoration: underline;
        padding: 0rem 0rem 1rem 0rem;
        margin: unset;
        text-shadow: 1px 0px 3px black;
    }

    #bioContainers, #proyectContainers, #info{
        background: unset !important;
        align-items: stretch;
        padding-top: unset;
    }

    #info{
        background-color: var(--color2-deg) !important;
        box-shadow: 0 -1rem 2rem 0.25rem rgb(0 0 0 / 57%);
        border-top-width: thin;
        border-top-style: inset;
        border-top-color: black;
        padding-top: 4rem;
    }

    .skillLogos{
        width: 3.5rem;
    }

    .headerDiv{
        display: flex;
    }

.bigger{
    width: 30rem !important;
    height: unset !important;
    transition: .3s;
}

.larger{
    height: unset !important;
    aspect-ratio: unset !important;
    transition: .3s;
}

.shadow{
    border: 1px solid black;
    border-radius: inherit;
    transition:  .3s;
}

.shadow:hover{
    box-shadow: inset 0px 0px 2px 0px black;
    border-radius: inherit;
    background-color: var(--color2);
}

#bio{
    width: 100%;
    display: flex;
    justify-content: center;
    box-shadow: 0 1rem 2rem 0.25rem rgb(0 0 0 / 57%);
    z-index: 1;
    padding-bottom: unset;
    background-color: var(--color2-deg);
    border-bottom-width: thin;
    border-bottom-style: inset;
    border-bottom-color: black;
}

#about{
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    justify-content: space-between;
    text-shadow: none;
    transition: .3s;
}

.text{
    padding: .5rem;
}

#me{
    width: 30rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    transition: .3s;
}

#image{
    display: flex;
    justify-content: center;
    box-shadow: 0px 1px 5px 0px black;
}

#ilustracion{
    width: 100%;
    padding-top: 2rem;
}

#contact{
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    justify-content: center;
    align-items: center;
    transition: .3s;
}

#pages{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    overflow: hidden;
    flex-wrap: wrap;
    padding: 2rem 0rem;
    background-color: var(--color4-deg);
    border-top-width: thin;
    border-top-style: inset;
    border-top-color: black;
    border-bottom-width: thin;
    border-bottom-style: inset;
    border-bottom-color: black;
    padding-top: 4rem;
}

#support{
    background-color: var(--color3);
    border-top-width: thin;
    border-top-style: inset;
    border-top-color: black;
    border-bottom-width: thin;
    border-bottom-style: inset;
    border-bottom-color: black;
    padding-top: 4rem;
}

#wrapper{
    display: flex;
    flex-direction: row;
    transition: opacity 1s ease-out, transform 0.75s ease-out;
    transition-delay: 0.25s;
    position: relative;
    height: 32rem;
}

.blank{
    width: 17.5rem;
    min-width: 10rem;
    display: inline-block;
    border: 0;
    position: relative;
    background-color: var(--color3-deg);
    box-shadow: inset 0px 0px 15px 0px black;
    border-radius: 1rem 0rem 0rem 1rem;
    transition: .3s;
}

.blank:hover{
    background-color: var(--color3);
    box-shadow: inset 0px 0px 2px 0px black;
    width: 37.5rem;
}

.apps{
    display: inherit;
    transition: .3s;
    position: absolute;
    height: 100%;
}

.content{
    padding: 1.5rem;
    z-index: 1;
    background-color: var(--color3-deg);
    border-radius: 1rem 1rem 1rem 1rem;
    transition: .3s;
    width: 100%;
    opacity: 0;
    display: flex;
    justify-content: center;
    overflow: hidden;
    align-items: center;
}

.content:hover{
    border: 1px solid black;
    border-radius: inherit;
    opacity: 100;
}

.panel{
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: flex-start;
    overflow-x: hidden;
    overflow-y: hidden;
    border-radius: 1rem;
    background-color: var(--color3);
    position: relative;
}

.panel2{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tamano{
    font-size: x-large;
}

.espacio {
    padding: 1rem 1rem 1rem 0rem;
}

.container{
    padding: 2rem 1rem;
    width: 25rem;
    height: 25rem;
}

.logos{
    transition: .3s;
}

.qrCodes{
    height: 50%;
}

.qrContainers{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    height: 100%;
}

.buttonLinks{
    color: white;
    text-shadow: 1px 1px 2px black;
    font-size: initial;
    padding: 0.75rem;
    background-color: var(--color1);
    border: 1px solid black;
    border-radius: 1rem;
    box-shadow: 0 1px 5px 1px rgb(0 0 0 / 57%);
    font-size: large;
    color: white;
    font-weight: 900;
    transition: .3s;
    font-family: inherit;
    min-width: 6rem;
    height: 3.5rem;
    margin: 0.5rem;
}

.buttonLinks:hover{
    color: var(--color1-deg);
    background-color: white !important;
}

.buttonLinksOrange:hover{
    color: #ff7f50;
    background-color: white !important;
}

.buttonLinksGreen:hover{
    color: #31c48d;
    background-color: white !important;
}

@media only screen and (max-width: 1000px){
    .headerDiv{
        flex-direction: column;
        align-items: center;
    }

    #space{
        display: none;
    }

    .bigger{
        width: 100% !important;
    }

    .larger{
        width: 100% !important;
    }

    #me{
        width: 100% !important;
        flex-direction: unset;
    }

    #contact{
        width: 100%;
    }
}

@media only screen and (max-width: 600px){
    #header{
        font-size: 1.5rem;
    }
}

@media only screen and (max-width: 530px){
    .headerDiv{
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    #name{
        margin: unset !important;
        font-size: large;
    }

    #subtitle{
        margin: unset !important;
        font-size: larger;
    }

    #space{
        display: none;
    }
}

@media only screen and (max-width: 450px){
    #bioContainers, #proyectContainers, #infoContainers {
        padding-top: inherit;
    }

    .bigger{
        aspect-ratio: unset !important;
        padding: 0rem 1rem 2rem 1rem !important;
        width: unset !important;
    }

    #about{
        width: 100%;
    }

    .container{
        width: 90% !important;
        height: 100%;
        aspect-ratio: unset !important;
    }

    section{
        flex-direction: column;
        align-content: center;
    }

    .content{
        opacity: 100;
        z-index: unset;
        height: 100%;
        width: unset;
        border-radius: 0rem 0rem 1rem 1rem;
        border: 1px solid black;
    }

    .apps{
        position: unset;
    }

    .panel{
        flex-direction: column;
    }

    .panel1{
        flex-direction: unset;
    }

    .panel2{
        width: unset;
    }

    .logos{
        width: 100%;
    }

    #me{
        flex-direction: column;
    }
}

@media only screen and (max-width: 410px){
    .headerDiv{
        font-size: x-small;
    }

    .apps{
        height: unset;
    }

    .content{
        flex-direction: column;
    }

    #navBar{
        font-size: inherit;
    }
}