/*LIGHT TURQUOISE: #009688;
  DARK TEAL: #00524a;
  MODIFIED: rgb(11, 68, 82) OR #0B4452;
  LIGHTER TEAL: 0d5061;
  TAN/MAUVE: #9b8c8d;
  TAN CREAM: #d1d1c9;
  LIGHT TAN CREAM (about page): #f0f0ee OR RN#e0e0dc;
  CHARCOAL GRAY: 2b2b2b; */


/* BASIC SETUP */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
  
    background-color: #fff;
    color: #000000;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 20px;
    text-rendering: optimizeLegibility;

}



/*REUSABLE CONTENTS (mostly buttons)*/
.row{
    max-width: 1920px;
    margin: 0 auto;
}

section{
    padding: 100px 100px;
}

.btn-full-none,
.btn-full-one,
.btn-full-two,
.btn-full-three,
.btn-full-four{
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-color: #d1d1c9;
    border: 2px solid #d1d1c9; 
    color: #fff;
    font-weight: 300;
    text-decoration: none;
    border-radius: 200px;
    padding: 10px 5px;
 }



/*OPENING PAGE*/
header{
    height: 100vh;
}

.hero-text-box{
    position: absolute;
    width: 1140px;
    top: 40%;
    left: -1.1%;
    transform: translate (-.03%, 0);
}


/*MAIN NAVIGATION BAR*/
.main-nav{
    position: relative;
    list-style: none;
    float: right;
    right: 30%;    
}

.main-nav li{
    display: inline-block;
    margin-left: 60px;  
}

.main-nav li a:link,
.main-nav li a:visited{   
    color: #b0b0a6;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 90%;
    border-bottom: 2px solid transparent;
    transition: border-bottom 0.2s; 
}

.main-nav li a:hover,
.main-nav li a:active{
    border-bottom: 2px solid #2b2b2b;   
}


/*STICKY NAVIGATION BAR*/
.sticky{
    position: fixed;
    top: 0;
    right: -3.8%;
    width: 130%; 
    background-color: rgba(255, 255, 255, 0.98);
    z-index: 9999;
}

.sticky .main-nav{
    margin-top: -12px; 
    margin-bottom: -11px;
    right: 37.5%;
}

.sticky .main-nav li a:link,
.sticky .main-nav li a:visited{
    padding: 4px 0;
    color: #b0b0a6; 
}


/*HEADER TEXT*/
h1,
h2,
h3,
h4{
    font-weight: 300;
    letter-spacing: 10px;
    font-family: 'Inknut Antiqua', serif;  
}

h1{
    margin-top: 0;
    margin-bottom: 2px;
    color: rgb(11, 68, 82);
    font-size: 500%;
}

h2{
    font-size: 160%;
    color: #fff;
    text-align: right;
    margin-bottom: 10px;
}

h3{
    font-size: 85%;
    color: #fff;
    text-align: left;
    margin-bottom: 10px;
    letter-spacing: 7px;
}

h4{
    font-size: 160%;
    color: #d1d1c9;
    text-align: center;
    margin-bottom: 40px;
}

.line-in-middle{
    background: linear-gradient( 90deg, #e0e0dc, #e0e0dc 160px, #0d5061 160px, #0d5061 162.7px, #e0e0dc 40px);  
}

.line-in-middle-two {
    background: linear-gradient( 90deg, #fff, #fff 160px, #0d5061 160px, #0d5061 162.7px, #fff 40px); 
}


/*INFO PAGE*/
.section-learn{
    background-size: inherit;
    background: linear-gradient( 90deg, #e0e0dc, #e0e0dc 260px, #0d5061 260px, #0d5061 263.5px, #e0e0dc 40px);
}

.learn-box{
    margin-top: 5px;
}

.learn-box:first-child{
    text-align: left;
    padding-right: 8%;
    margin-top: 25px;
    width:40%;
}

.learn-box:last-child{
    text-align: left;
}

.profile-pic{
    max-width: 130%;
    height: auto;
}

.learn-more{
    width: 120%;
    font-size: 84%; 
}


/* BREAK */
.section-break{
    background-size: inherit;
    background: linear-gradient( 90deg, #fff, #fff 260px, #0d5061 260px, #0d5061 263.5px, #fff 40px);
}

.section-footer{
    background-size: inherit;
    background: #0B4452;
}


/* EXPERIENCE PAGE */
.section-experience{
    background-size: inherit;
    background-color: #0B4452;
}

.explain-one{
    margin-top: 10px;
    color: #fff;
}

.explain-one:first-child{
    margin-top: 25px;
}

.explain-one:last-child{
     padding-left: 30px;
}

.screencaps {
    width: 103%;
}


/* CONTACT FORM */
.section-form{
    background-size: inherit;
    background-color: #fff;
    background: linear-gradient( 90deg, #fff, #fff 260px, #0d5061 260px, #0d5061 263.5px, #fff 40px);
}

.contact-me {
    text-align: center;
    font-size: 84%;
    margin: 0 auto;
}



*:focus {outline: none;}