/*
 Naranja base: #FFA828
 Marrón: #B2700E
 Naranja 2; #FFB241
 Azul: #0068B2
 Azul claro: #28A5FF
 Azul casi negro: #111133
*/

body {
    /* This allow the browser calculate the correct
       viewport width. The viewport includes scrollbars
       so it's necesary for the inverted sections where
       we extends margins to de viewport width.
       
       See https://www.w3.org/TR/css3-values/#viewport-relative-lengths
       
       The viewport-percentage lengths are relative to the
       size of the initial containing block. When the height
       or width of the initial containing block is changed,
       they are scaled accordingly. However, when the value of
       overflow on the root element is auto, any scroll bars
       are assumed not to exist. Note that the initial 
       containing block’s size is affected by the presence of 
       scrollbars on the viewport. */
    overflow-y: scroll;
    overflow-x: hidden;
}

/* Font settings */

h1, h2, h3, h4, h5, h6, strong {
    font-family: Montserrat, "Open Sans", Arial, Helvetica, sans-serif;
    color: #111133;
}

h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {
    font-weight: 300;
    font-size: inherit;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.6em;
}

.visible {
    visibility: visible !important;
}

.bigger {
    font-size: 1.25em;
}

.center-text {
    text-align: center;
}

/* General rules */
img.responsive {
    max-width: 100%;
    height: auto;
}

/* Header and cover */

.header > .cover {
    position: relative;
    display: block;
    background: url("../images/cover-image.jpg") center center no-repeat;
    background-size: cover;
    width: 100%;
    height: 100vh;
}

.header > .header-name {
    position: absolute;
    bottom: 18%;
    right: 10%;
    color: #c0c0c0;
    font-size: 50px;
    text-shadow: 2px 2px #333333;
    opacity: 0;
    animation: fadeDownward 1s ease-in .3s forwards;
}

.header > .header-name span {
    font-weight: 300;
}

.header > .header-job {
    position: absolute;
    bottom: 18%;
    right: 10%;
    color: #FFA828;
    font-size: 40px;
    opacity: 0;
    animation: fadeUpward 1s ease-out .8s forwards;
}

.header > .typewriter-container {
    position: absolute;
    top: 5%;
    left: calc(100% - 14em);
    width: 100%;
    padding-left: 3em;
    font-size: 30px;
    visibility: hidden;
}

.typewriter {
    font-family: "Roboto Mono", Courier, monospace;
    color: #c0c0c0;
    font-size: 30px;
}

.has-cursor::after {
    content: "_";
    color: #FFA828;  
    animation: 800ms blink step-end infinite;
}

/* Section general settings */

.section-title::after {
    content: "_";
    color: #FFA828;
}

.section-container, .footer-content {
    padding: 2em 0;
    position: relative;
}

.inverted {
    background-color: #0068B2;
    color: #f0f0f0;
    /*
    Using calc function we can calculate margins:
    
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    but we can use a different approach
    without using calc function, only pure CSS
    */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
}

.inverted h1, .inverted h2, .inverted h3, .inverted h4, .inverted h5, .inverted h6, .inverted a {
    color: #ffffff;
}

.inverted strong {
    color: inherit;
    font-size: inherit;
}

/* Profile section */

.my_video {
    width: 100%;
    height: auto;
    /* compensate h1 size on left block */
    margin-top: 7em;
}

.speciality {
    text-align: center;
}

.speciality span {
    color: #B2700E;
}

.speciality [class*="icon-"] {
    transition: transform .5s ease;
}

.justify {
    text-align: justify;
}


/* Education section */

#section-education {
    background-image: url("../images/graduation-907565-blue.jpg");
    background-size: cover;
    background-position: center;
}

/* about me section */

img.left-aligned {
    max-width: 40%;
    float: left;
    margin-right: 2em;
    margin-bottom: 2em;
}

img.right-aligned {
    max-width: 40%;
    float: right;
    margin-left: 2em;
    margin-bottom: 2em;
}

/* Footer */

.recoding {
    font-family: Lato;
    color: #ffffff;
    font-size: 110%;
}

.recoding > span {
    font-family: Lato;
    color: #FFA828;
}

.footer {
    background-color: #111133;
    color: #f0f0f0;
    min-height: 280px;
}

.footer a {
    color: #f0f0f0;
    text-decoration: none;
}

.social-links {
    text-align: right;
}

.social-links a {
    margin-left: 20px;
}

.social-links a:hover {
    color: #FFA828;
    transition: all .2s;
}

/* contact section */

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