@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
* {
  margin: none;
  padding: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  scroll-behavior: smooth;
  --color1: #292b2c;
  --color2: #f7f7f7;
  --button1: slategray;
  --button2: #1f2937;
  --hover: #00ff77;
  font-size: 15px;
  --font1: "Inter", sans-serif;
  font-display: swap;
}

.dark-mode-btn {
  position: fixed;
  bottom: 15px;
  right: 15px;
  font-size: 2rem;
}

.dark-mode {
  background-color: var(--color1) !important;
  color: var(--color2) !important;
}

.dark-mode .contact {
  background-color: var(--color1) !important;
}

.dark-mode .toggle {
  background-color: var(--color2) !important;
}

.dark-mode .toggle i {
  color: var(--color1) !important;
}

.toggle {
  background-color: var(--color1) !important;
}

.toggle i {
  color: var(--color2) !important;
}

body {
  background-color: var(--color2) !important;
  font-family: var(--font1) !important;
}

button {
  font-weight: 700 !important;
  color: var(--color2) !important;
}

button:hover {
  background-color: var(--hover) !important;
  color: black !important;
  font-weight: 700 !important;
}

.btn-contact {
  background-color: var(--color1) !important;
}

.btn-github {
  background-color: var(--button1) !important;
  color: black !important;
}

.btn-learn-more {
  background-color: var(--button2) !important;
}

.section-text {
  font-size: calc(1rem + 1.5vw) !important;
  font-weight: 700;
}

h1 {
  font-size: calc(1.5rem + 2vw) !important;
}

h2 {
  font-size: calc(1.5rem + 1vw) !important;
}

h3 {
  font-size: calc(1rem + 1vw) !important;
}

h4 {
  font-size: calc(1rem + 0.5vw) !important;
}

.lead {
  font-size: calc(1rem + 0vw) !important;
}

.tag {
  font-size: calc(0.5rem + 0vw) !important;
}

nav {
  font-family: var(--font5);
  background-color: var(--color2);
}

nav .navbar-collapse,
nav ul li {
  background-color: #f5f5f5;
}

nav .navbar-toggler-icon {
  font-size: 1.2rem;
}

nav .navbar-brand {
  color: var(--color1) !important;
  font-size: 2rem;
  font-family: var(--font1);
  letter-spacing: 0.25px;
  font-weight: 900 !important;
}

nav .navbar-brand:hover {
  color: #00ff77 !important;
  -webkit-text-decoration: solid 2px underline #00ff77;
          text-decoration: solid 2px underline #00ff77;
}

nav .nav-link {
  color: var(--color1) !important;
  font-size: 1.2rem;
  font-weight: 700;
}

nav .nav-link:hover {
  color: #00ff77 !important;
  -webkit-text-decoration: solid 2px underline #00ff77;
          text-decoration: solid 2px underline #00ff77;
}

nav .nav-item .active {
  color: #0077ff !important;
}

nav .navbar-toggler-icon {
  color: var(--color1) !important;
}

.hero {
  position: relative;
}

.hero .blur-circle {
  position: absolute;
}

.projects .project-title {
  font-weight: 800;
  font-size: 1.5rem;
}

.projects .project-size {
  height: 60vh;
}

.projects .project-one {
  background-image: url(../media/Projects/Weather/Cover.webp);
  background-position: center 20%;
  background-repeat: no-repeat;
  background-size: 500%;
  -webkit-transition: 1s;
  transition: 1s;
}

.projects .project-one:hover,
.projects .project-one :focus {
  background-size: 600%;
  background-position: center 25%;
  -webkit-transition: 1s all;
  transition: 1s all;
}

.badge-html {
  background-color: #e44d26 !important;
  color: black !important;
}

.badge-css {
  background-color: #1572b6 !important;
  color: white !important;
}

.badge-javascript {
  background-color: #f0db4f !important;
  color: black !important;
}

.badge-sass {
  background-color: #cb6699 !important;
  color: black !important;
}

.badge-bootstrap {
  background-color: #7952b3 !important;
  color: white !important;
}

.badge-tailwind {
  background-color: #38b2ac !important;
  color: black !important;
}

.badge-react {
  background-color: #61dafb !important;
  color: black !important;
}

.contact {
  background-color: whitesmoke;
}

.contact .say-hello {
  color: var(--color1);
}

.contact .form {
  background: white;
  border-radius: 20px;
}

.contact span {
  padding-bottom: 10px;
  font-weight: 700;
  font-family: var(--font5);
  color: var(--color1);
}

.contact input,
.contact textarea {
  border: none;
  background: whitesmoke;
  padding: 10px;
  border-radius: 10px;
  color: var(--color1);
}

footer {
  background-color: var(--color1);
  color: var(--color2);
  font-family: var(--font1);
}

footer li a {
  font-size: 1.2rem;
  font-family: var(--font3);
  font-weight: 500;
  color: var(--color2);
}

footer li a:hover {
  font-size: 1.2rem;
  font-weight: 700;
}

footer li a:hover:hover {
  color: #00ff77 !important;
  -webkit-text-decoration: solid 2px underline #00ff77;
          text-decoration: solid 2px underline #00ff77;
}
/*# sourceMappingURL=styles.css.map */