/* 
Command to activate the under-used SASS file:
sass --watch scss/style.scss css/style.css 
*/

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

/* Navbar styling */

nav {
  background-color: antiquewhite !important;
}

a {
  text-decoration: none;
  color:black !important;
}

.navbar {
  font-family: "Roboto Slab", serif;
}

a:hover {
  color: #A70C0C !important;
}

.nav-link {
  font-family: "Roboto Slab", serif;
}

.navbar-text {
  color:#A70C0C !important;
}

/* Styling for the header image */
.header {
    position: relative;
    text-align: center;
    width: 100%;
}

#headerText {
    font-family: Impact, "Anton", sans-serif;
    color:#A70C0C;
    font-size: 15vw;
    display: block !important
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Roboto Slab", serif;
  color: black;
  font-size: 6rem;
  -webkit-text-stroke: 1px white;
}

/* General styling */

#countdown {
  left: 50%;
  display: flex;
  justify-content: center;
  align-items: center; 
  font-family: Impact, "Anton", sans-serif;
  color:#A70C0C;
  font-size: 4vw;
  -webkit-text-stroke: .5px white;
}

body {
  background-color: antiquewhite;
}

body p {
  font-family: "Times New Roman", serif;
  font-size: 1.1em;
  margin: 0 0 1em 0;
}

.writing a {
  font-family: "Times New Roman", serif;
  text-decoration: underline;
  text-decoration-color: #A70C0C;
  text-decoration-thickness: 2px;
}

body b {
  color:#A70C0C;
}

body li {
  font-family: "Times New Roman", serif;
  font-size: 1.1em;
}

body h1 {
  font-family: "Roboto Slab", serif;
  font-size: 1.3em;
  color: white;
  text-align: center;
  margin: 1em 0 1em 0;
  line-height: 1.8em;
}

body h1 span {
    background-color: #A70C0C;
    padding: 0.2em 0.5em;
}

body .container {
  padding-left: 10%;
  padding-right: 10%;
}

option {
  font-size: 1.5rem;
}