@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; }

/*Terms Section*/
#terms { padding: 5% 6vw; }
#terms h2 { text-align: center; color: var(--header); font-size: 1.7em; font-weight: 550; }
#terms .row { margin-top: 5%; padding-bottom: 4%; }
#terms h3 { text-align: left; color: var(--header); font-size: 1.3em; }
#terms p { text-align: left; color: var(--white-accent); font-size: 1.1em; }
#terms a { text-decoration: none; color: var(--red-accent); }
#terms a:hover { color: var(--header); }
#terms .btn-primary { display: block; margin: auto; padding: 10px 30px; width: fit-content; background-color: var(--header); color: var(--bg-color); border: none; font-size: 1.1em; font-weight: 600; }
#terms .btn-primary:hover { background-color: var(--white-accent); color: var(--red-accent); transition: 0.8s; }

/*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%; }
}