:root
{
    --background-color: #ebebeb;
    --secondary-bg-color: #ffffff;
    --highlight-color: #4d75d3;
    /* --text-color: #0b328e; */
    --text-color: black;
    --accent-color: #E8175D;
    overflow-y: scroll;
}


/* * {
  outline: 1px solid red;
} */

.darkmode
{
    --background-color: #2f2f2f;
    --secondary-bg-color: #555555;
    --highlight-color: #9dbce8; 
    --text-color: #d7d7d7;
    --accent-color: #E8175D;

}

/* the logic with display moon by default and hide it when in darkmode might be dumb */

.moon{
    display: inline;
}

.sun{
    display: none;
}
html.darkmode .moon{
    display: none;
}

html.darkmode .sun{
    display: inline;
}

body
{
    font-family: 'Funnel Sans', sans-serif;
    margin: 0;
    padding: 0;

}

.navbar_container
{
    box-sizing: border-box;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    padding: 0.7em 3em 0.7em 5em;
    background-color: var(--secondary-bg-color);
    /* transition: background-color 0.3s ease, color 0.3s ease; */

}


.nav_right
{   
    display: flex;
    justify-content: space-evenly;

}


.navlist
{
    font-size: 1.4rem;
    padding: 0;
    margin: auto 2em auto auto;
    display: flex;
    flex-direction: row;
    list-style: none;
}

.navlist li{

    padding: 0.5em 0;
    margin-right: 1em;
}

.navlist li a{
    text-decoration: none;
    color: inherit;
    display: inline-block;
    transition: transform 0.3s;

}



.navlist li a:hover
{
    color: var(--highlight-color);
    transform: scale(1.04);
   transition: color 0.3s, transform 0.3s;
}

#theme_switch
{

    margin: auto 0 auto auto;
}

#my_name
{
    font-size: clamp(1.5rem, 2vw,5rem);
    margin: auto auto auto 0;
}


body
{
    background-color: var(--background-color);
    color: var(--text-color);
}

/*================================== */
/* Theme switch stuff */

#theme_switch
{
    position: relative;
    background-color: var(--background-color);
    border: solid transparent;
    width: 2.5rem;
    height: 2.5rem;
    aspect-ratio: 1/1;
    border-radius: 30%;
    color: var(--text-color);

}

#theme_switch svg{
    position: relative;
    width: 70%;
    height: 70%;
    fill: currentColor;
    z-index: 1;
    transition: transform 0.3s; /* smooth scaling */
}

#theme_switch:hover svg {
    transform: scale(1.08); /* 20% larger on hover */
}

#theme_switch::after
{
    content: "";
    position: absolute;
    inset: 0;
    
    background-color: var(--secondary-bg-color);
    opacity: 0;
    transition: opacity 0.5s;
    border-radius: 30%;
    z-index: 0;
}


#theme_switch:hover::after
{
    opacity: 1;
}

/*================================== */




video{
    width: 50%;
    height: auto;
    padding: 0 0 0 25%;
}



/*================================== */
/*========Cycling page stuff=========== */

.cycling_hero {
    position: relative;       
    height: 100vh;             
    width: 100%;
    background-image: url('/static/images/cycling_hero_bg.jpeg'); 
    background-size: cover;   
    background-position: center;
    background-repeat: no-repeat;


}

.cycling-page .navbar_container {

    background-color: transparent;
    z-index: 20;
}



.cycling_hero_content{
    /* border: 8px solid red; */
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    padding-right: 10%;
    padding-top: 10vh;
    
}

#cycling_hero_text_block{
    width: 35%;
    height: auto;
    font-size: 2.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20vh;
    
}

#cycling_hero_arrow svg{
    width: 3rem;
    height: auto;
    fill: white;

    transition: fill 1s ease;
    animation: bounce 4s infinite;
    transform-origin: center bottom;

}

#cycling_hero_arrow{
    transition: transform 1s ease;
}

#cycling_hero_arrow:hover{
    transform: scale(1.3);
}

#cycling_hero_arrow svg:hover{
    fill: var(--highlight-color);
    animation-play-state: paused;
    

}

@keyframes bounce{
    0%, 30% { transform: translateY(0);}
    50% { transform: translateY(0.5em);}

    70%, 100% { transform: translateY(0);}
}