/* CSS  By Daniel Lizarte Cáceres */

/* General Structure */
body, html {
    height: 100%;
    margin: 0;
}

/* Body Desktop */
body#initIndex {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background:url("../resources/wallpaper_tech.png"),  linear-gradient(to top,#0a1b2a 15%, #0f2e46 40%,#1e3f66 60%, #3a5d7e 80%,#58a7c7 100% );
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    overflow: hidden; 
}

/* Init Sesion  */
#centeredContainerSesion {
    display: block;
    width: 30vw; 
    height: 30vw; 
    background-image: url("../resources/init_window.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    z-index:1;
}

#centeredContainerSesionTitle {
    position: fixed;
    width: 1000px;
    height: 50px;
    
    margin-top:42%;
    margin-left: 10%;
    font-size: 2vw; 
    font-family: consolas;
    color: #317f98;
    font-weight: bold;
   
}

#progressBlockBarContent {
    position: fixed;
    width: 20vw;
    height: 1vw;
    margin-top:67%;
    margin-left: 16%;
    font-size: 2vw;
}


/* Display:none; to  Hide elements before initiating session then JS activates them*/

/* Icons Desktop Row 1 */
#iconContainer1 {
    display: flex;
    justify-content: space-around;
    width: 30%;
    margin-top: 1%;

    
}

/* Icon Learning Desktop */

#icon_file_learning {
    display: none;
    width: 6em;
    height: auto;
    cursor: pointer;
}

h3#text_learning {
    display: none;
    width: 102%;
    text-align: center;
    font-size: 120%;
    font-family: consolas;
    font-weight: bolder;
    color: rgb(210, 210, 210);
    background-color: rgba(0, 0, 0, 0.4);    
    border-radius: 0.3vw;
    overflow: hidden;
    word-wrap: break-word;
    word-break: normal;
    cursor: pointer;
    transition: color 0.3s;
   
}

#learning_file:hover  h3#text_learning {
    color:white;
}


/* Icon Projects Desktop */

#icon_file_project {
    display: none;
    width: 6em;
    height: auto;

    cursor: pointer;
   
}

h3#text_project {
    display: none;
    width: 100%;
    font-size: 120%;
    font-family: consolas;
    font-weight: bolder;
    color: rgb(210, 210, 210);
    background-color: rgba(0, 0, 0, 0.4);   
    text-align: center;
    border-radius: 0.3vw; 
  
    overflow: hidden;
    cursor: pointer;
    transition: color 0.3s;
}

#project_file:hover  h3#text_project {
    color:white;
}


/* Icons Desktop Row 2 */
#iconContainer2 {
    display: flex;
    justify-content: space-around;
    width: 30%;
    margin-top: 2%;    
}

/* Icon Experience Desktop */

#icon_file_experience {
    display: none;
    width: 6em;
    height: auto;
    margin-left: 4%;
    cursor: pointer;
}

h3#text_experience {
    display: none;
    width: 100%;
    font-size: 120%; 
    
    font-family: consolas;
    font-weight: bolder;
    color: rgb(210, 210, 210);
    text-align: center;
    background-color: rgba(0, 0, 0, 0.4);   
    border-radius: 0.3vw;
    /*box-shadow: 0 4px 6px #000;*/
    overflow: hidden;

    cursor: pointer;
    transition: color 0.3s;
}

#experience_file:hover  h3#text_experience{
    color:white;
}

/* Icon Resume Desktop */

#icon_file_resume {
    display: none;
    width: 6em;
    height: auto;
    cursor: pointer;
}

h3#text_resume {
    display: none;
    width: 100%;
    font-size: 120%;
    font-family: consolas;
    font-weight: bolder;
    color: rgb(210, 210, 210);
    background-color: rgba(0, 0, 0, 0.4);  
    border-radius: 0.3vw; 
    text-align: center;
    overflow: hidden;
    cursor: pointer;
    transition: color 0.3s;
}

#resume_file:hover  h3#text_resume {
    color:white;
     
}


/* Icons Desktop Row 3 */
#iconContainer3 {
    display: flex;
    justify-content: space-around;
    width: 30%;
    margin-top: 2%;   
    
}

