/* ====================================
    Principal    */
body{
    background-image: linear-gradient(135deg, #183141 0, #152e3a 7.14%, #142a33 14.29%, #14252b 21.43%, #141f22 28.57%, #13191a 35.71%, #121111 42.86%, #100404 50%, #0e0000 57.14%, #0a0000 64.29%, #060000 71.43%, #000000 78.57%, #000000 85.71%, #000000 92.86%, #000000 100%) !important;
}

.contenedor{
    max-width: 95%;
    margin-right: auto;
    margin-left: auto;
}

.text-center{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* Style Button */
.general-btn{
    font-size: 120%;
    border: 1px rgb(73, 45, 45) solid;
    background-color: rgb(255, 27, 27);
    border-radius: 20px;
    padding-top: 1%;
    padding-left: 3%;
    padding-right: 3%;
    padding-bottom: 1%;
    box-shadow: 1px 3px 1px rgba(255, 255, 255, 0.151);
}
.general-btn:hover{
    border: 1px rgb(65, 51, 51) solid;
    background-color: rgb(182, 1, 37);
    box-shadow: 1px 3px 1px rgba(255, 255, 255, 0.356);
}
button a{
    text-decoration: none;
    color: black;
}
button a:hover{
    color: black;
} 

/* titles */
.title{
    font-family: 'berkshire_swashregular', Arial, sans-serif !important;
}
.title-red{
    font-family: 'berkshire_swashregular', Arial, sans-serif !important;
    color:rgb(255, 27, 27) !important;
}

.title-white{
    font-family: 'berkshire_swashregular', Arial, sans-serif !important;
    color: white !important;
}

/* ====================================
    Layout Header    */

header{
    background-image: linear-gradient(
        rgb(0, 0, 0),
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 1)
    ),
    url(../img/2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Barra de navegacion */
nav ul{
    margin-left: auto;
    margin-right: auto;
}

nav a:hover{
    color: rgb(255, 27, 27) !important;
}

.navbar-toggler-icon{
    background-image: url(../img/lineas-blancas.jpg) !important;
    width: 150px;
    height: 150px;
    border: 1px solid rgb(255, 27, 27);
    border-radius: 4px;
}

/* content */
.presentation{
    position: relative;
    margin-top: 30%;
    margin-left: 3%;
}
.name{
    margin-bottom: 0;
    padding-bottom: 2%;
    margin-left: 2%;
}

/* ====================================
    section About me    */
#about-me{
    background-color: linear-gradient(
        rgb(0, 0, 0),
        rgba(0, 0, 0, 0.192)
    );
    color: rgba(255, 255, 255, 0.87);
}

/* ====================================
    section Skills    */
#skills{
    color: rgba(255, 255, 255, 0.87);
}

.red-card{
    border-left: 3px solid rgb(255, 27, 27);
    padding-left: 3%;
}

/* ====================================
    section My Education   */

#my-education{
    background-image: linear-gradient(
        rgb(0, 0, 0),
        rgba(0, 0, 0, 0.192)
    ),
    url(../img/bg-education.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.education-card{
    max-width: 95%;
    background-color: rgba(255, 254, 254, 0.747);
    margin-left: auto;
    margin-right: auto;
    border-top: 6px solid rgb(255, 27, 27);
    padding-top: 3%;
    padding-bottom: 3%;
    padding-left: 3%;
    padding-right: 3%;
    margin-bottom: 3%;
}

.black-card{
    border-left: 3px solid rgb(0, 0, 0);
    padding-left: 3%;
}


/* ====================================
    section Projects   */

#projects{
    background-image: linear-gradient(
        rgba(0, 0, 0, 1),
        rgba(0, 0, 0, 0.5)
    ),
    url(../img/informatica3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
}
.project-card{
    background-color: rgba(0, 0, 0, 0.466);
    box-shadow: 5px 5px 5px rgba(255, 255, 255, 0.144);
}

.img-project1{
    background-image: url(../img/headphones.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 13em;
}

.img-project2{
    background-image: url(../img/python.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 13em;
}

.img-project3{
    background-image: url(../img/C-programming.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 13em;
}

.img-project4{
    background-image: url(../img/front-end.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 13em;
}

.img-project5{
    background-image: url(../img/airbnb-logo.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 13em;
}

.img-project6{
    background-image: url(../img/c.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 13em;
}

.img-project7{
    background-image: url(../img/bash.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 13em;
}

/* ====================================
    section Contact Me   */
#contact-me{
    background-image: linear-gradient(
        rgba(0, 0, 0, 1),
        rgba(0, 0, 0, 0.5)
    ),
    url(../img/Contact-me-11-940x518.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    color: black;
    background-attachment: fixed;
}
.whatsapp-icon{
    position: fixed;
    bottom: 1em;
    right: 1em;
    transition: all 300ms ease 0ms;
}

.form-card{
    max-width: 95%;
    background-color: rgba(163, 163, 163, 0.678);
    margin-left: auto;
    margin-right: auto;
    border-top: 6px solid rgb(255, 27, 27);
    padding-top: 3%;
    padding-bottom: 3%;
    padding-left: 3%;
    padding-right: 3%;
    margin-bottom: 3%;
}

.input-contact{
    width: 100%;
    background-color: rgb(136, 136, 136);
    border: 1px rgba(54, 54, 54, 0.37) solid;
    border-radius: 6px;
}

/* ====================================
    section Contact Me   */
textarea:focus, input:focus, input[type]:focus {
    border: 1px rgba(54, 54, 54, 0.37) solid;
    border-color: rgba(0, 183, 255, 0.192);
    box-shadow: 0 3px 3px rgba(128, 210, 235, 0.226)inset, 0 0 8px rgba(150, 243, 255, 0.562);
    outline: 0 none;
}

    /* Text-area Scroll Hidden */
.scroll-hidden{
    overflow-y: scroll; /* Add the ability to scroll */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.scroll-hidden::-webkit-scrollbar{
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scroll-hidden {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* ====================================
    section Footer   */
.footer{
    padding-top: 2em;
    padding-bottom: 2em;
    padding-left: 6em;
    padding-right: 6em;
    background-image: linear-gradient(
        rgb(0, 0, 0),
        rgba(0, 0, 0, 0.425),
        rgb(0, 0, 0)
    ),url(../img/footer.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 10em;
}

.follow-me{
    float: right;
}
.icon-follow-me{
    width: 35px;
    height: 35px;
}