@import url('https://fonts.googleapis.com/css2?family=Comfortaa&family=Kaushan+Script&family=Oswald&display=swap');

:root {
  --bg-light-alt: rgba(0, 0, 0, 0.4);
  --font-primary: aliceblue;
  --font-alt: #000;
  --bg-primary: transparent;
  --btn-primary: rgb(255, 92, 92);
  --btn-secondary: #03dac5;
}

[data-theme='dark'] {
  --bg-light-alt: rgba(0, 0, 0, 1);
  --font-primary: rgb(218, 58, 250);
  --font-alt: rgb(218, 58, 250);
  --bg-primary: rgba(0 0 0 /90%);
  --btn-primary: rgb(150, 64, 255);
  --btn-secondary: #1b9999;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.4'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  color: var(--on-background);
  font-family: 'Comfortaa';
  background-color: var(--background);
}

nav {
  height: 100px;
  background-color: var(--bg-light-alt);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
}

nav ul {
  width: 60%;
  display: flex;
  justify-content: space-between;
}

nav ul li {
  list-style: none;
}

nav ul li a {
  text-decoration: none;
  color: var(--font-primary);
  font-size: 1.4rem;
}

section {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-primary);
}

h1 {
  font-size: 100px;
  font-family: Kaushan Script;
  text-align: center;
  color: var(--font-alt);
}

h2 {
  font-size: 40px;
  text-align: center;
  color: var(--font-alt);
}

/* top button */
.top {
  height: 40px;
  width: 70px;
  border-radius: 5px;
  outline: none;
  border: none;
  font-size: 1.4rem;
  position: fixed;
  bottom: 50px;
  right: 20px;
  background-color: var(--bg-light-alt);
}

.top a {
  text-decoration: none;
  color: var(--font-primary);
}

/* mode */
.mode {
  display: flex;
  align-items: center;
  color: var(--font-primary);
  font-size: 1.2rem;
}

.mode span {
  margin-right: 5px;
}

.mode .fas {
  margin: 0 20px;
  transform: scale(1.6);
}

/* toggle */
label {
  height: 30px;
  width: 60px;
  border-radius: 30px;
}

input {
  display: none;
}

input:checked + span {
  background-color: gray;
}

input:checked + span::before {
  left: 30px;
}

.toggle-circle {
  height: 100%;
  width: 100%;
  display: block;
  border-radius: 30px;
  transition: 0.4s ease;
  border: 1px solid black;
  position: relative;
}

.toggle-circle::before {
  content: '';
  position: absolute;
  left: 0;
  height: 28px;
  width: 28px;
  display: block;
  border-radius: 50%;
  background-color: aliceblue;
  transition: 0.4s ease;
}

/* illustration */
.image-box {
  height: 300px;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}

.image-box img {
  width: 250px;
  border: 1px solid red;
  border-radius: 5px;
  box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.3);
}

/* button */
.button-box {
  margin: 20px;
}

.btn {
  height: 40px;
  width: 100px;
  border-radius: 5px;
  border: none;
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.1rem;  
}

.btn:hover {  
  border-radius: 5px;
  filter: brightness(80%);
}

.button-box + p {
  margin: 20px;
  padding: 10px;
  width: 60%;
  text-align: center;
  border-radius: 5px;
  box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.3);
  color: var(--font-alt);
}

.btn.primary {
  color: var(--font-alt);
  background-color: var(--btn-primary);
}

.btn.secondary {
  color: var(--font-alt);
  background-color: var(--btn-secondary);
}

.btn.primary.outline {
  color: var(--font-alt);
  background-color: transparent;
  border: 1px solid var(--btn-primary);
}

.btn.secondary.outline {
  color: var(--font-alt);
  background-color: transparent;
  border: 1px solid var(--btn-secondary);
}

.btn.disabled {
  color: var(--font-alt);
}

/* icons */
.icons {
  width: 70%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.fab {
  font-size: 5.5rem;
  color: var(--font-alt);
}