/* */ body{ background-color: transparent; overflow: hidden; } nav{ font-size: max(1vw, 10px); width: 100%; display: flex; flex-direction: row; align-items: start; justify-content: center; a{ text-decoration: none; } #MenuDropBtn1{ width: 5vw; display: flex; flex-direction: row; align-items: center; justify-content: center; padding-left: 2.5vw; padding-right: 2.5vw; img{ vertical-align: middle; border-radius: 50%; box-shadow: 0px 0px 15px 1px rgb(204,0,62); /* h-offset v-offset blur spread color */ padding: 1px; width: 3vw; height: 3vw; } &:hover{ background-color: rgb(204,0,62); img{ box-shadow: 0px 0px 15px 1px rgb(1,0,34); /* h-offset v-offset blur spread color */ } } } .MenuDropBtns{ /* For looks */ height: 5vw; &:hover .Buttons{ /* For looks */ background-color: rgb(204,0,62); color: rgb(1,0,34); border: none; } .Buttons{ transition: background-color 300ms; /* Transition the height property over 300 milliseconds */ /* For looks */ border: none; color: #FFFFFF; width: 100%; height: 100%; overflow: hidden; font-size: 2vw;/* H1 size */ background-color: rgb(1,0,34); padding: 0px 2.5vw; display: flex; flex-direction: row; justify-content: center; align-items: center; } .Mains{ background-color: rgb(204,0,62); padding: 0px 0px 0px 8%; /* This list's distance from the sides | Top, right, bottom, left */ margin: 0px; width: 92%; line-height: 1.5vw; text-align: left; clear: both; /* Clears objects floating both left and right (Title and button) */ position: relative; transition: height 300ms; overflow: clip; height: 0px; a{ color: #FFFFFF; font-weight: bold; font-size: 1.25vw; text-decoration: none; li{ display: block; width: 100%; text-decoration: none; &:hover{ /* For looks */ background-color: rgb(30,0,38); color: rgb(1,0,34); text-decoration: none; } } } } } }