@charset "UTF-8";
/* realJulianIglesias.com

=======================================*/

/* Site Color Palette
=======================================
DARK GREY: #575959 - rgba(88,90,90,1)
MEDIUM GREY: #797a7a - rgba(120,120,120,1)
LIGHT GREY: #cbd4d8 - rgba(204,212,217,1)
IVORY: #e5ebe7 - rgba(230,235,232,1)
TEAL: #00a79d - rgba(0,167,157,1)
TEAL SHADE: #008e85
YELLOW: #fff100 - rgba(255,242,0,1)
=======================================*/

/* CSS Font Styles
=======================================
CLOUD-HOSTED, HOEFLER & CO. (typography.com) VIA A&M MEDIA
GOTHAM LIGHT = font-family: "Gotham SSm A", "Gotham SSm B"; font-style: normal; font-weight: 300;
GOTHAM BOOK = font-family: "Gotham SSm A", "Gotham SSm B"; font-style: normal; font-weight: 400;
GOTHAM BOLD = font-family: "Gotham SSm A", "Gotham SSm B"; font-style: normal; font-weight: 700;
GOTHAM BLACK = font-family: "Gotham SSm A", "Gotham SSm B"; font-style: normal; font-weight: 800;
=======================================*/

/* Table of Contents
=======================================
1) GLOBAL
  a) BASE STYLES
2) INDEX

5) RESPONSIVE (possible separate stylesheet?)
 a) > 640px
 b) > 670px
 c) > 768px
=======================================*/

/*##############################################################################################################################################
##############################################################################################################################################*/

