:root{
    --font-size: 1em;
    --width: 60%;
    --nav: #007b3f;
    --nav_background:#006936;
    --card_border: #01b05b80;
    --secondarycolor: #7f7f7f;
    --text-color: #fafafa;
    --link: #007b3f;
    --linkhover: #006936;
    --code-width: 5.5em;
    --code-radius: 0.65em;
    --java: #b07219;
    --python: #306998;
    --kotlin: #A97BFF;
    --js: #f1e05a;
    --sass: #c6538c;
    --code: #40e0d0;
    --heart: #01b05b;
}

body {
    font-family: 'Open Sans', sans-serif;
    font-size: var(--font-size);
    margin: 0;
    width: 100%;
    text-align: center;
    min-width: 350px;
}

nav {
    width: min(100%, 1200px);
    margin: 0 auto;
    background: var(--nav_background);
    color: white;
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: fixed;
    z-index: 2;
}

nav ul {
    padding: 0;
    margin: 0 3em;
    list-style-type: none;
    align-items: rigth;
    display: flex;
}

.opacity {
    width: 100vw;
    height: 100vh;
    position: fixed;
    padding: 0;
    opacity: 0.75;
    background: #000000; 
}

main {
    display: flex;
    flex-flow: column;
}

a {
    text-decoration: none;
    color: var(--link);
}

a:hover {
    text-decoration: underline;
    color: var(--linkhover);
}

.navlist {
    margin: 0;
    text-align: justify;
    cursor: pointer;
}

.navlist a {
    text-decoration: none;
    color: white;
    padding: 1em;
}

.navlist a:hover {
    background-color: var(--nav);
    color: white;
    transition-duration: 0.25s;
}

.nav-container {
    display: flex;
    justify-content: space-between;
}

.right {
    margin-right: 2em;
}

p.left {
    float: left;
    margin-left: 2em;
    font-weight: bold;
}

section {
    margin: 2em auto;
    width: var(--width);
}

.contactme {
    display: flex;
}

#lista {
    display: none;
}

#aboutme {
    margin: 0 auto;
    display: flex;
    width: min(100%, 1200px);
    flex-flow: row wrap;
    justify-content: space-between;
}

#aboutme p {
    color: var(--text-color);
    margin: 0.5em 1em 0.5em 0;
    text-align: justify;
}

#aboutme a {
    text-decoration: none;
    color: var(--text-color);
}

#aboutme a:hover {
    color: var(--text-color);
}

#header-text {
    width: 50%;
    margin: auto 0;
}

#projects {
    padding: 1em;
    text-decoration: none;
    width: var(--width);
}

.subtitle {
    color: var(--secondarycolor);
    font-size: 1em;
    margin: 0;
}

#ulProjects {
    display: flex;
  	justify-content: center;
  	width: 1280px;
  	max-width: 100%;
  	margin: auto;
    flex-wrap: wrap;
}

.noimage {
  height: 80px;
}

.projectsText {
    text-align: justify;
    min-height: 100px;
}

.col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 350px;
    margin: 1.5em;
}

.row {
    display: flex;
    flex-direction: row;
    justify-content: left;
    margin: 1em;
    width: 100%;
    align-items: center;
}

.row .image-container {
    width: 6em;
    height: 6em;
    border: black solid 50%;
    display: flex;
}

.row .titleProject {
    margin-left: 1em;
}

.row .image-container img {
    width: 100%;
    height: auto;
    margin: auto;
}

.row-project img {
    width: 6em;
    height: 6em;
    border-radius: 50%;
    object-fit: scale-down;
} 

.row-langs {
    display: flex;
    flex-direction: row;
    justify-content: left;
    margin-right: 1em;
    align-items: center;
}

.row-langs p {
    margin: 0;
}

.row-project {
    display: flex;
    flex-flow: row wrap;
    justify-content: left;
    margin: 0.5em;
    width: 100%;
    align-items: center;
}

.row-project .title-project {
    margin: auto 1em;
    font-weight: bold;
    font-size: 1.4em;
}

.image-header {
    height: 6em;
}

.image-header .title-project {
    margin: 1em 0;
}

.image-header img {
    margin-right: 1em;
}

