html{
    overflow-x: hidden;
    overflow-y: hidden;
}
body{
    line-height:1.1 !important;
}
@import url('https://fonts.googleapis.com/css?family=Alef');

html{
    scroll-behavior: smooth;
}

*{
    margin:0;
}
#first_page{
    position: absolute;
    -moz-user-select: none;
     -ms-user-select: none;
         user-select: none;
    -webkit-user-select: none;
    z-index:100;
}
#layout{
    z-index:0;
}
#upper{
    height:10vh;
    width:100vw;
    background-color: rgb(48, 46, 46);
    color:white;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: x-large;
}
#lower{
    height:90vh;
    width:100vw;
    background-color: rgb(37, 35, 35);
    color:rgba(255, 255, 255, 0.863);
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: calc(18vh - 1.5vw);
    padding-top: 2%;
}
#upper div{
    display: inline-block;
    line-height: 10vh;
    vertical-align: middle;
    width:calc(49.7% - 2vw);
    text-align: center;
}
#left{
    font-style: italic;
}
#right img{
    width:4%;
    margin-left:1%;
    padding-bottom:1%;
}
#lower div{
    text-align: center;
    text-shadow: 4px 4px rgb(100, 99, 99);
}
#svg_letter{
    margin:1% 20% 0 20%;
}
path{
    stroke-dashoffset: 0;
}
#enter_button{
    color: white;
    display: block;
    margin: 0 auto;
    margin-top:2%;
    background-color:inherit;
    outline: none;
    -o-border-image: none;
    border-image: none;
    border: 1px solid white;
    cursor: pointer;
    padding:1% 4% 1% 4%;
    font-family: 'Times New Roman', Times, serif;
    font-size: medium;
}

@media only screen and (max-width:603px){
    #lower{
        font-size: calc(15vw - 1vh);
        padding-top: calc(6% + 1vw);
    }
    #lower{
        height:80vh;
    }
    #upper{
        height:20vh;
    }
    #upper div{
        display: block;
        width:100%;
    }
    #enter_button{
        font-size: x-large;
    }
}

@media only screen and (max-width:900px){
    #right img{
        width:6%;
    }
}

@media only screen and (max-width:555px){
    #lower div{
        margin-bottom: 3%;
    }
}

@media only screen and (max-width:424px){
    #lower div{
        margin-bottom: calc(5% + 1vw);
    }
}

@media only screen and (max-width:380px){
    #lower div{
        margin-bottom: calc(5.5% + 4vw);
    }
}

header{
    position: sticky;
    top:0;
    z-index:2;
}
section{
    z-index:2;
}
.navbar-collapse{
    text-align: left !important;
}

.nav-link:hover{
    color: black !important;
}

.img-load {
    background : transparent url("https://wallpapercave.com/wp/wp6444183.jpg") center no-repeat;
}
nav{
    -webkit-box-shadow: 7px 3px 7px 1px rgb(80, 77, 77);
    box-shadow: 7px 3px 7px 1px rgb(80, 77, 77);
    border-bottom:3px solid skyblue;
}

#about{
    margin-top:calc(3% + 1vw);
}

#image img{
    width:calc(65% + 1vw);
    -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

#image{
    text-align: right;
    -webkit-filter: drop-shadow(8px 7px 8px black);
    filter: drop-shadow(8px 7px 8px black);
}

#info{
    text-align: center;
}

#info{
    padding-top:2.7%;
    padding-bottom:2.5%;
}

#info p{
    margin-bottom: 0;
    font-size:1.5vw;
}

#info span:first-child{
    color:dimgray;
    font-size: 2.5vw;
}

#info :nth-child(3){
    font-family: sans-serif;
    font-weight:bold;
    font-size: x-large;
    color: dimgrey;
    font-size:2vw;
}

@media only screen and (max-width:575px){
    #image{
        text-align: center;
    }
    #image img{
        width:40% !important;
    }
    #about{
        margin-top:5%;
    }
    #info span:first-child{
        font-size: xx-large;
    }
    #info :nth-child(3){
        font-size:larger;
    }
    #info p{
        font-size:medium !important;
    }
}

@media only screen and (max-width:830px){
    #info p{
        font-size:small;
    }
}

@media only screen and (max-width:768px){
    #image img{
        width:calc(70% + 3vw);
    }
}

#skills,#projects{
    margin-top:calc(3% + 1vw);
}

@font-face{
    font-family:"myfont";
    src:url(AbrilFatface-Regular.ttf);
}

#skill_title,#project_title{
    font-family: 'myfont','Courier New', Courier, monospace;
    font-size: xx-large;
    text-align: center;
    width:100%;
    color:dimgray;
    letter-spacing:3px;
}

#all_skills{
    width:100%;
    background-color:rgb(241, 240, 240);
    -webkit-clip-path: polygon(100% 0%,100% 85%,50% 100%,0% 85%,0% 0%);
    clip-path: polygon(100% 0%,100% 85%,50% 100%,0% 85%,0% 0%);
    padding:3% 0 3% 0;
}

@media only screen and (max-width:768px){
    #all_skills{
        padding-bottom:4.1%;
    }
}

@media only screen and (max-width:576px){
    #all_skills{
        padding-bottom:9.6%;
    }
    #all_skills p{
        font-size:calc(4% + 2.5vw) !important;
    }
    #social-images img{
        width:7vw !important;
    }
}

#all_skills p{
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: calc(2% + 1.3vw);
}

@media only screen and (max-width:850px){
    #all_skills p{
        font-size: calc(3% + 1.8vw);
    }
}

