@import url('https://fonts.googleapis.com/css2?family=Adamina&display=swap');

:root {
  --bg-color: #031327;
  --header: #FFBD59;
  --red-accent: #FF5757;
  --white-accent: #D9D9D9;
}

body { overflow-x: hidden; scroll-behavior: smooth; background-color: var(--bg-color); }

h1, h2, h3, h4, h5 { font-family: "Adamina", serif; font-weight: 550; font-style: normal; text-transform: uppercase; }
p, a, li {  font-family: "Adamina", serif; font-optical-sizing: auto; font-weight: 500; font-style: normal; }

/*Navbar*/
.navbar { background-color: transparent !important; }
.navbar img { max-width: 250px; height: auto; }
.navbar ul { text-align: center; font-size: 1.3em; }
.navbar li .nav-link { color: var(--header) !important; }
.navbar li .nav-link:hover { background-color: var(--primary); color: #FFF !important; transition: 0.7s; }

/*Section*/
section h1 { font-size: calc(1.8em + 2vw); }
section h2 { font-size: 1.5em }
section p { font-size: 1.2em; padding: 1% 0; }

/*Hero Section*/
#hero { padding: 5%; background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("https://www.fashionflare.co.za/images/shop-background.jpg"); background-size: cover; background-position: center center; height: 100vh; width: 100%; color: var(--bg-color); }

/*Shop Section*/
#shop { padding: 5%; width: 100%; color: var(--white-accent); }
#shop h3 { color: var(--header); font-weight: 500; font-size: 1.2em; }
#shop p { font-weight: 400; font-size: 1em; }
#shop a { background-color: var(--bg-color); color: var(--header); font-weight: 500; font-size: 1.3em; }
#shop a:hover { background-color: var(--header); color: var(--bg-color); transition: 0.8s; font-weight: 500; }

/*Footer*/
footer .container-fluid { color: var(--white-accent); padding: 6vh 5vw; font-size: 1.1em; font-weight: 500; border-top: 2px solid var(--header); }
footer a { text-decoration: none; color: var(--white-accent); }
footer a:hover { color: var(--header); transition: 0.8s; }

/*Media Queries*/
@media(max-width: 768px){ #about, #contact { padding: 10% 5%; }}