/* 
Static HTML5 Site Boilerplate
By Abhi Nayar
MIT Licence
https://linkedin.com/in/abhinayar
Any questions feel free to message me^.

Fonts:
  Roboto

Colors:
  Your color library
*/


/* Default Light Theme */
body {
    background-color: white;
    color: black;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    padding: 20px;
    text-align: center;
    background-color: #f4f4f4;
}

main {
    padding: 20px;
}

footer {
    text-align: center;
    padding: 10px;
    background-color: #f4f4f4;
}

/* Dark Theme */
body.dark-mode {
    background-color: #121212;
    color: white;
}

body.dark-mode header,
body.dark-mode footer {
    background-color: #1e1e1e;
}

body.dark-mode button {
    background-color: #333;
    color: white;
    border: 1px solid #555;
}


/* Generic Template Styles */
.bold {
  font-weight: 700;
} .light {
  font-weight: 300;
} .italic {
  font-style: italic;
} .prim {
  font-family: 'Rubik', sans-serif;
} .sec {
  font-family: 'Roboto', sans-serif;
} .main {
  font-weight: bold;
} .sub {
  font-weight: normal;
} .block {
  display: block;
} .inline-block {
  display: inline-block;
} .inline {
  display: inline;
}

.bg-center {
  background-position: center center;
} .bg-left {
  background-position: left center;
} .bg-right {
  background-position: right center;
} .bg-fixed {
  background-attachment: fixed;
} .bg-scroll {
  background-attachment: scroll;
} .bg-cover {
  background-size: cover;
} .bg-contain {
  background-size: contain;
} .bg-no-repeat {
  background-repeat: no-repeat;
}

/* Code your site for min-width: 0px first */

/* Now add mobile-first CSS */
@media (min-width: 320px) {
  
} @media (min-width: 540px) {
  
} @media (min-width: 768px) {
  
} @media (min-width: 868px) {
  
} @media (min-width: 992px) {
  
} @media (min-width: 1120px) {
  
} @media (min-width: 1440px) {
  
} @media (min-width: 1600px) {
  
}

body,
header,
footer,
button {
    transition: background-color 0.3s ease, color 0.3s ease;
}