/* Icon AboutMe Desktop */

#icon_file_aboutme {
    display: none;
    width: 6em;
    height: auto;
    margin-left: 3.5%;
    cursor: pointer;

}

h3#text_aboutme {
    display: none;
    width: 100%;
    font-size: 120%; 
    font-family: consolas;
    font-weight: bolder;
    color: rgb(210, 210, 210);
    background-color: rgba(0, 0, 0, 0.4);  
    border-radius: 0.3vw; 
    text-align: center;
    overflow: hidden;
    cursor: pointer;
    transition: color 0.3s;
    margin-left:6%;
}

#aboutme_file:hover  h3#text_aboutme {
    color:white;
     
 }

/* Icon Contact Desktop */

#icon_file_contact {
    display: none;
    width: 6em;
    height: auto;
    cursor: pointer;
}

h3#text_contact {
    display: none;
    width: 100%;
    font-size: 120%;
    font-family: consolas;
    font-weight: bolder;
    color: rgb(210, 210, 210);
    background-color: rgba(0, 0, 0, 0.4);   
    text-align: center;
    border-radius: 0.3vw;
    overflow: hidden;
    cursor: pointer;
    transition: color 0.3s;
}

#contact_file:hover  h3#text_contact {
   color:white;
    
}
   

/* For Vertical Mobile/Tablet */
@media only screen and (max-width: 900px) and (max-height: 900px) and (orientation: portrait), 
       only screen and (max-width: 900px) and  (orientation: portrait) {

    /* Body Desktop */
    body#initIndex {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        background:url("../resources/wallpaper_tech.png"),  linear-gradient(to top,#0a1b2a 15%, #0f2e46 40%,#1e3f66 60%, #3a5d7e 80%,#58a7c7 100% );
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 200vh;
        overflow: hidden; 
    }

        
    /* Init Sesion */

    #centeredContainerSesion {
        display: block;
        width: 90vw; 
        height: 90vw; 
        background-image: url("../resources/init_window.png");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        overflow: hidden;
        z-index:1;
    }

    #centeredContainerSesionTitle {
        position:fixed;
        width: 1000px;
        height: 50px;
        
        margin-top:40%;
        margin-left: 19%;
        font-size: 6vw; 
        font-family: consolas;
        color: #317f98;
        font-weight: bold;
    
    }

    

    #progressBlockBarContent {
        position:fixed;
        width: 160px;
        height: 15px;
        margin-top:67%;
        margin-left: 24%;
    } 
    
    
    #iconContainer1 {
        display: flex;
        justify-content: space-around;
        width: 100%;
        margin-top: 15%;
}

    /* Icon Learning Desktop */

    #learning_file { 
        transform: scale(0.6);
    }

    #icon_file_learning {
        width: 7em;
        height: auto;
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 15px; 
    }

    h3#text_learning {
        width: 100%;
        font-size: 170%; 
        overflow: visible;
        word-break:normal;
        cursor: pointer;
        border-radius: 1.3vw;
        overflow: hidden;
        cursor: pointer;
    }

    /* Icon Projects Desktop */

    #project_file {    
        transform: scale(0.6); 
        
    }

    #icon_file_project {
        width: 7em;
        height: auto;
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 15px; 

    }

    h3#text_project {
        width: 100%;
        font-size: 170%; 
        overflow: visible;
        word-break:normal;
        cursor: pointer;
        border-radius: 1.3vw;
        overflow: hidden;
        cursor: pointer;
    }



    /* Icon Experience Desktop */

    #iconContainer2 {
        display: flex;
        justify-content: space-around;
        width: 100%;
    }

    #experience_file {
    
        width:6.7em;
        transform: scale(0.6);
        
    }

    #icon_file_experience {
        width: 7em;
        height: auto;
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 15px; 
        background-image: url("../resources/experience_mobile.png"); 
        margin-left:0%;
    }


    h3#text_experience {
        width: 141%;
        font-size: 170%; 
        margin-left: -17%;
        border-radius: 1.3vw;
        text-align: center;
        overflow: visible;
        cursor: pointer;
        overflow: hidden;
        cursor: pointer;
    }


    /* Icon Resume Desktop */

    #resume_file {      
        transform: scale(0.6); 
    }

    #icon_file_resume {
        width: 7em;
        height: auto;
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 15px; 
    }

    h3#text_resume {
        width: 100%;
        font-size: 170%; 
        border-radius: 1.3vw;
        overflow: visible;
        cursor: pointer;
        text-align: center;

        overflow: hidden;
        cursor: pointer;
    }




    /* Icon AboutMe Desktop */
    #iconContainer3 {
        display: flex;
        justify-content: space-around;
        width: 100%;
    }

    #aboutme_file {
        transform: scale(0.6);     
    }

    #icon_file_aboutme {
        width: 7em;
        height: auto;
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 15px; 
        margin-left:0%;
    }


    h3#text_aboutme {
        width: 100%;
        font-size: 170%;
        margin-left: -3%; 
        border-radius: 1.3vw;
        overflow: visible;
        cursor: pointer;
        text-align: center;
            
    
        overflow: hidden;
        cursor: pointer;
    }

    /* Icon Contact Desktop */

    #contact_file {
        transform: scale(0.6);
    }

    #icon_file_contact {
        width: 7em;
        height: auto;
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 15px; 

    }

    h3#text_contact {
        width: 100%;
        font-size: 170%;
        border-radius: 1.3vw;
        overflow: visible;
        cursor: pointer;
        text-align: center;

        overflow: hidden;
        cursor: pointer;
    
    }



}



