body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 100vh;
    margin: 0;
    padding-top: 20px;
    color: var(--text-color);
    background-color: var(--background-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

h1 {
    color: var(--text-color);
    transition: color 0.3s ease;
}

p {
    font-size: 16px;
    color: var(--text-color);
    transition: color 0.3s ease;
}

.content {
    margin: 5% auto;  
    width: 90%;
    max-width: 600px;
    text-align: left;
}

.floating-box {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: #000;
    animation: float 5s infinite;
}

.box {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: #333;
    opacity: 0.5; 
    animation: float 5s infinite linear;
}

@keyframes float {
    0% {
      transform: translate(0, 0) rotate(0deg);
    }
    50% {
      transform: translate(100px, 100px) rotate(180deg);
    }
    100% {
      transform: translate(0, 0) rotate(360deg);
    }
}




.toggle-container i {
    font-size: 30px;
    color: var(--text-color);
    transition: color 0.3s ease;
}

/* .toggle-container label .fa-sun {
    transform: translateX(0);
} */

/* .toggle-container input:checked + label .fa-sun {
    transform: translateX(26px);
} */

/* .toggle-container input:checked + label .fa-moon {
    transform: translateX(0);
} */

/* .toggle-container label::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 60px;
height: 34px;
background-color: #1da1f2;
border-radius: 34px;
transition: background-color 0.2s;
} */

/* .toggle-container label::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 34px;
height: 34px;
background-color: white;
border-radius: 50%;
transition: transform 0.2s;
} */

/* .toggle-container input:checked + label::before {
background-color: #111;
} */

/* .toggle-container input:checked + label::after {
transform: translateX(26px);
} */


:root {
    --text-color: #333;
    --background-color: #ffffff;
}

body[data-theme="dark"] {
    --text-color: #f3f3f3;
    --background-color: #212121;
}

@media (max-width: 800px) {
    .content {
        width: 90vw;
    }
    p {
        font-size: 18px;
    }
    /* .toggle-container {
        top: 50px;
        right: 120px;
    } */
} 

/* 
.toggle-container {
    position: absolute;
    top: 80px;
    right: 35%;
    cursor: pointer;
} */

/* .container {
    position: relative; /* Set the parent container to relative positioning */
/* } */