/*Navbar Section*/
#navbar {
    display: grid;
    grid-template-columns: 50px 50px 1fr 50px 50px 50px 50px;
    grid-template-rows: 50px;
    grid-template-areas: 
    "instagramfacebooktwitterwhatsappyoutubelinkedinflipkartpinterestamazonnetflixucgdwikipediar..gmailimagemenu";
    margin: 0 20px 0 10px;
}

a, p {
    text-decoration: none;
    color: #ffffff;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
}
a:hover {
    text-decoration: underline;
    box-shadow: 1px 1px 5px #3498DB;
    border-radius: 30px;
    border: 1px #3498DB;
}

#instagram {
    grid-area: gmail;
    justify-self: center;
    align-self: center;
margin-right: 10px;
}
#gdrive {
    grid-area: gmail;
    justify-self: center;
    align-self: center;
margin-right: 10px;
}
#r {
    grid-area: gmail;
    justify-self: center;
    align-self: center;
margin-right: 10px;
}
#wikipedia {
    grid-area: gmail;
    justify-self: center;
    align-self: center;
margin-right: 10px;
}
#gd {
    grid-area: gmail;
    justify-self: center;
    align-self: center;
margin-right: 10px;
}
#github {
    grid-area: gmail;
    justify-self: center;
    align-self: center;
margin-right: 10px;
color: #fff;
}
#linkedin {
    grid-area: gmail;
    justify-self: center;
    align-self: center;
margin-right: 10px;
}
#amazon {
    grid-area: gmail;
    justify-self: center;
    align-self: center;
margin-right: 10px;
}
#uc {
    grid-area: gmail;
    justify-self: center;
    align-self: center;
margin-right: 10px;
}
#netflix {
    grid-area: gmail;
    justify-self: center;
    align-self: center;
margin-right: 10px;
}
#facebook {
    grid-area: gmail;
    justify-self: center;
    align-self: center;
margin-right: 10px;
}
#whatsapp {
    grid-area: gmail;
    justify-self: center;
    align-self: center;
margin-right: 10px;
}
#gmail {
    grid-area: gmail;
    justify-self: center;
    align-self: center;
margin-right: 10px;
}
#image {
    grid-area: image;
    justify-self: center;
    align-self: center;
    margin-right: 10px;
}
#menu {
    color: #000;
    grid-area: menu;
    justify-self: center;
    align-self: center;
    margin-right: 20px;
}


.search-box{
   position: absolute;
   float: center;
   top: 35%; 
   left: 55%;
   transform: 
   translate(-70%,-70%); 
   background: #fff;
   height: 40px;
   border-radius: 40px;  
   padding: 10px; 
}

.search-box:focus > 
  .search-txt{
    box-shadow: 5px 5px 10px #3498DB;
    border-radius: 30px;
}

.search-box:hover > 
  .search-txt{
    float: center;
    width: 500px;
    padding: 06px;
 box-shadow: 5px 5px 10px grey;
    border-radius: 30px
   } 

.search-box:hover > 
  .search-btn{
    float: center;
    width: 40px;
    padding: 06px;
 box-shadow: 5px 5px 10px grey;
    border-radius: 30px
   } 
.search-box:hover > 
  .search-btn2{
    float: center;
    width: 40px;
    padding: 06px;
 box-shadow: 5px 5px 10px grey;
    border-radius: 30px
   } 


.search-btn{ 
	color: #e84118;
	float: left;
	width: 40px;
    height: 40px;
	border-radius: 50%;
    background: #fff;
    display: flex;
    transition: 0.4s;
    justify-content: center;
    align-items: center; 
}

.search-btn2{ 
	color: #e84118;
	float: right;
	width: 40px;
    height: 40px;
	border-radius: 50%;
    background: #fff;
    display: flex;
    transition: 0.4s;
    justify-content: center;
    align-items: center; 
}
.search-txt{ 
	border:none;
	background: none;
	outline: none;
	float: center;
    padding: 0;
    color: #000;
    font-size: 16px;
    transition: 0.4s;
    line-height: 40px;
    width: 207.2px;
    text-algin: center;
 
} 
.fix-me{
      text-shadow: 222px 222px 555px red;
       background: #fff;
       color: blue;
     border: 24px blue;
   border-radius: 30px;
width: 60px;
  height: 20px;
float: center;
text-align: center;
      position: fixed;
      top: 260px;
         
}
.fix-me2{
background: #fff;
       color: #000;
     border: 24px blue;
   border-radius: 30px;
width: 100px;
  height: 45px;
float: center;
text-align: center;
      
     border: 24px blue;
   
      position: fixed;
      top: 310px;
         
}
.btn{
background: #fff;
       color: #000;
     border: 24px blue;
   border-radius: 25px;
width: 85px;
  height: 30px;
float: right;
text-align: center;
      
     border: 24px blue;
   
      position: left;
      top: 250px;
           }

.footer {

    height:24px; // Replace with the height your footer should be
    width: 100%; // Don't change
    background-image: none;
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: 0% 0%;
    position: fixed;
    bottom: 0pt;
    left: 4pt;
    color: #fff;

}   

.footer_contents {

    height:24px; // Replace with the height your footer should be
    width: 1000px; // Visible width of footer
    margin:auto;

}
.toot p {
  border-right: solid 3px rgba(0,255,0,.75);
  white-space: nowrap;
  overflow: hidden;    
  font-family: 'Source Code Pro', monospace;  
  font-size: 12px;
  color: rgba(255,255,255,.70);
}

/* Animation */
.toot p {
  animation: animated-text 4s steps(29,end) 1s 1 normal both,
             animated-cursor 600ms steps(29,end) infinite;
}

/* text animation */

 @keyframes animated-text{
  from{width: 0;}
  to{width: 32px;}
}

/* cursor animations */

 @keyframes animated-cursor{
  from{border-right-color: rgba(0,255,0,.75);}
  to{border-right-color: transparent;}
}
.boxx1 {
  height: 20px;
  width: 45px;
  border: 2px solid #fff;
 
  text-align: left;
  font-weight: 90;
  color: #00bfb6;
  font-family: arial;
  position: relative;
}
/* speech bubble 6 */

.sb6:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 5px solid transparent;
  border-right: 5px solid #fff;
  border-top: 5px solid #fff;
  border-bottom: 5px solid transparent;
  left: -10.5px;
  top: 3px;
}

.sb6:after {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid #000;
  border-top: 3.5px solid #000;
  border-bottom: 3.5px solid transparent;
  left: -5.5px;
  top: 5px;
}


.datetime{
  color: #fff;
  background: #10101E;
      font-family: 'Gruppo';
  width: 122px;
  padding: 5px 2px;
  border: 3px solid #2E94E3;
  border-radius: 5px;
  -webkit-box-reflect: below 1px linear-gradient(transparent, rgba(255, 255, 255, 0.1));
  transition: 0.5s;
  transition-property: background, box-shadow;
   bottom: 0pt;
    right: 0pt;
  position: fixed;
  margin: 10px
}

.datetime:hover{
  background: #2E94E3;
  box-shadow: 0 0 8px #2E94E3;
}

.date{
  font-size: 8px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 3px;
}

.time{
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.time span:not(:last-child){
  position: relative;
  margin: 0 2px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 3px;
}

.time span:last-child{
  background: #2E94E3;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  margin-top: 2px;
  padding: 0 2px;
  border-radius: 3px;
}