@import url('https://fonts.googleapis.com/css?family=Bebas%20Neue:700|Manrope:400');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

/* Universal styles */
:root {
  --text: hsl(234, 46%, 92%);
  --paragraph: hsl(0, 0%, 81%);
  --background: hsl(233, 57%, 3%);
  --primary: hsl(235, 83%, 72%);
  --secondary: hsl(235, 83%, 85%);
  --accent: hsl(235, 74%, 58%);
  --transition: 0.3s  ease-in-out;
  --shadow: #00000030 0px 0px 10px 0px;

}

body {
  font-family: 'Manrope';
  color: var(--paragraph);
  font-weight: 400;
  background-color: var(--background);
  margin: 1rem auto;
  max-width: 1200px;
}

.c1{
  margin: 0 1rem;

}

h1, h2, h3, h4, h5 {
  font-family: 'Bebas Neue';
  font-weight: 700;
  color: var(--text);
}

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

html { font-size: 100%; } /* 16px */

h1 { font-size: 4.210rem; /* 67.36px */ }
h2 { font-size: 3.158rem; /* 50.56px */ }
h3 { font-size: 2.369rem; /* 37.92px */ }
h4 { font-size: 1.777rem; /* 28.48px */ }
h5 { font-size: 1.333rem; /* 21.28px */ }
small { font-size: 0.750rem; /* 12px */ }

/* navigation */

nav {
  background-color: var(--background);
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

ul :hover {
  color: var(--primary);
  transition: background-color 0.3s, color 0.3s, outline 0.3s;

}

nav h1 {
  font-size: 2.2rem;
}

nav ul {
  display: flex;
  list-style: none;
}

nav ul li {
  margin: 0 1rem;
}

nav ul li a {
  text-decoration: none;
  color: var(--text);
}

a{
  text-decoration: none;
}

.hamburger{
  display: none;
  cursor: pointer;
}

.bar{
  display: block;
  width: 2rem;
  height: 0.25rem;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: var(--primary);
  border-radius: 1rem;
}

/* hero section */

.hero-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10vh;
  gap: 4rem;
}

.hero-image {
  height: 50vh;
  max-width: 100%;
  object-fit: cover;
  border-radius: 1rem;
}

.hero-section-clickable {
  display: flex;
  align-items: stretch; /* Ensure all items have the same height */
  margin-top: 5vh;
  cursor: pointer;
  height: 3rem;
  gap: 1rem;
}

.hero-section-text{
  max-width: 600px;
}

.buttondot{
  height: 3rem;
  width: 3rem;
  transition: background-color 0.3s, color 0.3s, outline 0.3s;
  fill:var(--background);
  margin: 0;
}

.hero-button:hover .buttondot{
  fill: white;
}


.hero-button {
  background-color: var(--primary);
  color: var(--background);
  padding: 1rem 1rem;
  border: none;
  border-radius: 1rem;
  font-size: 1.4rem;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s, outline 0.3s;
  display: flex;
  justify-content: center; /* Center the text horizontally */
  align-items: center; /* Center the text vertically */
  white-space: nowrap;
}

.hero-button:hover {
  background-color: var(--background);
  color: var(--text);
  outline: 1px solid white;
}


.icons-hero {
  height: 100%; /* Make the LinkedIn icon take the full height of the container */
  fill:var(--primary)
}

.icons-hero:hover {
  fill:var(--text);
  transition: fill 0.3s;
}

/*deviders*/

hr{
  border: 0;
  height: 1px;
  background: rgb(117, 117, 117);
  margin: 3rem 0;
}

/* Container */

.container{
  display: flex;
  flex-wrap:wrap;
  gap: 2rem;
  justify-content: space-between;
}

.capabilities{
  max-width: 600px;

}

.capabilities-item{
  display:flex;
  flex-wrap:wrap;
  gap: 1rem;
  margin: 1rem 0;
}

.capa{
  color: var(--text);
  outline: 1px solid var(--text);
  padding: 0.5rem 1rem;
  border-radius: 1rem;
  transition: var(--transition);
}

