html{
    font-size: 62.5%;
    box-sizing: border-box;
}

*, *:before, *:after{
    box-sizing: inherit;
}

body{
    font-family: 'Roboto', sans-serif;
    font-size: 1.6rem;
    line-height: 2;
    background-color: #030917;
}

/* Global Styles */

.container{
    width: 90%;
    max-width: 120rem;
    margin: 0 auto 0 auto;
}

.section{
    margin-top: 2rem;
    margin-bottom: 2rem;
}

a{
    text-decoration: none;
}

h1 {
    color: white;
    font-size: 3.8rem;
}

h2 {
    color: white;
    font-size: 3.5rem;
}

h3 {
    font-size: 3rem;
}

h4 {
    font-size: 2.6rem;
}

.fw-300{
    font-weight: 300;
}

/* utilities */

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

.block {
    display: block!important;
}

/* Button */

.button {
    color: white;
    font-weight: 500;
    text-decoration: none;
    font-size: 2rem;
    padding: 1rem 3rem;
    margin-top: 3rem;
    display: inline-block;
    text-align: center;
    border: none;
    border-radius: 1.5rem;
    display: block;
    flex: 0 0 100%;
}

.warning{
    background-color: orange;
}

.success{
    background-color: greenyellow;
}

.error{
    background-color: red;
}

.boton:hover{
    cursor: pointer;
}

/* navbar */

@media (min-width: 768px)
{
    .header{
        display:  flex;
        justify-content: flex-end;
        align-items: center;
    }
}
.header{
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #030917;
    padding: 2rem 0rem;
}

.navbar a{
    color: white;
    margin-right: 3rem;

}
.navbar{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;

}

.navbar a:last-of-type {
    margin-right: 0;
}

@media (min-width: 768px)
{
    .navbar{
        margin-right: 10rem;
    }
    .navbar a{
        font-size: 2rem;
        display: inline-block;
        margin-right: 5rem;
    }
    

}
.navbar a:hover {
    color: red;
}

/* Welcome section */

.site{
    padding: 6rem 0 3rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.site.banner
{
    background-image: url(../img/header.jpg);
    background-position: center center;
    background-size: cover;
    height: 100vh;
    min-height: 60rem;

}

.site h1{
    color: white;
    margin: 0;
}
.site h3{
    color: red;
    font-style: italic;
    font-weight: 300;
    margin: 0;
}


/* Projects */

.main{
    margin-bottom: 5rem;
}

@media (min-width: 768px)
{
    .projects{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: start;
        
    }
}

.projects a{
    text-decoration: none;
}

.project-tile{
    border-width: 1px;
    margin-bottom: 2rem;
}

.project-tile img{
    width: 100%;
}


@media (min-width: 768px)
{
    .project-tile{
        flex-shrink: 0;
        flex-basis: calc(33.3% - 1rem);
    }
}

.descr{
    padding: 2rem;
    font-style: italic;
}

.descr h3{
    color: white;
    font-size: 3rem;
    font-weight: 300;
    margin: 0;
}

.profile-link{
    display: flex;
    justify-content: center;
    align-items: center;
}

.profile-link a{
    color: white;
    background-color: red;
    font-weight: 500;
    text-decoration: none;
    font-size: 2rem;
    padding: 1rem 3rem;
    border-radius: 1.5rem;
}

/* Footer */

.site.footer
{
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('../img/footer.jpg');
    background-position: center center;
    background-size: cover;
    height: 100vh;
    min-height: 60rem;
    display: flex;
    flex-direction: column;

}

.footer h2{
    font-size: 5rem;
}

.contact{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.social{
    color: white;
    font-size: 7.5rem;
    margin-right: 3rem;
}

.social:hover{
    color: red;
}