/* CSS Document */
/* HTML: */
.arrow-down {
float:right;
width: 8px;
margin: 8px 0 0 5px;
aspect-ratio: 1/cos(30deg);
clip-path: polygon(50% 100%,100% 0,0 0);
background: white;
}
/* HTML: */
.arrow-right {
float:right;
height: 8px;
margin: 8px 0 0 5px;
aspect-ratio: cos(30deg);
clip-path: polygon(0 0,100% 50%,0 100%);
background: white;
}
.hamburger-menu {
--c: #fff;
height: 15px;
aspect-ratio: 1;
background:
radial-gradient(closest-side at 12.5% 25%,var(--c) 97%,#0000 101%) 0 0/80% 40%,
linear-gradient(var(--c) 50%,#0000 0) top/80% 40% repeat-y;
}
.gg-trash {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--ggs,1));
width: 10px;
height: 12px;
border: 2px solid transparent;
box-shadow:
0 0 0 2px,
inset -2px 0 0,
inset 2px 0 0;
border-bottom-left-radius: 1px;
border-bottom-right-radius: 1px;
margin: 10px 0 0 5px;
}
.gg-trash::after,
.gg-trash::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute
}
.gg-trash::after {
background: currentColor;
border-radius: 3px;
width: 16px;
height: 2px;
top: -4px;
left: -5px
}
.gg-trash::before {
width: 10px;
height: 4px;
border: 2px solid;
border-bottom: transparent;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
top: -7px;
left: -2px
}
.gg-pen {
box-sizing: border-box;
position: relative;
display: block;
transform: rotate(-45deg) scale(var(--ggs,1));
width: 14px;
height: 4px;
border-right: 2px solid transparent;
box-shadow:
0 0 0 2px,
inset -2px 0 0;
border-top-right-radius: 1px;
border-bottom-right-radius: 1px;
margin: 10px 0 0 5px;
}
.gg-pen::after,
.gg-pen::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute
}
.gg-pen::before {
background: currentColor;
border-left: 0;
right: -6px;
width: 3px;
height: 4px;
border-radius: 1px;
top: 0
}
.gg-pen::after {
width: 8px;
height: 7px;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-right: 7px solid;
left: -11px;
top: -2px
}
.mb { margin-bottom: 6px; }
.mbt { margin: 16px 0 6px 0; }
.toggle,
[id^=drop] {
display: none;
}
/* Giving a background-color to the nav container. */
nav {
margin:0;
padding: 0;
background-image: linear-gradient(rgba(40, 39, 47, 1), rgba(61, 54, 72, 1));
}
/* Since we'll have the "ul li" "float:left"
* we need to add a clear after the container. */
nav:after {
content:"";
display:table;
clear:both;
}
/* Removing padding, margin and "list-style" from the "ul",
* and adding "position:reltive" */
nav ul {
float: left;
padding:0;
margin:0;
list-style: none;
position: relative;
}
/* Positioning the navigation items inline */
nav ul li {
margin: 0px;
display:inline-block;
float: left;
background-image: linear-gradient(rgba(40, 39, 47, 1), rgba(61, 54, 72, 1));
}
/* Styling the links */
nav a {
display:block;
padding:5px 20px;
color:#FFF;
font-size:15px;
text-decoration:none;
}
nav ul li ul li:hover {
background-image: linear-gradient(rgba(40, 39, 47, 1), rgba(61, 54, 72, 1));
}
/* Background color change on Hover */
nav a:hover {
background-image: linear-gradient(rgba(20, 19, 27, 1), rgba(41, 34, 52, 1));
}
/* Hide Dropdowns by Default
* and giving it a position of absolute */
nav ul ul {
display: none;
position: absolute;
/* has to be the same number as the "line-height" of "nav a" */
top: 32px;
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width:170px;
float:none;
display:list-item;
position: relative;
background-image: linear-gradient(rgba(40, 39, 47, 1), rgba(61, 54, 72, 1));
}
/* Second, Third and more Tiers
* We move the 2nd and 3rd etc tier dropdowns to the left
* by the amount of the width of the first tier.
*/
nav ul ul ul li {
position: relative;
top:-32px;
/* has to be the same number as the "width" of "nav ul ul li" */
left:170px;
}
/* Media Queries
--------------------------------------------- */
@media all and (max-width : 768px) {
nav {
margin: 0;
}
/* Hide the navigation menu by default */
/* Also hide the */
.toggle + a,
.menu {
display: none;
}
/* Stylinf the toggle lable */
.toggle {
display: block;
background-image: linear-gradient(to right, rgba(60, 59, 67, 1), rgba(40, 39, 47, 1));
padding:5px 20px;
color:#FFF;
font-size:15px;
text-decoration:none;
border:none;
}
/* Highlight expandable first tier buttons */
.toggle:hover {
background-image: linear-gradient(to right, rgba(80, 79, 87, 1), rgba(60, 59, 67, 1));
}
/* Display Dropdown when clicked on Parent Lable */
[id^=drop]:checked + ul {
display: block;
width: 100%;
}
/* Change menu item's width to 100% */
nav ul li {
display: block;
width: 100%;
background-image: linear-gradient(to right, rgba(60, 59, 67, 1), rgba(40, 39, 47, 1));
}
nav ul ul .toggle,
nav ul ul a {
padding: 0 40px;
}
nav ul ul ul a:before {
content: '';
margin-left: 20px;
}
nav ul ul ul a {
padding: 0 80px;
}
nav a:hover {
background-image: linear-gradient(rgba(40, 39, 47, 1), rgba(61, 54, 72, 1));
}
/* Background color third tier buttons */
nav ul ul ul a {
background-image: linear-gradient(rgba(20, 19, 17, 1), rgba(41, 34, 42, 1));
}
nav ul li ul li .toggle,
nav ul ul a,
nav ul ul ul a{
padding:5px 20px 0 40px;
color:#FFF;
font-size:15px;
}
/* Background color second tier buttons */
nav ul li ul li .toggle,
nav ul ul a {
background-image: linear-gradient(to right, rgba(81, 74, 92, 1), rgba(60, 59, 67, 1));
}
/* Hide Dropdowns by Default */
nav ul ul {
float: none;
position:static;
color: #ffffff;
/* has to be the same number as the "line-height" of "nav a" */
}
/* Hide menus on hover */
nav ul ul li:hover > ul,
nav ul li:hover > ul {
display: none;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
display: block;
width: 100%;
}
nav ul ul ul li {
position: static;
/* has to be the same number as the "width" of "nav ul ul li" */
}
}
@media all and (max-width : 330px) {
nav ul li {
display:block;
width: 94%;
}
}