/*import fonts from fonts.css file */
@import url(./fonts.css);

/* css variables */
@import url(./partials/_variables.css);


/* START NAVIGATION */

.header-area .main-menu .navbar .navbar-brand{
    padding: 0 2rem 0 5rem

}

.header_area .main-menu .navbar{
    padding: 0.5rem 2rem;
}

.header_area .main-menu .nav-item .nav-link{
    font-family: "Roboto", cursive;
    text-transform: uppercase;
    font-weight: 500;
    padding: 1.7rem;
    color: #B4C7FA;
}

.header_area .main-menu .navbar-nav .active a{
    background: linear-gradient(90deg, #2127C4 0%, #757DE6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: #757DE6;
    background-clip: text;
}

.header_area .main-menu .navbar-nav a:hover{
    background: linear-gradient(90deg, #2127C4 0%, #757DE6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: #757DE6;
    background-clip: text;
}

#last-name {
    color:  #B4C7FA;
    font-family: "Roboto", cursive;
    font-weight: 500;
    padding: 1.5rem;
    letter-spacing: 4px;
}

/* END NAVIGATION */

/* START FONT STYLING */

#roboto {
    font-family: "Roboto", cursive;
    color: #B4C7FA;
    letter-spacing: 2px;
    font-weight: 400;
}

#roboto-italic {
    font-family: "Roboto", cursive;
    letter-spacing: 2px;
    font-weight: 400;
    font-style: italic;
}

/* END FONT STYLING */

body, html {
    height: 100%;
    width: 100%;
}

.bg {
    background-image: url(../img/photo-1464925257126-6450e871c667.jpg);
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}