/*For Horizontal Mobile/Tablet*/
@media only screen and (min-width: 600px) and (max-width: 950px) and (orientation: landscape) {

    /* Init Sesion */

    #centeredContainerSesion {
        display: block;
        width: 60vw; 
        height: 60vw; 
        background-image: url("../resources/init_window.png");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        overflow: hidden;
        z-index:1;
    }

    

    #centeredContainerSesionTitle {
        position:fixed;
        width: 1000px;
        height: 50px;
        
        margin-top:40%;
        margin-left: 18%;
        font-size: 4vw; 
        font-family: consolas;
        color: #317f98;
        font-weight: bold;
    
    } 


    #progressBlockBarContent {
        position:fixed;
        width: 265px;
        height: 17px;
        margin-top:67%;
        margin-left: 20%;
    } 

     /* Body Desktop */
     body#initIndex {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        background:url("../resources/wallpaper_tech.png"),  linear-gradient(to top,#0a1b2a 15%, #0f2e46 40%,#1e3f66 60%, #3a5d7e 80%,#58a7c7 100% );
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 200vh;
        overflow: hidden; 
    }

    #iconContainer1 {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin-top: -1%;
    }

    #learning_file {
        transform: scale(0.6);
        margin-left:2.5%;
        
    }

    #icon_file_learning{
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 15px; 
    }

    h3#text_learning {
        margin-left:4%;
    }

    #project_file {
       
        transform: scale(0.6); 
        margin-right:2.5%;
        
    }

    #icon_file_project{
        margin-left:4%;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 15px; 
    }

    h3#text_project {
        margin-left:4%;
    }



    #iconContainer2 {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin-top:-5%;
    }

    #experience_file {
     
        transform: scale(0.6);
        
        
    }

    #icon_file_experience {
        margin-left:33%;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 15px; 
    }


    h3#text_experience {
        
        width: 139%;
        margin-left:11%
    }

    #resume_file {
        margin-right:2%;
        transform: scale(0.6); 
        
    }

    #icon_file_resume {
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 15px; 
    }

    h3#text_resume {
       
        padding-bottom: 0.0vh;
        
    }

    #iconContainer3 {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin-top: -5%;
    }

    #aboutme_file {

        margin-left:2.5%;
        transform: scale(0.6);
        
    }

    #icon_file_aboutme {
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 15px; 
    }

    #contact_file {
      
        margin-right:2%;
        transform: scale(0.6);

    }

    #icon_file_contact {
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 15px; 
    }

    h3#text_contact {
       margin-left:5%;
       padding-bottom: 0.0vh;
        
    }

    

}