* {
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.nav-bar {
    margin-top: 50px;
    padding: 10px 20px; /* Add padding to create space on the sides */
 box-sizing: border-box;
  background-color: #8a0303; 
  padding: 3px 40px;
  height: 88px;
  font-family: myFirstFont;
  border-radius: 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.left {
    display: inline;
}

.left img {
    padding: 10px 10px;
    width: 65px;
    transition: all 2.4s;
}

.left img:hover {
    transform: rotateY(360deg);
}

.right {
    display: inline;
    float: right;
    margin: 25px;
}

.right ul {
    display: inline;
    margin: 0;
    padding: 0;
}

.right ul li {
    padding: 8px 21px;
    display: inline;
}

.right ul li a {
    color: white;
    list-style-type: none;
    font-size: 22px;
    text-decoration: none;
    position: relative;
}

.right ul li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -16px;
    width: 100%;
    height: 4px;
    background-color: #ffc107;
    transform: scaleX(0);
    transition: transform 0.377s ease-in-out;
}

.right ul li a:hover::after {
    transform: scaleX(1);
}

#btn-img {
    height: 60px;
    cursor: pointer;
    display: inline;
    float: right;
    margin-top: -16px;
    margin-left: 15px;
    transition: .4s;
    transform: scale(1);
}

#btn-img:hover {
    height: 65px;
    transform: scale(1.3);
}

@font-face {
    font-family: myFirstFont;
    src: url('Required-material/external fonts/ExquisiteCorpse.ttf');
}

@font-face {
    font-family: mySecFont;
    src: url('Required-material/external fonts/Zombified.ttf');
}


body {
  background-color: black; /* Set the background color of the body element to black */
}

.main {
background-color: black;
  background-repeat: no-repeat;
  height: 100vh; /* Set the height to cover the entire viewport height */
  background-position: center;
  background-size: cover;
}


.main center .headings {
    font-family: myFirstFont;
    font-size: 73px;
    margin-top: 308px;
    text-shadow: 
        0 0 5px rgba(255, 0, 0, 0.8),   /* Red glow */
        0 0 10px rgba(255, 0, 0, 0.8), 
        0 0 15px rgba(255, 0, 0, 0.8), 
        0 0 20px rgba(255, 0, 0, 0.8), 
        0 0 25px rgba(255, 0, 0, 0.8); /* Larger outer glow */
}

.main center .headings p {
    color: #ff0000;
    text-shadow: 1px 5px 0px #ffffff;
}

.main center .bottom {
    margin-top: 260px;
    font-size: 32px;
    font-weight: 900;
    border: 1px solid red;
    width: 945px;
    height: 30px;
    padding-bottom: 20px;
    cursor: no-drop;
    position: relative;
    font-family: mySecFont;
    transition: transform 2.5s ease;

}

.main center .bottom:hover {
    transform: translateY(-200px);
}


.main center .bottom p {
    color: #ffc107;
}