styles.css2.css

/*styles.css*/
body
{
  font-family:Arial, Helvetica, sans-serif;
  font-size:18px;
  margin:0;
  display:grid;
  place-items:right;
  height:auto;
}
.main-title
{
  color:#181717;
  font-size:larger;
  font-family: Arial, Helvetica, sans-serif;
 font-style:oblique;
}
.showcase-container {
  display: flex;
  flex-direction: column;
  align-items: center;
justify-content: center;
  height: 100%;
  font-size: 1.6rem;
}
.showcase-container img{
  height:500px;
  width:1000px;
}
.h1-main title {
  text-transform: uppercase;
  background-color: gray;
  font-style: italic;
  font-family:'Courier New', Courier, monospace;
  font-display:initial;
}
.h1-display-1 p
{
text-transform: initial;
color:black;
font-size: medium;
font-family:'Courier New', Courier, monospace;
font-display:initial;
}
ul{
  margin:0;
  padding:0;
  list-style: none;
}
nav
{
  width:100%;
  box-shadow: 0 0 10px rgb( 0 0 0 /8%);
}
.menu{
  margin:0;
  padding:0;
  display:flex;
  justify-content:right;
  align-items: stretch;
  height:70px;
}
.menu li{
  display:inline-block;
  width:90px;
}
.menu li:hover.submenu{
  height:85px;
}
.id{
  color:red;
}
.menu>li:hover>a{
  color:#181717;
}
.menu>li:hover>a::before{
visibility: visible;
}
#dropdown
{
  color: red;
  background-color: aliceblue;
  font-size: medium;
  font-style: italic;
}
.submenu
{
  overflow:scroll;
  position: absolute;
  left:0;
  display:flex;
  justify-content: center;
  align-items:stretch;
  width:100%;
 background-color: black;
  height:0;
  line-height:40px;
  box-sizing:border-box;
  transition:height 0.3s ease-in-out;
}
.menu li .submenu a {
  color:#117964;
  opacity:0;
  font-size:medium
}
.menu>li:hover.submenu a{
  opacity:1;
}
.menu>li.submenu a:hover{
  background:#ddd;
}
.menu>li a {
  position:relative;
  height:100%;
}
.menu>li>a::before{
  content:"";
  position:absolute;
  width:100%;
  height:3px;
  bottom:3px;
  left:0px;
  background:mediumslateblue;
  transition: all 0.2s ease-in-out;
  visibility:hidden
}
.logo {
  order: 1;
  font-size: 2.3rem;
  margin-bottom: 0.5rem;
}