*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Bebas Neue', cursive;
}
:root{
--sidebarwidth:300px;
--sidebarhide:-300px;
}
body{
/* background: #001a25; */
margin: 0;
padding: 0;
width: 100vw;
text-decoration: none;
overflow-x: hidden!important;
}
#toggle
{
position: fixed;
top: 40px;
right: 4%;
width: 30px;
height: 30px;
border: 1px solid black;
background: #fff;
box-shadow: 0 0 10px #67bde6;
border-radius: 5px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
z-index: 103;
}
#toggle::before
{
content: '';
position: absolute;
width: 22px;
height: 2px;
background: black;
transform: translateY(-5px);
transition: 0.2s;
}
#toggle::after
{
content: '';
position: absolute;
width: 22px;
height: 2px;
/* background: #fff; */
background: black;
transform: translateY(5px);
transition: 0.2s;
}
#toggle.active::before{
transform: translateY(0px)rotate(45deg);
}
#toggle.active::after{
transform: translateY(0px)rotate(-45deg);
}
#sidebar
{
position: fixed;
top: 0;
left: var(--sidebarhide);
width: var(--sidebarwidth);
height: 100%;
background: #1d1d1d;
transition: 0.5s;
z-index: 100;
}
#sidebar.active
{
left: -50px;
}
#sidebar ul
{
position: relative;
margin-top: 50px;
}
#sidebar ul li
{
list-style: none;
display: inline-block;
width: 80%;
padding: 10px 40px;
padding-right: 0px;
}
#sidebar ul li a
{
font-family: 'Oswald', sans-serif;;
text-transform: uppercase;
color: #666;
text-decoration: none;
font-size: 1em;
letter-spacing: 1px;
display: block;
width: 100%;
}
#sidebar ul li:hover a
{
color: #fff;
text-shadow: 0 0 10px #fff;
}
#sidebar ul .activepage a
{
color: #fff;
text-shadow: 0 0 10px #fff;
}
#container
{
/* position: relative; */
padding: 5px 50px;
top: 0;
left: 0;
width: 89%;
height: 100%;
transition: 0.5s;
margin-bottom: 5px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#container.active,#rowdesign.active
{
transform: translateX(250px);
transition: 0.5s;
}
#container #logo-nav
{
top: 0;
left: 0;
position: fixed;
background: rgb(248, 248, 250);
width: 100%;
z-index: 99;
/* border-bottom: 1px dotted grey; */
overflow: hidden;
/* overflow: hidden; */
}
#container #logo-nav.scrollf
{
box-shadow: 0px 2px 10px;
}
#container #logo-nav img:hover
{
cursor: pointer;
}
#container #logo-nav img{
position: relative;
left: 5%;
top: 0;
height: 100px;
width: 100px;
background: #fff;
z-index: 99;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}
#container .title
{
position: absolute;
display:inline-block;
left: 50%;
top: 50px;
height: 100px;
width:40% ;
/* margin-top: 50px; */
margin-left: -20%;
margin-top: -50px;
z-index: 99;
font-size: 1.4em;
display: flex;
justify-content: center;
/* background-color: black; */
}
#container .title h2
{
/* font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; */
color: rgb(251, 251, 253);
font-family: 'Lobster', cursive;
text-transform: uppercase;
/* text-shadow: 1px 2px rgba(238, 25, 25,0.7); */
display:flex;
align-items: center;
justify-content: center;
/* background:linear-gradient(
to bottom,
#462523 0,
#cb9b51 22%,
#f6e27a 45%,
#f6f2c0 50%,
#f6e27a 55%,#cb9b51 78%,#462523 100%); */
background-image: url(../img/namebg.jpg);
/* background:linear-gradient(
to bottom,#bf953f,#fcf6ba,#b38728,#fbf5b7,#aa771c); */
-webkit-background-clip: text;
background-clip:text;
-webkit-text-fill-color: transparent;
overflow:hidden ;
}
/*------------------Social Media CSS START------------------------- */
#social_list
{
width: 100%;
/* border: 2px solid black; */
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
#bfacebook,#binstagram,#btwitter,#bwhatsapp
{
font-size: 2em;
margin: 6px 12px;
padding: 4px 6px;
cursor: pointer;
background: #1d1d1d;
color: #fff;
border-radius: 5px;
box-shadow: 2px 2px 2px #00000080,
10px 10px 12px #00000080,
inset 2px 2px 10px #00000080,
inset 2px 2px 10px #00000080,
inset 2px 2px 10px #00000080,
inset 2px 2px 10px #00000080;
}
#bfacebook:hover,#binstagram:hover,#btwitter:hover,#bwhatsapp:hover
{
text-shadow: 0px 0px 50px #1c5aa7,
0px 0px 50px #0072ff,
0px 0px 50px #0072ff,
0px 0px 50px #0072ff;
}
#wrap,#wrapleft
{
overflow-x:hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/*------------------SOcial Media CSS ENDED-------------------------*/
/* footer CSS START*/
.tooltip
{
position: absolute;
left: 0;
bottom: 0;
display: inline-block;
border: 1px dotted black;
}
.tooltip .tooltiptext {
/* margin-top: -150%; */
/* visibility: hidden; */
display: none;
width: 89.5vw;
bottom: 0;
background-color: rgb(32, 137, 235);
box-shadow: 0 0 20px rgb(32, 31, 31);
color:black;
text-align: center;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
/* visibility: visible; */
display: block;
}
/* footer CSS END*/
/* CSS For Responsiveness START */
@media screen and (max-width:835px)
{
#container .title h2
{
font-size: 30px;
}
}
@media screen and (max-width:745px)
{
#container .title h2
{
font-size: 25px;
}
}
@media screen and (max-width:621px)
{
#container .title h2
{
font-size: 20px;
}
}
@media screen and (max-width:496px)
{
#container .title h2
{
display: none;
}
}
@media screen and (max-width:310px)
{
#social_list footer
{
display: none;
}
}
/* CSS For Responsiveness END */
/* CSS for Preloader START */
.preloader
{
display: flex;
position: fixed;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
z-index: 104;
background: #fff;
}
.alphabet
{
position: relative;
height: 30px;
width: 30px;
background: #ccc;
float: left;
text-align: center;
line-height: 30px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 20px;
color: #fff;
}
.alphabet:nth-child(1)
{
background: #3366ff;
margin-right: 15px;
animation: move 600ms ease 0ms infinite alternate;
}
.alphabet:nth-child(2)
{
background: #3366ff;
margin-right: 15px;
animation: move 600ms ease 75ms infinite alternate;
}
.alphabet:nth-child(3)
{
background: #3366ff;
margin-right: 15px;
animation: move 600ms ease 150ms infinite alternate;
}
.alphabet:nth-child(4)
{
background: #3366ff;
margin-right: 15px;
animation: move 600ms ease 225ms infinite alternate;
}
.alphabet:nth-child(5)
{
background: #3366ff;
margin-right: 15px;
animation: move 600ms ease 300ms infinite alternate;
}
.alphabet:nth-child(6)
{
background: #3366ff;
margin-right: 15px;
animation: move 600ms ease 375ms infinite alternate;
}
.alphabet:nth-child(7)
{
background: #3366ff;
margin-right: 15px;
animation: move 600ms ease 450ms infinite alternate;
}
@keyframes move
{
from
{
transform: scale(1.5)translateY(-25px) rotateX(45deg);
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
to
{
transform: scale(1.0)translateY(0px) rotateX(0deg);
box-shadow: 0 25px 40px rgba(0, 0, 0, 0.4);
background: #3366ff;
}
}
/* CSS for Preloader END */