/* Styles for Homepage*/
/* general styles */
body{
    margin:0px
}
h1{
    font-size:3rem !important;
    text-align:center;
    color:#ff7700;
    font-weight:400 !important;
    padding:8%;
    padding-top:15%;
    
}
h2{
    color:#cc612f;
  
}

h4{
    font-family: 'Raleway', sans-serif;
}
p , a{
    font-family: 'Raleway', sans-serif;
}


/* general styles ends */
/* landing area starts */
header{

    background:url("images/ocean_hideout_1.png");
    background-size: cover;
    text-align:center;
    height:100vh;
    color:white;
    
}
header h1{
    color:white;
    padding:0px;
    
}
.title{
    padding-top:40vh;

}
.titleButton img{
    width:100px;
}
.titleButton{
    position:absolute;
    bottom:0px;
    right:20px;
    width:120px;
    height:120px;
    background:rgba(255, 255, 255, 0.507);
}
.titleButton img{
    position:relative;
}
.titleButton:hover{
    background:white;
}
@media (max-width:600px){
    .titleButton{
        width:100%;
        right:0px;
        height:100px;
    }
}
hr{
    width:50%;
    border-top:1px solid white !important;
}
/* landing area ends */
/* vertical nav starts */
.in-view{
    background:rgb(255, 87, 3);
    transition:500ms;
}
.verticalNav{
    background: rgb(39, 39, 39);
    width:120px;
    position:absolute;
    top:100vh;
    right:20px;
    text-align:center;
}
.verticalNav img{
    width:120px;
}
.stickyNav {
    position: fixed;
    top: 0;
    width: 120px;
    z-index:2;
    right:20px;
    
  }
/* vertical nav ends */
/* navbar starts */

.nav-link{
    color:white !important;
    transition:500ms;
    width:120px;
}
.topnav{
    background:rgb(39, 39, 39);
    padding:0px !important;
    position: sticky !important;
    top:0px;
    z-index:2;
    height:84px;
    display:none;
}
@media(max-width:800px){
    .navbar-brand{
        display:none !important;
    }
    .navLinks{
        float:left !important;
    }
    
}
@media(max-width:1000px){
    
    .topnav{
        display:block;
    }
    .nav-link{
        float:left;
        width:auto;
    }
    .verticalNav{
        display:none;
    }
}
.nav-link:hover{
    background:	rgb(255, 86, 1);
    transition:500ms;

}
.navLinks{
    float:right;
}
.navbar .container{
    justify-content: start !important;
}
.nav-link{
    padding-left: 30px !important;
    padding-right:30px !important;
    padding-top:30px !important;
    padding-bottom:30px !important;
}
.navbar-brand{
    padding:27px !important;
    font-family: 'Arvo', serif;
    color:white;
    
}
a.navbar-brand:hover{
    
    color:white;
    background:rgb(71, 71, 71);
}
/* navbar ends */
/* about me begins */
.aboutMe{
    min-height:101vh;
    padding-bottom:10%;
}
/* about me ends */
/* blog begins */
.blogs h3{
    font-family: 'Raleway', sans-serif;
}

.blogs:before{
    background: inherit;
    top: 0;
    content: '';
    display: block;
    height: 50%;
    left: 0;
    position: absolute;
    right: 0;
    transform: skewY(1.5deg);
    transform-origin: 100%;
    z-index: -1;
}

.blogs {
    min-height:101vh;
    background:#f0f0f0;
    padding-bottom:10%;
    
    position: relative;
    z-index: 1;
  }
  .blogs:after {
    background: inherit;
    bottom: 0;
    content: '';
    display: block;
    height: 50%;
    left: 0;
    position: absolute;
    right: 0;
    transform: skewY(-1.5deg);
    transform-origin: 100%;
    z-index: -1;
  }
  .blogOuter{
    display:flex;
    border-radius:1rem;
    background:white;
    margin-bottom:20px;
    box-shadow:2px 2px 2px rgba(0,0,0,0.39);
}
.blogLink{
    
    transition:500ms;
    padding:15px;
    
    color:#c7550e;
      
}
.blogLink h3{
    text-align:center;
}

.blogLearnMore{
    width:20%;
    background:black;
    color:white;
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
    text-align:center;
    padding-top:4%;
    transition:500ms;
}
.blogLearnMore:hover{
    background:orange;
    cursor:pointer;
    transition:500ms;
}
.learnMoreContent{
    display:none;
}
.blogButtons{
    width:60%;
    margin:0 auto 0 auto;
}

@media(max-width:800px){
    .blogButtons{
        width:90%;
    }
}

.blogs a:hover{
    text-decoration:none !important;
    
}
.blogs .blogLink:hover{
    transition:500ms;
    
    color:#fcb851 !important;
    text-decoration:underline;

}
.blogs a{
    
    width:80%;
}
.blogs .col{
    padding-right:50px !important;
    padding-left:50px !important;
}
.blogs h2{
    text-align:center;
}
/* blog ends */
/* contact me begins */

.contact{
    min-height:90vh
}
body .contact{
    text-align:center;
}
.contact p, .contact .emailLink{
    font-size:1.5rem;
    font-weight:200;
    text-align:center;
    color:black;
}
.contact .emailLink p{
    background:lightsalmon;
}
.contact .emailLink p:hover{
    background:rgb(248, 132, 87);
}
.socialIcons a{
    text-align:center;
    font-size:3rem;

}
.icon{
    display:inline-block;
    padding:30px;
}
.icon a{
    color:black;
    
}
.icon a:hover{

    color:#fcb851 ;

}
/* contact me ends */
/* Styles for homepage ends */

/* ***************************************************************************************************************************************************************************************************************************************************************************************************************** */

/* Blog Styles Begins */
.blogHeader{
    padding-top:100px;
    padding-bottom:100px;
    height:100vh;
    text-align:center;
    color:white;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.39);
}
.technical{
    background:url("images/technical-filter.jpg");
    background-size:cover;
}
.cultural{
    background:url("https://cdn.theculturetrip.com/wp-content/uploads/2017/08/geradlinesy_filipinoculture_web.png");
    background-size:cover;
}
.blogHeader h1{
    color:white;
    padding-bottom:0px;
}

.blogScrollDown{
    position:absolute;
    bottom:0px;
    right:100px;
    width:120px;
    height:120px;
    background:rgba(255, 255, 255, 0.507);
}
.blogScrollDown img{
    position:relative;
}
.blogScrollDown:hover{
    background:white;
}
.blogScrollDown img{
    width:100px;
}
@media (max-width:600px){
    .blogScrollDown{
        width:100%;
        right:0px;
        height:100px;
    }
}
.returnHome{
    border-radius:0 !important;
    position:sticky;
    top:0px;
}

.blogContent{
    padding-bottom:5%;
}
.blogContent h3{
    color:#cc612f;
    font-weight:200;
    margin-top:5%;
}
/* Sprint 2 technical styles begins */
.inline1{
    display:inline;
    padding:50px;
    margin:20px;
    background:rgba(128, 128, 128, 0.493);
}
.inline2{
    display:block;
    width:150px;
    height:150px;
    padding:50px;
    margin:20px;
    background:rgba(128, 128, 128, 0.493);
}
.inline3{
    display:inline-block;
    width:150px;
    height:150px;
    padding:50px;
    margin:20px;
    background:rgba(128, 128, 128, 0.493);
}

.sprint2-technical-code, .sprint4-technical-code {
    color:rgb(255, 143, 161);
    background:rgb(240, 240, 240);
}
/* SPrint 2 technical styles ends */