@font-face {
  font-family: LogoFont; /* set name */
  src: url('../../font/RockSalt-Regular.ttf'); /* url of the font */
}
@font-face {
  font-family: HeadingFont; /* set name */
  src: url('../../font/ShadowsIntoLight-Regular.ttf'); /* url of the font */
}

html {
  scroll-behavior: smooth;
}
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../assets/img/hand.jpg');
  background-size: cover;
  background-position: center;
  z-index: -1; /* Keeps it behind all content */
  /* Optional: prevents slight jump on mobile scroll bars */
  will-change: transform; 
}
body {
  margin: 0;
  padding: 0;
}

h1 {
  font-family: LogoFont;
    font-size: 5rem;
    color: white;
}
h2 {
  font-family: HeadingFont;
    font-size: 3rem;
    color: white;
    margin: auto;
}

section {
     height: 90vh; 
     margin: 40px;
     padding: 20px 20px 20px 20px;
}
#hero {
    padding: 0 0 0 20px;
}
#dates {
    color: white;
  background-color: rgba(0, 0, 0, 0.5); /* 50% transparent black */
}

            .calendar {
                font-size: 1.5rem;
            }
            .venuename {
                font-size: 2rem;
            }
footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
    height: 30px;
}
.footer {
    font-size: .9rem;
    margin: 0;
  background-color: #333;
  color: pink;
  text-align: center;
  padding: auto 0;
  font-size: 10px;
}
.footer > .row {
     display: grid;
  grid-template-columns: 50% auto;

}

.AT_calendar > .row {
  display: flex;
  gap: 10px; /* Optional: adds space between the divs */

}
nav {
  position: fixed;
  left: 0;
  bottom: 30px;
  width: 100%;
    height: 70px;
    border: 2px solid yellow;
}

#nav {
    background-color: #D2691E;
  color: pink;
  text-align: center;
  padding: auto 0;
  font-size: 10px;
    margin: 0;
}
#navbar {
  display: flex;
  align-items: center; /* Vertically centers text */
  justify-content: center; /* Optional: Horizontally centers text */
     background-color: white;
     height: 30px;
   
}
#navbar .link {
    font-size: 1.5rem;
    padding: 0 10px;
}
#socialmedia_bar {
    background-color: #FFDCB8;
    color: #D2691E;
     height: 40px;
     padding: 5px;
}
#socialmedia_bar .icon {
    width:30px;
    height:30px;
}