* {
    box-sizing: border-box;
  }

/* Style the body */
body {
    font-family: 'Bungee Shade';
    margin: 0;
  }

  /* Header/logo Title */
.header {
    font-family: 'Bungee Shade';
    width: 100%;
    height: auto;
    padding: 300px;
    text-align: center;
    /* Avoid presenting informational images in CSS backgrounds, so, no alt attribute on the next image*/
    background-image: url("../img/carlos1.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    color: #F3904F;
    
  }

  /* Increase the font size of the heading */
  .header h1 {
    font-size: 60px;
    text-align: left;
    
  }
  /* Color for the p tag*/
  .header p {
    color: #3B4371;
    text-align: left;
  }
 
  /* Dark mode style */
  .dark-mode {
    background-color:black ;
    color: white;
  }
  
  /* Sticky navbar */
  .navbar {
    overflow: hidden;
    background: -webkit-linear-gradient(to right, #3B4371, #F3904F);  
    background: linear-gradient(to right, #3B4371, #F3904F); 
    position: -webkit-sticky;
    top: 0;
  }
  
  /* Style the navigation bar links */
  .navbar a {
    float: left;
    display: block;
    text-align: center;
    padding: 15px 20px;
    text-decoration: none;
    color:#F3904F;
    font-size: medium;
  }
  /* Button Dark Mode */
  .navbar button {
      float: right;
      display: block;
      text-align: center;
      padding: 15px 20px;
      text-decoration: none;
      font-size: medium;
      color:#3B4371;
      background-color: #F3904F;
      border-radius: 124px 124px 124px 124px;
      -moz-border-radius: 124px 124px 124px 124px;
      -webkit-border-radius: 124px 124px 124px 124px;
      border: 1px solid #3B4371;
      font-family: 'Bungee Shade';
      cursor: pointer;
  }
  
  
  /* Change color on hover */
  .navbar a:hover {
    color: black;
  }
  
  
  
  
  /* Footer */
  .footer {
    padding: 15px;
    text-align: center;
    background: -webkit-linear-gradient(to right, #3B4371, #F3904F);  
    background: linear-gradient(to right, #3B4371, #F3904F); 
    color:#F3904F;
    flex-wrap: wrap;
    display: inline-flex;
    width: 100%;
  
  }

  
  .footer i {
    padding: 15px 20px;
    font-size: large;
    color: #F3904F;
    
  
  }

/* Home page Text */
  .presentation {
      padding: 100px;
      font-size: 20px;
      text-align: center;
      
      

  }
 /* The next 3 divs texts in the Home page*/

  .what_im_capable_of{
    padding: 100px;
    text-align: center;
    
  }

  .feel_free_to_ask_me_something{
    padding: 100px;
    text-align: center;
    
  }

  .feel_free_to_ask_me_something i {
    color:#F3904F;
    font-size: 50px;
    
  }
  /* Work page examples */

  .examples1 {

    padding: 200px;
  }

  .examples2 {
    background-color:#F3904F;
    padding: 200px;
  }

  .examples3 {

    padding: 200px;
  }

  .examples4 {
    background-color: #5f6899;
    padding: 200px;
  }

  .examples5 {

    padding: 200px;
  }
  /*for the responsive , try to see if is not his that doesnt allowed , meaning the px*/
  .Notes {
    padding: 300px;
  }
  
  /* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
  @media screen and (max-width: 400px) {
    .navbar a {
      float: none;
      width: 100%;
    }
  }