:root{
  /*Font*/
    --font-family-serif: "EB Garamond", serif;
    --font-weight-normal: 400;
    --font-size: 0.92em;
    --letter-spacing: -0.025em;
    --line-height: 0.9;

    --font-size-phone: 2em;
    --letter-spacing-phone: -0.025em;
    --line-height-phone: 1.2;
  
  /*Colors*/
    --color-primary: #f6f6f6;
}

@font-face {
    font-family: 'AveMaria';
    src: url('./0media/type/AveMaria-Regular.otf') format('embedded-opentype'), /* Internet Explorer */
         url('./0media/type/AveMaria-Regular.otf') format('woff2'),             /* Super Modern Browsers */
         url('./0media/type/AveMaria-Regular.otf') format('woff'),              /* Pretty Modern Browsers */
         url('../0media/type/AveMaria-Regular.otf') format('truetype'),          /* Safari, Android, iOS */
         url('./0media/type/AveMaria-Regular.otf') format('svg');               /* Legacy iOS */
}

* {
    background: var(--color-primary)
}


@media(width > 48em){
    /*Links Style*/
    a {
        outline: none;
        text-decoration:none; 
    }
    a:link {
        background: local;
        color: black;
    }
    a:visited {
        color: black;
    }
    a:focus {
        color: var(--color-primary);
        background-color: black;
    }
    a:hover {
        color: var(--color-primary);
        background-color: black;
    }

    .body{
        overflow: hidden;
    }

    /*Container Base*/
    .container-0{
        display:flex;
        height:100%;
        width:100%;
        justify-content: center;
        align-items: center;
        background-color: var(--color-primary);
    }

    /*Segundo Container*/
    .container {
        display: grid;
        grid-template-rows: repeat(8, minmax(75px, 90px));
        grid-template-columns: repeat(8, minmax(110px, 175px));
    }

    /*NavBar*/
    .nav-projects {
        grid-area: 1 / 5 / 1 / 5; 
        background: none; 
        cursor:pointer;  
        z-index: 10;
    }
    .nav-contact{
        grid-area: 1 / 7 / 1 / 7; 
        background: none; 
        cursor:pointer; 
        z-index: 10;
    }
    .navbar0{
        background: none;
        grid-area: 1 / 1 / 1 / 3;
        z-index:1;
    }
    .project-container{
        grid-area: 2 / 5 / 3 / 7; 
        z-index: 12; 
        background-color: none;
        background: none;
        border-color: none;
    }
    .contacts-0{
        grid-area: 2 / 7 / 3 / 9; 
        background: none;
        z-index:12;
    }
    .contacts-1{
        grid-area: 5 / 7 / 7 / 9;
        background: none;
        z-index:12;
    }
    .look-projects{
        display: flex;
        grid-area: 8 / 3 / 9 / 7;
        justify-content: center;
        align-items: center;
        background: none;
        z-index:12;
    }
    .text-look {
        display: initial;
    }
    .no-more{
        display: none;
    }

    p{
            user-select: none;
            -webkit-user-select: none;
            -webkit-touch-callout: none;
            -moz-user-select: none;
            -ms-user-select: none;
        font-family: var(--font-family-serif);
        font-weight: var(--font-weight-normal);
        font-size: var(--font-size);
        letter-spacing: var(--letter-spacing);
        line-height: var(--line-height);
    }

    p1{
            user-select: none;
            -webkit-user-select: none;
            -webkit-touch-callout: none;
            -moz-user-select: none;
            -ms-user-select: none;
        font-family: "AveMaria";
        font-weight: var(--font-weight-normal);
        font-size: 2em;
        letter-spacing: var(--letter-spacing);
        line-height: var(--line-height);
    }

    .contame-todo{
        display: flex;
        grid-area: 3 / 1 / 5 / 3; 
        background: none;
        z-index:1;
    }


    /*Project Page*/
    .project-photo {
        grid-area: 2 / 3 / 8 / 7; /*2 / 3 / 7 / 7;*/
        z-index: 10;
        background-color: none;
        justify-content: center;
        align-items: center;
        display: flex;
    }
    .project-title{
        grid-area: 7 / 5 / 8 / 7; 
        z-index: 12; 
    }
    .project-text{
        display: initial;
        grid-area: 7 / 2 / 8 / 4; 
        z-index: 12; 
    }
    .project-details{
        grid-area: 7 / 6 / 8 / 8; 
        z-index: 12; 
    }
    .pag-nav-prev{
        grid-area: 4 / 2 / 5 / 3; 
        z-index: 15; 
    }
    .pag-nav-next{
        grid-area: 4 / 7 / 5 / 8; 
        z-index: 15; 
    }
    .project-nav-prev{
        grid-area: 8 / 4 / 9 / 5; 
        z-index: 15; 
    }
    .project-nav-next{
        grid-area: 8 / 5 / 9 / 6; 
        z-index: 15; 
    }
    .info0{
        grid-area: 3 / 5 / 5 / 7; 
        background: none;
        z-index: 1;
    }
    .info1{
        grid-area: 5 / 7 / 7 / 9;
        background: none;
        z-index:1;
    }
    .text-input{
        grid-area: 2 / 3 / 7 / 7; 
        z-index: 20;
        background-color: none;
        justify-content: center;
        align-items: end;
        display: flex;
    }
    .type-written{
        grid-area: 2 / 3 / 7 / 7; 
        z-index: 18; 
        background-color: none;
        justify-content: center;
        align-items: center;
        display: flex;
    }
}

@media(width <= 1000px){
    /*Mobile Disable Displays*/
    .eye-tracker {
        display: none;
    }
    .desk {
        display: none;
    }

    /*Container Base*/
    .container-0{
        display:flex;
        height:100%;
        width:100%;
        justify-content: center;
        align-items: center;
        background-color: var(--color-primary);
    }

    /*Segundo Container*/
    .container {
        display: grid;
        grid-template-rows: repeat(8, minmax(120px, 300px));
        grid-template-columns: repeat(4, minmax(130px, 225px));
    }

    /*NavBar*/
    .nav-projects {
        grid-area: 1 / 3 / 1 / 3; 
        background: none; 
        cursor:pointer;  
        z-index: 10;
    }
    .nav-contact{
        grid-area: 1 / 4 / 1 / 4; 
        background: none; 
        cursor:pointer; 
        z-index: 10;
    }
    .navbar0{
        background: none;
        grid-area: 1 / 1 / 1 / 3;
        z-index:1;
    }
    .project-container{
        grid-area: 1 / 3 / 7 / 5; 
        margin-top: 4em;
        z-index: 12; 
        background-color: none;
        background: none;
        border-color: none;
    }
    .contacts-0{
        grid-area: 2 / 3 / 3 / 5; 
        background: none;
        z-index:12;
    }
    .contacts-1{
        grid-area: 3 / 3 / 7 / 5;
        background: none;
        z-index:12;
    }

    p{
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
        -moz-user-select: none;
        -ms-user-select: none;
    font-family: var(--font-family-serif);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-phone);
    letter-spacing: var(--letter-spacing-phone);
    line-height: var(--line-height-phone);
    }

}