148 lines
2.3 KiB
CSS
Executable File
148 lines
2.3 KiB
CSS
Executable File
|
|
.nav-bar {
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content: center;
|
|
height:80px;
|
|
}
|
|
.nav, .nav0 {
|
|
color: #ffffff;
|
|
text-decoration: none;
|
|
padding: 10px 10px; /* Increase horizontal padding */
|
|
transition: all .5s ease;
|
|
position: relative;
|
|
flex: auto;
|
|
flex-wrap: wrap;
|
|
}
|
|
.nav:hover{
|
|
text-shadow:
|
|
1px 1px 0 #ffffff,
|
|
transition all .5s;
|
|
}
|
|
.nav::before{
|
|
content:"";
|
|
width:100%;
|
|
height:1px;
|
|
bottom:0;
|
|
left:0;
|
|
position: absolute;
|
|
background-color:#ffffff;
|
|
transform-origin: center;
|
|
transform: scaleX(0);
|
|
transition: transform 0.5s ease;
|
|
}
|
|
.nav:hover::before{
|
|
transform: scaleX(1);
|
|
}
|
|
.nav0:hover{
|
|
text-shadow:1px 1px 0 #000,1px 1px 0 #000,1px 1px 0 #000,1px 1px 0 #000;
|
|
}
|
|
.nav0:hover .dot{
|
|
box-shadow: 0px 1px #016A70, 1px 1px #016A70;
|
|
}
|
|
.main {
|
|
color:#000;
|
|
display:flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 50px;
|
|
}
|
|
.container {
|
|
display: block;
|
|
height: 63%;
|
|
cursor: context-menu;
|
|
margin-top: 200px;
|
|
}
|
|
.paragraph{
|
|
width:65vw;
|
|
color: #000;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
text-align : center;
|
|
}
|
|
.name{
|
|
transition: all 0.5s ease;
|
|
font-weight: bold;
|
|
}
|
|
.name:hover {
|
|
text-shadow:
|
|
1px 1px 0 #000,
|
|
1px 1px 0 #000,
|
|
1px 1px 0 #000,
|
|
1px 1px 0 #000;
|
|
}
|
|
::selection {
|
|
color: #8DDFCB;
|
|
background: #000;
|
|
}
|
|
|
|
|
|
@media only screen and (max-width: 485px) {
|
|
|
|
.nav, .nav0 {
|
|
|
|
padding: 10px 5px; /* Increase horizontal padding */
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@media only screen and (max-width: 380px) {
|
|
|
|
.nav, .nav0 {
|
|
|
|
padding: 10px 5px; /* Increase horizontal padding */
|
|
margin: 0px;
|
|
}
|
|
|
|
}
|
|
|
|
/* Add to existing CSS */
|
|
.hamburger {
|
|
display: none; /* Hide by default */
|
|
cursor: pointer;
|
|
font-size: 30px; /* Adjust based on your design preferences */
|
|
color: #ffffff; /* Change color as needed */
|
|
}
|
|
|
|
/* Mobile-specific styles */
|
|
|
|
@media only screen and (max-width: 340px) {
|
|
.hamburger {
|
|
display: flex;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.animate{
|
|
transform:skew(180deg);
|
|
transition: transform 0.5s ease;
|
|
|
|
}
|
|
|
|
.unanimate{
|
|
transform:skew(180deg);
|
|
transition: transform 0.5s ease;
|
|
|
|
}
|
|
|
|
.menu {
|
|
flex-direction: row;
|
|
width: 100%;
|
|
}
|
|
|
|
.nav {
|
|
display: flex;
|
|
text-align: left;
|
|
padding: 10px;
|
|
width: fit-content;
|
|
}
|
|
|
|
.nav-bar {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.nav::before{
|
|
transform-origin: left;
|
|
}
|
|
|
|
} |