body {
    background-size: cover;
    background-repeat: no-repeat;
    margin: 5; padding: 5; border: 0;
    color: black;
    background-color:beige;
    font: 16px Helvetica, Arial, Sans-Serif; color: #636363; line-height: 24px;
}

#header {
	width: 100%; 
    margin:auto;
 /*    background-image: url("./images/N.jpg");*/
}

h1,h2{
    color: black;
}

#logo {
	margin: 20px auto 10px; 
    position: relative; 
    width: 206px;
    height: 150px;
    
}


    ul#nav {
	 list-style: none; overflow: hidden; 
/*        margin: -134px auto 25px auto;*/
}
	ul#nav li {
		width: 33.33%;
/*        height: 33px;*/
        float: left; 
/*        padding: 13px 0 0 120px;*/
        font-weight: bold; text-align: center; text-transform: uppercase;
    }

    ul#nav li a {
        color: black; 
        text-decoration: none;
        }
    ul#nav li a:hover {
        color: #a12121;
        }
#pp{
     height: 300px;
    width: 250px;
    margin: 2%;
    transition: transform .2s;
}
#pp:hover{
    transform: scale(1.25);
}

#text_intro{
    padding: 1%;
    flex-grow: 2;
    align-self: center;
    height: 100%;
}

.text{
    padding: 1%;
    flex-grow: 2;
    align-self: center;
    width: 50%;
    display:inline-block;
    
    position: relative;
    
}

.pic{
    display: flex;
    justify-content: center;
    line-height: normal;
    flex-grow: 0;
    width: 342.9px;
    align-self: center;
/*    border: 2px solid black;**/
    margin: 1%;
}

.content{
    background-color:floralwhite;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
/*    height: 200px;*/
    padding: 2%;
    border: 2px solid black;
    border-radius: 25px;
    margin: 1%;
}

.s1{
    display: block;
    color: black;
}

.process{
   position: relative;
    width: 40%;
    background-color: gainsboro;
    height: 5px;
    display: inline-block;
    border-left: 0.5px solid black;
    
    border-radius: 25px;
}
html{
    scroll-behavior: smooth;
}

.lang{
    position: absolute;
    height: 5px;
    width: 70%;
    animation:load 1s 1;
    background-color: blueviolet;
/*    border: 2px solid blueviolet;*/
    border-left: .5px solid blueviolet;
    border-radius: 25px;    
}

@keyframes load{
    0%{
        transform: scale(0);
    }
     5%{
        transform: scale(.05);
    }
    10%{
        transform: scale(.10);
    }
    15%{
        transform: scale(.15);
    }
    20%{
        transform: scale(.20);
    }
    25%{
        transform: scale(.25);
    }
    30%{
        transform: scale(.);
    }
    35%{
        transform: scale(.35);
    }
    40%{
        transform: scale(.40);
    }
    45%{
        transform: scale(.45);
    }
    50%{
        transform: scale(.50);
    }
    55%{
        transform: scale(.55);
    }
    60%{
        transform: scale(.60);
    }
    65%{
        transform: scale(.65);
    }
    70%{
        transform: scale(.70);
    }
    75%{
        transform: scale(.75);
    }
    80%{
        transform: scale(.80);
    }
    85%{
        transform: scale(.85);
    }
    90%{
        transform: scale(.9);
    }
    95%{
        transform: scale(.95);
    }
    100%{
        transform: scale(1);
    }
}

#Language_container
{
    display: flex;
    flex-wrap: wrap;
    background-color: floralwhite;
    justify-content: center;
/*    height: 200px;*/
    padding: 2%;
    border: 2px solid black;
    border-radius: 25px;
    margin: 1%;
}

#heading
{
    align-self: center;
    flex-grow: .5;
    justify-content: center;
}
#Language
{
    display: flex;
    flex-wrap: wrap;
    flex-grow: 2;
    position: relative;
}
.skill_name
{
    display: inline-block;
    width:60px;
    color: black;
}

.skill_level{
    position: absolute;
    top: -12px;
    left: 100%;
    margin-left: -28px;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    min-width: 28px;
    line-height: 22px;
    padding: 0;
    border: 2px solid #345;
    border-radius: 8px;
    background: #fff;
}

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

#top_footer {
  	height: 100vh;
  	background-image: 
	  linear-gradient(to right bottom, 
     rgba(76, 216, 255, 0.8),
     rgba(30, 108, 217, 0.8)),
     url('https://images.pexels.com/photos/213399/pexels-photo-213399.jpeg');
  	
	background-size: cover;
  	background-position: top;
  	position: relative;

  	clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
}

.text-box {
  	position: absolute;
    line-height: 1.7;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
  	text-align: center;
}

.Counter{
    position: absolute;
    top: 70%;
    margin: 2%;
    color:greenyellow;
    text-align: left
}
#Time{
    color: greenyellow;
}

.heading-primary {
  	color: #fff;
  	text-transform: uppercase;
  	backface-visibility: hidden;
  	margin-bottom: 30px;
}

.heading-primary-main {
  	display: block;
  	font-size: 26px;
  	font-weight: 400;
  	letter-spacing: 5px;
}

.heading-primary-sub {
  	display: block;
  	font-size: 18px;
  	font-weight: 700;
  	letter-spacing: 7.4px;
}

.btn:link,
.btn:visited {
  	text-transform: uppercase;
  	text-decoration: none;
  	padding: 10px 20px;
  	display: inline-block;
  	border-radius: 100px;
  	transition: all 1.5s;
  	position: relative;
}

.btn:hover {
  	transform: translateY(7px);
  	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.btn:active {
  	transform: translateY(-1px);
  	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.btn-white {
  	background-color: #fff;
  	color: #777;
	font-size: 17px;
}