:root {
  /*Color Pallete*/
  --s-pink: #FFBCB3; 
  --s-dark: #272C26; 
  --s-white: #F8F8F8;
  --s-teal: #9DBB98;
  --s-peach: #FFC394;
  --s-brown: #815355; /*Smoky Rose*/
  --t-peach: #EC9464;
  --t-yellow: #F1BC52;
}

* {
  box-sizing: border-box;
  margin-left: 100;
  margin-right: 100;
}

@font-face {
    font-family: 'Marck Script';
    src: url('assets/MarckScript-Regular.woff2') format('woff2'),
        url('assets/MarckScript-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.title-box
{
  position: relative;
  text-align: center;
  border: 20px solid transparent;
  padding: 2%;
  border-image-source: url(assets/laceborder-offwhite.png);
  border-image-repeat: round;
  border-image-width: 250px;
  border-image-slice: 40%;
  border-image-outset: 0px;
}
.title {
  color: var(--t-peach);
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -75%);
  font-family: 'Courier New', monospace;
  font-size: 6vw;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: drop-shadow(var(--s-dark) 5px 5px);
}
.title-pic
{
  width:100%;
}
.title-date {
  color: var(--s-pink);
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -25%);
  transform: rotate(-20deg);
  font-family: "Marck Script", 'Brush Script MT', cursive;
  filter: drop-shadow(var(--s-dark) 2px 2px);
  line-height: 1.5;
  font-size: 5vw;
  text-align: center;
}
.head2 {
  color: var(--t-peach);
  font-family: "Marck Script", 'Brush Script MT', cursive;
  filter: drop-shadow(var(--s-dark) 2px 2px);
  line-height: 1.5;
  font-size: 40px;
}

.p0 {
  color: var(--s-white);
  font-family: "Verdana", "Arial", sans-serif;
  line-height: 1.5;
  font-size: 25px;
  filter: drop-shadow(var(--s-dark) 2px 2px);
}

.p3 {
  margin-left: 40px;
  color: var(--s-dark);
  font-family: "Verdana";
  line-height: 1.5;
  font-size: 12px;

}

body{
  background-image: url(assets/DSC_1107.jpeg);
  margin:0;
}
.head3 { 
  margin-left: 40px;
  color: var(--s-teal);
  font-family: "Courier New", monospace;
  line-height: 1.5;
  font-size: 28px;

}

a:link {
  color: var(--s-teal);
}
a:visited {
  color: var(--s-brown);
}
a:hover {
  color: var(--t-yellow);
}

/* selected link */
a:active {
  color: brown;
}

div.body {
  padding:20px;
}

.active {
  background-color: var(--s-dark);
}

.countdown {
  color: var(--s-teal);
  font-family: "Verdana", "Arial", sans-serif;
  line-height: 2.0;
  font-size: 40px;
  filter: drop-shadow(var(--s-dark) 2px 2px);
  text-align: center;
}

.topnav {
  overflow: hidden;
  background-color: var(--s-brown);
}

.topnav a {
  float: left;
  color: var(--s-white);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  font-family: "Marck Script", 'Brush Script MT', cursive;
}

.topnav a:hover {
  background-color: var(--s-pink);
  color: var(--s-dark);
}

.topnav a.active {
  background-color: var(--s-teal);
  color: var(--s-dark);
}

#map { 
  height: 360px; 
}