/* document style */
html, body{
   scroll-behavior: smooth;
   font-size: 1vw;
   margin: 0;
   padding: 0;
   font-family: "Open Sans", sans-serif;
}

/*main div which includes everything*/
#main-box {
   width: 100%;
}

/* navbar style */
#nav {
   width: 100%;
   height: 70px;
   background-color: palegreen;
   position: fixed;
   opacity: 97%;
   box-shadow: 0px 3px 30px 0px #000000;
   z-index: 5;
}

/* apartment name in navbar (left side) stylization */
#nav-title {
   display: inline-block;
   font-size: 24px;
   font-weight: bold;
   margin-left: 20px;
}

/* stylization of div in navbar which contains links */
#nav-links {
   display: inline-flex;
   float: right;
   margin-right: 20px;
   width: 63rem;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   text-align: center;
   font-size: 14px;
}

/* stylization of links in navbar */
.nav-item {
   padding: 5px;
   border-radius: 5px;
   transition: 0.5s;
   display: inline-block;
}

/* style of links in navbar when hovered over */
.nav-item:hover {
   background-color: LimeGreen;
}

/* style of links in navbar after clicked */
.nav-item::after {
   background-color: PaleGreen;
}

/* toggler stylization */
#toggler {
   background-color: PaleGreen;
   outline: none;
   height: 30px;
   width: 30px;
   font-size: 14px;
   display: none;
}

/* toggler border override */
.nav-toggle-btn {
	border: none;
}

/* navbar animations */
.show-nav {
   animation: ShowNav 0.5s forwards ease;
}
.hide-nav {
   animation: HideNav 0.5s forwards ease;
}

/* navbar keyframes */
@keyframes ShowNav {
   0% {
      height: 0px;
   }
   100% {
      height: 278.4px;
   }
}
@keyframes HideNav {
   0% {
      height: 278.4px;
   }
   100% {
      height: 0px;
   }
}

/*vertical align in middle*/
.vert-center {
   position: relative;
   top: 50%;
   transform:translateY(-50%);
}

/* makes current page name in navbar look different than other links */
.current {
   text-shadow: 0px 0px 5px Green;
}

/* removes link decoration */
a {
   text-decoration: none;
   color: inherit;
}

/* additional link stylization */
a:hover, a:focus {
   text-decoration: none;
   text-shadow: 0px 0px 3px LimeGreen;
}

/* removing of margin on paragraph */
p {
   margin: 0;
}

/* header style */
#header-image {
   height: 350px;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   box-shadow: -2px 0px 30px #000000;
   position: relative;
}
#header-image-main {
   height: 350px;
   background-image: url('../resources/gallery/apartments-borina-apartment-nature-house-garden-terrace-walkway.jpg');
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   box-shadow: -2px 0px 30px #000000;
   position: relative;
}

/* header heading style */
#header-text {
   position: relative;
   text-align: center;
   animation: HeaderShow 2s forwards ease;
   transform: translateY(-33%);
}

/* header keyframes */
@keyframes HeaderShow {
   0% {
      opacity: 0;
      top: 55%;
   }
   100% {
      opacity: 1;
      top: 50%;
   }
}

/* header title decoration */
#header-title {
   color: #FFFFFF;
   font-size: 50px;
   text-shadow: 5px 5px 5px #000000;
   letter-spacing: 5px;
   margin-bottom: 0px;
   margin-top: 0px;
   font-weight: 500;
}

/* header subtitle decoration */
#header-subtitle {
   color: #FFFFFF;
   font-size: 25px;
   text-shadow: 3px 3px 5px #000000;
   letter-spacing: 5px;
   margin-bottom: 0px;
   margin-top: 10px;
   font-weight: 500;
}

/* footer style */
#footer {
   margin-top: 100px;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-around;
   background-color: PaleGreen; /* SpringGreen, LightGreen */
}

/* footer column style */
.footer-column {
   width: 300px;
   text-align: center;
   vertical-align: middle;
}

/* alignment to center */
.center {
   text-align: center;
   margin-left: auto;
   margin-right: auto;
   vertical-align: middle;
}

/* removes padding */
.p-0 {
   padding: 0px;
}

/* removes margin */
.m-0 {
   margin: 0px;
}

/* padding on top and bottom for titles */
.ptb {
   padding-top: 20px;
   padding-bottom: 10px;
}
.footer-ptb {
   padding-top: 20px;
   padding-bottom: 30px;
}

/* text sizes */
.ts-footer-title {
   font-size: 20px;
   display: block;
}
.ts-footer-paragraph {
   font-size: 17px;
}
.ts-footer-icon {
   font-size: 40px;
}

/* style of links in footer */
.footer-link {
   padding: 2px;
}

/* style of links in footer when hovered over */
.footer-link:hover {
   background-color: LimeGreen;
   border-radius: 5px;
   transition: 0.5s;
}

/* resets style of footer links after click */
.footer-link::after {
   text-decoration: none;
}

/* white color */
.col-white {
   color: #FFFFFF;
}

/* font weight bold */
.fwb {
   font-weight: bold;
}

/* margin for social media icon links */
.mx-social {
	margin-left: 1ch;
	margin-right: 1ch;
}

/* text indent */
.indent {
	text-indent: 4ch;
}

/* collapsed navbar style */
@media screen and (max-width: 900px) {
   #toggler {
      display: inline-block;
      position: absolute;
      right: 15px;
   }

   #nav-links {
      display: none;
      background-color: rgb(178, 250, 178);
      flex-direction: column;
      width: 220px;
      height: 278.4px;
      position: absolute;
      top: 69px;
      right: 15px;
      margin: 0;
      font-size: 18px;
      transform: translateY(0);
      overflow: hidden;
   }

   .nav-item {
      width: 100%;
   }
	.nav-item:hover, .nav-item:focus {
		background-color: rgb(178, 250, 178);
	}
	a:hover, a:focus {
		text-shadow: none;
  	}
}

/* makes nav links full width on small devices */
@media screen and (max-width: 530px) {
   #nav-links {
      width: 100%;
      right: 0;
      top: 69px;
   }

	.mx-social {
		margin-left: 3ch;
		margin-right: 3ch;
	}
}

/* header headings text size on small devices */
@media screen and (max-width: 350px) {
   #header-title {
      font-size: 40px;
   }

   #header-subititle {
      font-size: 15px;
   }
}