#all_skills .row{
    width:100%;
    text-align: center;
    margin:0;
}

#all_skills .row div{
    margin-bottom: 2%;
}

#all_skills img{
    width:40%;
}

#project_title{
    margin-bottom:1.5%;
}

#all_projects{
    background-color:rgb(241, 240, 240);
    padding: 15px 0 15px 0;
}

#all_projects .row{
    margin:0;
}

.proj{
    text-align: center;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

.proj_data{
    padding:7px 0 7px 0;
    border:1px solid gray;
    border-top:none;
    border-radius:70px;
    border-top-left-radius:0;
    border-top-right-radius:0;
}

.proj h5{
    margin:0px 0 5px 0;
}

.proj p{
    margin:10px 0 10px 0;
    color:rgba(0, 0, 0, 0.692);
}

.proj a xmp{
    display: inline;
}

.proj a{
    text-decoration:none !important;
}

.proj img{
    width:100%;
    border:1px solid gray;
    border-bottom: none;
    border-top-right-radius:70px;
}

.isDisabled {
    cursor: not-allowed;
    opacity: 0.5;
}
.isDisabled > a {
    color: currentColor;
    display: inline-block;  /* For IE11/ MS Edge bug */
    pointer-events: none;
    text-decoration: none;
}


@media only screen and (max-width:767px){
    #all_projects{
        padding:15px 0 15px 0;
    }
}

@media only screen and (max-width:575px){
    #all_projects{
        padding:40px 0 40px 0;
    }
    #projects{
        margin-top: calc(5% + 2vw);
    }
}


@media only screen and (max-width:1038px){
    #contact p{
        font-size:calc(0.32rem + 1vw) !important;
    }
}

footer{
    background-color: rgb(241, 240, 240);
    margin-top:-40px;
    font-family: Alef;
}

#foot{
    background-color:black;
    clip-path: polygon(0 15%,40% 15%,50% 0%,60% 15%,100% 15%,100% 100%,0% 100%,0% 10%); 
    -webkit-clip-path:polygon(0 15%,40% 15%,50% 0%,60% 15%,100% 15%,100% 100%,0% 100%,0% 10%);
    padding-top:88px;
    padding-bottom: 30px;
    margin: 0;
}
#copyright{
    text-align:center;
    padding:10px 0 10px 0;
    background-color:rgb(29, 27, 27);
    color:white;
    margin-top:-1px;
}
#social{
    font-size:xx-large;
    color:orange;
    text-align:center;
}
#contact{
    text-align: right;
    color:dimgray;
    padding-right:2% !important;
}
#social-images{
    margin-top:5%;
}

#social-images img{
    width:3.5vw;
}

#social-images a{
    margin-left:10%;
}

#social-images a:first-child{
    margin:0;
}

input,textarea{
    width:90%;
    margin-left:10% !important;
}

input:focus,textarea:focus{
    color:white;
}

input{
    height:31px;
}

input,textarea{
    display:block;
    margin-bottom:2px !important;
    border: none;
    outline:none;
    background-color: rgb(68, 67, 67);
    color:white;
    padding-left:1.5%;
}

form{
    text-align:right;
}

#sub_button{
    border:2px solid #2098D1;
    color:white;
    -o-border-image:none;
    border-image:none;
    outline:none !important;
    background-color: black;
    margin-top:1.7px !important;
    padding:3px 18px 3px 18px;
}

#contact p{
    margin-bottom: 10px;
    font-size:calc(0.26rem + 1vw);
}

@media only screen and (max-width:1199px){
    #contact{
        padding-right:0.5% !important;
    }
}

@media only screen and (max-width:850px){
    #social{
        font-size:x-large;
    }
}


@media only screen and (max-width:767px){
    #social-images img{
        width:5.5vw;
    }
    #contact p{
        font-size:calc(0.40rem + 2vw) !important;
    }
    input,textarea{
        width:100%;
        margin-left:0 !important;
    }
    #contact{
        padding-right:15px !important;
        text-align:center;
    }
    #foot{
        padding-top:76px;
    }
}

@media only screen and (max-width:730px){
    #contact{
        padding:0 !important;
    }
    #foot{
        clip-path: polygon(0 15%,30% 15%,50% 0%,70% 15%,100% 15%,100% 100%,0% 100%,0% 10%); 
        -webkit-clip-path:polygon(0 15%,30% 15%,50% 0%,70% 15%,100% 15%,100% 100%,0% 100%,0% 10%);
    }
}

#up_button{
    display:inline-block;
    position: relative;
    left:48%;
    right:0;
    top:5vw;
    bottom:0;
    z-index:1;
    text-align:center;
}

#up_button img{
    width:4vw;
}

@media only screen and (max-width:730px){
    #up_button{
        top:60px;
        left:46.8%;
    }
    #up_button img{
        width:6.5vw;
    }
}

@media only screen and (max-width:767px){
    #up_button{
        top:53px;
    }
    header{
        opacity:0.95;
    }
    li a{
        color:rgba(0, 0, 0, 0.85) !important;
    }
}

.tooltip-inner {
    background-color: blue !important;
}
.tooltip.bs-tooltip-bottom .arrow:before {
        border-bottom-color:blue !important;
}

#load{
    display:none;
    position:fixed;
    width:calc(6vw + 5vmin);
    height:calc(6vw + 5vmin);
    background-color: greenyellow;
    border-radius:50%;
    z-index:10;
    top:60vh;
    right:0;
    left:46.1%;
    bottom:0;
}