body {
    background-image: var(--background-image);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    text-align: center;
}

body {
    padding-bottom: 38vh;
}

#home {
    min-height: 100vh;
}

#about {
    min-height: 100vh;
}

#socials {
    min-height: 10vh;
}

#tools {
    min-height: 80vh;
}

input {
    border-radius: 16px;
    border: 4px solid transparent;
    background:
            linear-gradient(#ffffff, #ffffff) padding-box,
            conic-gradient(
                    from var(--angle),
                    var(--gradientAnimation1),
                    var(--gradientAnimation2),
                    var(--gradientAnimation3),
                    var(--gradientAnimation4)
            ) border-box;

    animation: toolsBorderSpin 4s linear infinite;
    z-index: 1000;
}

html {
    scroll-behavior: smooth;
}

hr {
    color: var(--line);
    border: none;
    border-top: 2px solid;
    width: min(1200px, 50%);
    margin: 20px auto;
}

h1 {
    background: linear-gradient(var(--gradientName1), var(--gradientName2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    justify-content: center;
}

h2 {
    color: var(--darkLight);
    font-family: Verdana, serif;
    font-weight: normal;
    font-size: clamp(1rem, 2vw, 1.5rem);
    justify-content: center;

}

label {
    color: var(--darkLight);
}

nav {
    position: fixed;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    padding: clamp(0.4rem, 1rem, 1.5rem);

    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(0.4rem, 2rem, 2rem);

    border-radius: 16px;
    border: 3px solid transparent;
    background:
            linear-gradient(#0e297a, #00ecff) padding-box,
            conic-gradient(
                    from var(--angle),
                    var(--gradientAnimation5),
                    var(--gradientAnimation6),
                    var(--gradientAnimation7),
                    var(--gradientAnimation8)
            ) border-box;

    animation: toolsBorderSpin 4s linear infinite;
    z-index: 1000;
}

nav a,
nav button {
    color: var(--darkLight);
    font-family: Verdana, serif;
    font-weight: bolder;
    text-decoration: none;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: clamp(0.9rem, 2vw, 1.5rem);
    transition: transform 0.3s ease, color 0.3s ease;
}

nav a:hover,
nav button:hover {
    transform: scale(1.2);
}

#home {
    display: flex;
    justify-content: center;
    align-items: center;
}

#home h1 {
    font-size: 4rem;
    margin: 0;
}

#about {
    display: flex;
    justify-content: center;
    align-items: center;
}

#socials {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

#tools {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

#tools img {
    flex: 0 0 clamp(3rem, 8vw, 6rem);
    height: auto;
    border-radius: 12px;
}

@property --angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

#socials img,
#tools img {
    box-sizing: border-box;
    border-radius: 8px;
    border: 5px solid transparent;
    background:
            linear-gradient(#0000, #0000) padding-box,
            conic-gradient(
                    from var(--angle),
                    var(--gradientAnimation1),
                    var(--gradientAnimation2),
                    var(--gradientAnimation3),
                    var(--gradientAnimation4)
            ) border-box;

    animation: toolsBorderSpin 4s linear infinite;
}

@keyframes toolsBorderSpin {
    to { --angle: 360deg; }
}

#socials img:hover {
    cursor: pointer;
    transform: scale(1.15);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

#userHealth {
    color: var(--darkLight);
    font-family: Verdana, serif;
    font-weight: normal;
    font-size: clamp(1rem, 2vw, 1.5rem);
    justify-content: center;
}

label {
    color: var(--darkLight);
    font-family: Verdana, serif;
    font-weight: normal;
    font-size: clamp(1rem, 2vw, 1.5rem);;
    display: flex;
    justify-content: center;
    align-items: center;
}

#result {
    display: flex;
    justify-content: center;
    align-items: center;
}

:root {
    --darkLight: #000000;
    --buttonDarkLight: #000000;
    --gradientName1: #0e297a;
    --gradientName2: #00ecff;
    --gradientAnimation1: #000000;
    --gradientAnimation2: #000000;
    --gradientAnimation3: #ffffff;
    --gradientAnimation4: #000000;
    --gradientAnimation5: #ffffff;
    --gradientAnimation6: #ffffff;
    --gradientAnimation7: #ffffff;
    --gradientAnimation8: #020202;
    --line: #000000;
    --background-image: url("https://images.unsplash.com/photo-1435820876491-c2cb37e8e7ff?fm=jpg&q=60&w=3000&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8d2hpdGUlMjBzbm93fGVufDB8fDB8fHww"); /* change img */
}

.lightmode{
    --darkLight: #ffffff;
    --buttonDarkLight: #ffffff;
    --gradientName1: rgb(0, 236, 255);
    --gradientName2: rgb(14, 41, 122);
    --gradientAnimation1: #ffffff;
    --gradientAnimation2: #ffffff;
    --gradientAnimation3: #000000;
    --gradientAnimation4: #ffffff;
    --gradientAnimation5: #020202;
    --gradientAnimation6: #020202;
    --gradientAnimation7: #020202;
    --gradientAnimation8: #ffffff;
    --line: #ffffff;
    --background-image: url("./../imgs/moon.jpg");
}