Line 22: | Line 22: | ||
body { | body { | ||
− | background-color: # | + | background-color: #E4F26B; |
font-family: "avenir"; | font-family: "avenir"; | ||
margin: 0 0 0 0; | margin: 0 0 0 0; | ||
Line 36: | Line 36: | ||
/* Track */ | /* Track */ | ||
::-webkit-scrollbar-track { | ::-webkit-scrollbar-track { | ||
− | background: | + | background: black; |
+ | margin-top: 30px; | ||
+ | margin-bottom: 30px; | ||
} | } | ||
/* Handle */ | /* Handle */ | ||
::-webkit-scrollbar-thumb { | ::-webkit-scrollbar-thumb { | ||
− | background: | + | background: grey; |
} | } | ||
/* Handle on hover */ | /* Handle on hover */ | ||
::-webkit-scrollbar-thumb:hover { | ::-webkit-scrollbar-thumb:hover { | ||
− | background: | + | background: grey; |
} | } | ||
Line 73: | Line 75: | ||
text-align: left; | text-align: left; | ||
overflow: hidden; | overflow: hidden; | ||
− | background: # | + | background: black; |
+ | border-radius: 60px; | ||
+ | margin-left: 10%; | ||
+ | margin-right: 10%; | ||
+ | box-shadow: 0px 0px 10px 3px #888888; | ||
+ | |||
} | } | ||
#navbar span { | #navbar span { | ||
− | padding: 0.5% 0 0.5% 0; | + | padding:0.5% 0 0.5% 0; |
/*position: fixed;*/ | /*position: fixed;*/ | ||
/*top: 0;*/ | /*top: 0;*/ | ||
Line 84: | Line 91: | ||
display: inline; | display: inline; | ||
width: 100%; | width: 100%; | ||
− | color: | + | color: white; |
text-align: left; | text-align: left; | ||
vertical-align: middle; | vertical-align: middle; | ||
} | } | ||
− | |||
.content { | .content { | ||
Line 95: | Line 101: | ||
.sticky { | .sticky { | ||
− | position: | + | position: sticky; |
− | top: | + | top: 25px; |
− | width: 100%; | + | //width: 100%; |
} | } | ||
Line 106: | Line 112: | ||
/*Navigation Overlay Style BEGINS*/ | /*Navigation Overlay Style BEGINS*/ | ||
.overlay { | .overlay { | ||
− | height: | + | height: 80%; |
width: 0%; | width: 0%; | ||
position: fixed; | position: fixed; | ||
Line 112: | Line 118: | ||
top: 0; | top: 0; | ||
left: 0; | left: 0; | ||
− | background-color: rgb( | + | //background-color: rgb(250,250,250); |
− | background-color: rgba( | + | background-color: rgba(250,250,250, 0.95); |
+ | border-radius: 40px; | ||
overflow-y: auto; | overflow-y: auto; | ||
overflow-x: hidden; | overflow-x: hidden; | ||
Line 121: | Line 128: | ||
.overlay-content { | .overlay-content { | ||
position: relative; | position: relative; | ||
− | top: | + | top: 7%; |
− | bottom: | + | bottom: 0%; |
width: 100%; | width: 100%; | ||
text-align: center; | text-align: center; | ||
− | |||
} | } | ||
.overlay a { | .overlay a { | ||
− | padding: | + | padding: 2%; |
text-decoration: none; | text-decoration: none; | ||
font-size: 200%; | font-size: 200%; | ||
− | color: | + | color: black; |
display: block; | display: block; | ||
transition: 0.3s; | transition: 0.3s; | ||
Line 144: | Line 150: | ||
.overlay a:hover , .overlay a:focus{ | .overlay a:hover , .overlay a:focus{ | ||
− | color: # | + | color: #333333; |
− | border: 1px solid | + | border: 1px solid #aaaaaa; |
+ | border-radius: 20px; | ||
+ | box-shadow: 0px 0px 20px 3px #aaaaaa; | ||
+ | |||
} | } | ||
Line 164: | Line 173: | ||
text-decoration: none; | text-decoration: none; | ||
font-size: 200%; | font-size: 200%; | ||
− | color: | + | color: black; |
display: block; | display: block; | ||
transition: 0.3s; | transition: 0.3s; | ||
Line 174: | Line 183: | ||
.overlay button:after { | .overlay button:after { | ||
content: '+'; | content: '+'; | ||
− | color: | + | color: black; |
font-weight: bold; | font-weight: bold; | ||
float: right; | float: right; | ||
Line 181: | Line 190: | ||
.overlay .active:after { | .overlay .active:after { | ||
content: '-'; | content: '-'; | ||
− | color: | + | color: black; |
font-weight: bold; | font-weight: bold; | ||
float: right; | float: right; | ||
Line 188: | Line 197: | ||
.overlay button:hover, .overlay button:focus { | .overlay button:hover, .overlay button:focus { | ||
− | color: # | + | color: #333333; |
− | border: 1px solid | + | border: 1px solid #aaaaaa; |
+ | border-radius: 20px; | ||
+ | box-shadow: 0px 0px 20px 3px #aaaaaa; | ||
} | } | ||
Line 202: | Line 213: | ||
/*MAIN BODY CONTENT SECTION BEGINS*/ | /*MAIN BODY CONTENT SECTION BEGINS*/ | ||
.content-section { | .content-section { | ||
− | margin: 0 | + | margin: 0 0 0 0; |
padding: 3% 3% 5% 3%; | padding: 3% 3% 5% 3%; | ||
− | background: | + | background: black; |
line-height: 1.6; | line-height: 1.6; | ||
Line 237: | Line 248: | ||
#navbar img { | #navbar img { | ||
display: inline-block; | display: inline-block; | ||
− | height: | + | height: 5%; |
− | width: | + | width: 5%; |
− | + | margin-left: 5px; | |
− | margin-left: | + | margin-top: 5px; |
− | + | ||
} | } | ||
Line 329: | Line 339: | ||
} | } | ||
#navbar img { | #navbar img { | ||
− | height: | + | height: 8%; |
− | width: | + | width: 8%; |
− | margin-left: | + | margin-left: 5px; |
} | } | ||
.overlay .closebtn { | .overlay .closebtn { | ||
Line 373: | Line 383: | ||
</style> | </style> | ||
− | |||
− | |||
</html> | </html> |
Revision as of 21:57, 26 August 2020