.project {
    box-shadow: 0 0 0 1px #0000000D, 0px 20px 50px 0px #0000001A;
    border-radius: 1em;
    padding: 1em;
    transition: .3s;
}

.project:hover, .project:focus-within {
    box-shadow: 0 0 0 2px var(--card_border), 0 10px 60px 0 #0000001A;
    transform: translatey(-5px);
}

.text-project {
    margin: 1em 0;
    text-align: justify;
}

.circle {
    width: 0.75em;
    height: 0.75em;
    background: #b07219;
    border-radius: 50%;
    margin-right: 0.5em;
}

.java {
    background: var(--java);
}

.python {
    background: var(--python);
}

.kotlin {
    background: var(--kotlin);
}

.javascript {
    background: var(--js);
}

.sass {
    background: var(--sass);
}

.invisible {
    display: inline-grid;
}

.contact-invisible {
    display: none;
}

.titleProject{
    font-weight: bold;
    font-size: 1.5em;
    margin-bottom: 0.5em;
}

#projects a{
    text-decoration: none;
    color: var(--link);
    margin-bottom: 0.5em;
    margin-top: auto;
}

#projects a:hover{
    color: var(--linkhover);
}

.bottom-svg {
    transform: rotateX(180deg) rotateY(180deg);
    position: relative;
    top: 5em;
}

.wave {
    width: 100%;
}

footer {
    background: #1b1f24;
    padding: 1em;
    font-size: 0.9em;
    color: white;
    margin-bottom: 0;
    margin-top: auto;
}

footer p {
    position: relative;
    margin: 0;
    z-index: 1;
}

#aboutme img {
    border-radius: 50%;
    width: 350px;
    margin: 0 1em;
}

hr {
    border: 1px solid #595959;
    border-radius: 0.2em;
    width: var(--width);
}

header {
    background: var(--nav_background);
    padding: 5em 0 0;
}

header h1 {
    margin: 0.5em 0;
    font-size: 2.5em;
    color: white;
    width: fit-content;
}

header .subtitle {
    color: white
}

#header-projects {
    display: flex;
    flex-flow: column;
    align-items: center;
    color: white;
}

#header-projects h1 {
    width: 100%;
    text-align: center;
}

#header-projects p {
    size: 1em;
}

.fa-code {
  color: var(--code);
}

.fa-heart {
  color: var(--heart);
}

@media only screen and (max-width: 885px) {
    :root{
        --font-size: 1.05em;
        --width: 90%;
    }

    header {
      padding-bottom: 3em;
    }

    body {
        font-size: var(--font-size);
    }

    #ulProjects {
        flex-wrap: wrap;
    }

    #icon {
        width: 1em;
        padding: 1em;
        margin: 0 2em 0 0;
    }

    #lista {
        display: initial;
        float:right;
        text-align: right;
        color: white;
    }

    .cosillas{
        display: inline-grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        background: black;
        align-content: center;
        padding: 0;
    }

    nav {
        flex-flow: column;
    }

    nav ul {
        flex-flow: column;
        margin: 0;
    }

    .navlist{
        padding: 0.5em 1em;
        width: inherit;
    }

    .navlist a {
        display: block;
        padding: 0.5em;
        height: 1.5em;
    }

    .visible {
        display: list-item;
    }

    .contactme {
        display: none;
    }

    .invisible {
        display: none;
    }

    .left {
        text-align:left;
    }

    .right {
        margin-right: 2em;
        font-weight: bold;
        float: none;
    }

    hr, section, #projects {
        margin: auto;
        width: var(--width);
    }

    #aboutme p {
        width: var(--width);
        text-align: justify;
    }

    #aboutme img {
        margin: 1em auto;
        width: 250px;
    }

    #header-text {
        margin: 1em 1.5em;
        width: 100%;
    }

    #header-text h1, #header-text p {
        width: 100%;
        margin: .5em auto;
    }

    .bottom-svg {
        transform: rotateX(180deg) rotateY(180deg);
        position: relative;
        top: 10px;
    }

    .row-project {
        flex-flow: row;
    }

    .row-project img {
        width: 5em;
        height: 5em;
    }

    .row-project .title-project {
        margin: 0.5em;
        margin-left: 1em;
        text-align: left;
    }

    .langs {
        flex-flow: row wrap;
        margin: 0.5em 0;
    }
}