/* 1) GLOBAL */
  /* a) BASE STYLES */
  h1 {
    font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, san-serif; font-style: normal; font-weight: 800; 
  }
  h2 {
    font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, san-serif; font-style: normal; font-weight: 700; 
  }
  h3 {
    font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, san-serif; font-style: normal; font-weight: 400; 
  }
  h4 {
    font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, san-serif; font-style: normal; font-weight: 300; 
  }
  h5, p {
    font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, san-serif; font-style: normal; font-weight: 200; 
  }
  h6 {
    font-family: "Sentinel SSm A", "Sentinel SSm B"; font-style: normal; font-weight: 700; text-rendering: geometricPrecision;
  }
  .sentinel-300 {
    font-family: "Sentinel SSm A", "Sentinel SSm B"; font-style: normal; font-weight: 300; text-rendering: geometricPrecision;
  } 
  .sentinel-300i {
    font-family: "Sentinel SSm A", "Sentinel SSm B"; font-style: italic; font-weight: 300; text-rendering: geometricPrecision;
  }
  .sentinel-400 {
    font-family: "Sentinel SSm A", "Sentinel SSm B"; font-style: normal; font-weight: 400; text-rendering: geometricPrecision;
  } 
  .sentinel-400i {
    font-family: "Sentinel SSm A", "Sentinel SSm B"; font-style: italic; font-weight: 400; text-rendering: geometricPrecision;
  }
  .sentinel-700 {
    font-family: "Sentinel SSm A", "Sentinel SSm B"; font-style: normal; font-weight: 700; text-rendering: geometricPrecision;
  } 
  .sentinel-700i {
    font-family: "Sentinel SSm A", "Sentinel SSm B"; font-style: italic; font-weight: 700; text-rendering: geometricPrecision;
  }

  body { background-color:#e5ebe7 !important; overflow:auto !important; height: auto; min-height: 100%; }
  strong { font-weight:700; }
  a { text-decoration:none; color:#000000; transition: all .2s ease-in-out; }
  ul { list-style:none; }
  .wrapper { margin:auto; width:100%; height:100%; padding:0; }
  .inline { display:inline !important; } 
  .display_none { display:none; } 

  .padding-top-1 { padding-top:1%; }
  .padding-top-2 { padding-top:2%; }
  .padding-top-3 { padding-top:3%; }
  .padding-top-4 { padding-top:4%; }
  .padding-top-6 { padding-top:6%; }
  .padding-top-8 { padding-top:8%; }
  .padding-top-10 { padding-top:10%; }
  .padding-btm-1 { padding-bottom:1%; }
  .padding-btm-2 { padding-bottom:2%; }
  .padding-btm-3 { padding-bottom:3%; }
  .padding-btm-4 { padding-bottom:4%; }
  .padding-btm-6 { padding-bottom:6%; }
  .padding-btm-8 { padding-bottom:8%; }
  .padding-btm-10 { padding-bottom:10%; }
  .margin-top-1 { margin-top:1%; }
  .margin-top-2 { margin-top:2%; }
  .margin-top-3 { margin-top:3%; }
  .margin-top-4 { margin-top:4%; }
  .margin-top-6 { margin-top:6%; }
  .margin-top-8 { margin-top:8%; }
  .margin-top-10 { margin-top:10%; }
  .margin-btm-0 { margin-bottom:0 !important; }
  .margin-btm-1 { margin-bottom:1%; }
  .margin-btm-2 { margin-bottom:2%; }
  .margin-btm-3 { margin-bottom:3%; }
  .margin-btm-4 { margin-bottom:4%; }
  .margin-btm-6 { margin-bottom:6%; }
  .margin-btm-8 { margin-bottom:8%; }
  .margin-btm-10 { margin-bottom:10%; }


  /* b) FORM OVERRIDES */
    input:focus { outline: none; }
    textarea:focus { outline: none; }
    select:focus { outline: none; }
    ::-webkit-input-placeholder { color: #797A7A; }
    :-moz-placeholder { color: #797A7A; opacity:  1; }
    ::-moz-placeholder {  opacity:  1; }
    :-ms-input-placeholder { color: #797A7A; }
    input, textarea, button { font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, san-serif; font-style: normal; font-weight: 300; transition: all .2s ease-in-out; }


/*##############################################################################################################################################
##############################################################################################################################################*/

/* 2) INDEX */

        * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .montserrat-<uniquifier>, h1, h2, h3, h4, h5, h6, p {
        font-family: "Montserrat", sans-serif;
        font-optical-sizing: auto;
        font-weight: <weight>;
        font-style: normal;
      }
      /*purple lining on top*/

      .top-nav {
        width: 100%;
        position: sticky;
        top: 0;
        /*display: flex;*/
        background-color: white;
        opacity: 0.75;
        /* rest stays the same */
      }

      .top-nav ul {
        box-sizing: border-box;
        display: flex;
        justify-content: space-evenly;
        list-style-type: none;
        margin-bottom: 20px;
        min-height: 40px;
        margin-left: 20%;
        margin-right: 20%;
      }

      .top-nav ul li {
        display: flex;
        align-items: center;
      }

      .top-nav ul li a {
        text-decoration: none;
        color: black;
      }

      .top-nav ul li a {
        text-decoration: none;
        color: black;
      }
      .top-nav ul li a:hover{
        text-decoration: underline;
      }

      #intoduction.intoduction {
        display: flex;
        justify-content: space-between; 
        align-items: center;
        width: 95%;
        min-height: 600px;
        background-color: #d4edff;
        margin-top: 40px;
        box-sizing: border-box;
        border-radius: 25px;
        align-items: center;
      }

        .intoduction_left {
          width: 50%;
          text-align: center;
        }

          #line1 {
            color: green;
            text-align: center;
            margin-top: 10%;
          }

          #line2 {
            color: yellow;
            text-align: center;
            margin-top: 10%;
          }

            #line2 h1 {
              color: pink;
            }

          #line3 {
            text-align: center;
            margin-top: 10%;
          }

        .intoduction_right {
          width: 50%;
          float: right;
          text-align: center;
        }

      #skills.skills {
        width: 100%;
        min-height: 850px;
        background-color: #6622E5;
        padding-top: 4.5%;
        margin-top: 2.5%;
      }

        .headline h1 {
          box-sizing: border-box;
          width: 40%;
          border: 4px solid #000;
          border-color: white;
          margin: 0 auto;
          text-align: center;
          border-radius: 25px;
          padding: 1%;
        }

        article .headline h1 {
          font-size: 30px;
          color: white;
        }


        .skills_left {
          margin-top: 2.5%;
          color: yellow;
          width: 50%;
          text-align: center;
          float: left;
        }

          .skills_left h3 {
            font-size: 30px;
            color: black;
          }

        .skills_right {
          margin-top: 2.5%;
          width: 50%;
          float: right;
          text-align: center;
        }

          .skills_right h3 {
            font-size: 30px;
            color: black;
          }

          .skills_right ul {
            list-style-type: none;
          }

          .skills_right li img { 
            width:50%; 
            float:left; 
            height:300px; 
          }

        #about.about {
          width: 100%;
          min-height: 850px;
          background-color: #fff;
          padding-top: 4.5%;
          margin-top: 2.5%;
        }

          .headline h2 {
            box-sizing: border-box;
            width: 25%;
            border: 4px solid #000;
            border-color: black;
            margin: 0 auto;
            text-align: center;
            border-radius: 25px;
            padding: 1%;
          }

          article .headline h2 {
            font-size: 35px;
          }

          #para1 {
            font-size: 30px;      
            text-align: center;     
            line-height: 2.0;
            margin-top: 40px;   
          }

          #para2{
            font-size: 30px;      
            text-align: center;     
            line-height: 2.0;   
            margin-top: 40px;   
          }
          #para3 {
            font-size: 30px;      
            text-align: center;     
            line-height: 2.0;   
            margin-top: 40px;   
          }

        #projects.projects {
          box-sizing: border-box;
          border-radius: 25px;
          background-color: black;
          min-height: 850px;
        }

        #contact.contact {
          width: 100%;
          min-height: 850px;
          background-color: green;
          padding-top: 4.5%;
          margin-top: 2.5%;
        }