.capa:hover{
  scale: 1.1;
  box-shadow:var(--shadow);
  color: var(--primary);
  outline: 1px solid var(--primary);
}

.bt1{
  font-family: 'manrope';
  font-weight:300;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

/* Form */


input[type="text"], input[type="email"], textarea{
  width: 100%; 
  padding: 1rem;
  margin: 1.2rem 0;
  border: none;
  border-radius: 1rem;
  background-color:#1A1A1A;
  color:var(--text)
}

input[type="submit"]{
  background-color: var(--primary);
  color: var(--background);
  padding: 0.9rem 2rem;
  font-size: 1.2rem;
  border: none;
  border-radius: 1rem;
  cursor: pointer;
  transition: var(--transition);
  margin-bottom: 5vh;
}

textarea {
  resize: none; /* Prevent the textarea from being resizable */
  height: 10rem;
}

input[type="submit"]:hover{
  background-color: var(--background);
  color: var(--text);
  outline: 1px solid white;
}

.icons{
  display:inline-flex;
  gap: 1rem;
  margin-top: 5vh;
}

.ci:hover {
  fill:var(--text);
  transition: fill 0.3s;
  cursor: pointer;
  scale: 1.1;
}


.lets-connect p{
  margin-top: 2vh;
}

.form{
  width: 600px;
}

/* Todo list container */
.todo-container{
  display: flex;
  flex-wrap: nowrap;
  gap: 2rem;
  justify-content: center;
  flex-direction: column;
  align-content: stretch;
  align-items: center;
  max-width: 500px;
  margin: 4vh auto;
}

.child-todo-container{
  display: flex;
  flex-direction: row;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 auto;
}

.child-todo-container2{
  display: flex;
  flex-direction: column;
  gap: 3rem;
  justify-content: center;
  align-items: center;
  width: 100%;
}


#taskInput{
  flex: 1;
}


.tb{
  background-color: var(--primary);
  color: var(--background);
  width: 3rem;
  height: 3rem;
  border: none;
  border-radius: 1rem;
  font-size: 1.4rem;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s, outline 0.3s;
  display: flex;
  justify-content: center; /* Center the text horizontally */
  align-items: center; /* Center the text vertically */
  white-space: nowrap;
}

.task{
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  width: 100%; 
  padding: 1rem;
  border: none;
  border-radius: 1rem;
  background-color:#15101C;
  color:var(--text);
  align-items: center;
}

.tasklist{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.taskcounter{
  display: flex;
  justify-content: flex-start; /* Align items to the start of the main axis (horizontally) */
  text-align: left; /* Ensure text is aligned to the left */
  align-items: flex-start; /* Align items to the start of the cross axis (vertically) */
  width: 100%; /* Ensure the container takes full width */
}

.task-icon{
  cursor: pointer;
  height: 100%;
  color: var(--icon-color, #fff); /* Set a default color */
  background-color: var(--icon-bg-color, transparent); /* Set a default background color */
}

.task1-buttons{
  display: flex;
  wrap: nowrap;
  gap: 0.6rem;
  height: 1.8rem;
}

.taskdone{
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  width: 100%; 
  padding: 1rem;
  border: none;
  border-radius: 1rem;
  background-color:#15101C;
  color:#78CFB0;
  align-items: center;
  text-decoration: line-through;
}

.tasklistdone{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.taskcounterdone{
  display: flex;
  justify-content: flex-start; /* Align items to the start of the main axis (horizontally) */
  text-align: left; /* Ensure text is aligned to the left */
  align-items: flex-start; /* Align items to the start of the cross axis (vertically) */
  width: 100%; /* Ensure the container takes full width */
}


#todolistcapa{
  display: flex;
  flex-wrap: nowrap;
  gap: 2rem;
  justify-content: center;
  flex-direction: column;
  align-content: stretch;
  max-width: 500px;
  margin: 4vh auto;
  background-color: #1A1A1A;
  padding: 3rem;
  border-radius: 1rem;
  transition: var(--transition);
}

#todolistcapa:hover{
  scale: 1.05;
  transition: var(--transition);

}