* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
  color: var(--text-color);
}
:root {
    --text-color:white;
    --background-url: url(./assets/bg-mobile.jpg);
    --stroke-color: rgba(255, 255, 255, 0.5);
    --surface-color: rgba(250, 250, 250, 0.1);
    --surface-hover: rgba(0, 0, 0, 0.02);
    --highlight-color: rgba(250, 250, 250, 0.2);
    --switch-icon-light: url("./assets/sun.svg");
    --switch-icon-dark: url("./assets/moon-stars.svg");
    --switch-bg-url: url(./assets/moon-stars.svg);

}

.light {
    --text-color: black;
    --background-url: url(./assets/bg-mobile-light.jpg);
    --stroke-color: rgba(0, 0, 0, 0.5);
    --surface-color: rgba(0, 0, 0, 0.05);
    --switch-bg-url: url(./assets/sun.svg);
}



    /* background-image: url(./assets/bg-mobile.jpg); */
    /* background-position: top center;
    background-repeat: no-repeat;
    background-size: cover; */
    /* background: url(./assets/bg-mobile.jpg) no-repeat top center/cover; */

/* Toma precendencia se não espeficarmos outro valor */


body { 
    
    background: var(--background-url);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;

}

#profile {
    text-align:center;
    padding: 24px;
    margin:auto;

}


#container {
    /* border: 1px solid red; */
    min-height: 100vh;
    height: auto;
    width: 100%;
    max-width: 588px;
    margin: auto;
    /* padding: 100px; */
    /* display: flex; */
}

/* #profile {
    border: 1px solid green;
    height: 400px;
    width: 300px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: left;
    flex-direction: column;
}    */

/* Imagens são inline por padrão, então para centralizar usamos display block e margin auto */

#fotoDePerfil {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    /* display: flex; */
    border: 4px solid var(--stroke-color);
    object-fit: cover;
    display: block;
    margin: auto;


}

#switch {
    /* display: flex; */
    /* justify-content: center; */
    /* border: 1px solid red; */
    position: relative;
    width: 64px;
    margin: 4px auto;
    
}

#switch button {
    width: 32px;
    height: 32px;
    background-color: white;
    background-image: var(--switch-bg-url) no-repeat center;
    background-size: 60%;
    border: 0;
    /* border: 1px solid var(--stroke-color); */
    border-radius: 50%;
    cursor: pointer;

    position: absolute;
    right: 0;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);

    display: flex;
    align-items: center;
    justify-content: center;
    /* background: white; */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);

    animation: slide-back 0.4s forwards;
    
}

#switch button img {
    width: 60%;
    height: 60%;
    object-fit: contain;
    pointer-events: none;
}


#switch span {
    display: block;
    width: 64px;
    height: 24px;
    background: var(--surface-color);
    border: 1px solid var(--stroke-color);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 9999px;
}



.light #switch button {
    animation: slide-in 0.4s forwards;
}

#switch button:hover {
    outline: 8px solid var(--highlight-color);
}


.ephesis-regular {
  /* font-family: "Ephesis", cursive; */
    font-weight: 400;
    font-style: normal;
}

h1 {
    /* font-family: 'Ephesis', cursive; */
    font-size: 48px;
    color: var(--text-color);
    margin-top: 16px;
    text-align: center;
}

p {
    /* font-family: 'Ephesis', cursive; */
    font-weight: 500;;
    font-size: 16px;
    color: var(--text-color);
    margin-top: 8px;

    text-align: center;
    line-height: 24px;
    letter-spacing: 0.5px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    justify-content: center;
    padding: 8px 5px;
}

/*          list style
display
flex direction column
gap
border
padding
 */

ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 8px;
}

/* background: rgba (255, 255, 255, 0.1); Mais perto de 0, mais branco.
   border-radius: 8px;
   border: 1px solid rgba (255, 255, 255, 0.5);
   backdrop-filter: blue(10px);  Coloca um efeito de desfoque no fundo
   webkit-backdrop-filter: blur(10px);  Prefixo para funcionar no safari/IE
   text-decoration: none; Sublinhar, tirar sublinhado, overline, line-through.
   transition: all 0.3s ease;  Transição suave para todas as propriedades
*/


/* necessário usar o display flex para alinhar os itens no centro */
ul li a {
    display:flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;

    border: 2px solid black;
    padding: 16px 24px;
    background: var(--surface-color);
    border-radius: 8px;
    border: 1px solid var(--stroke-color);
    /* gap: 10px; */

    text-decoration: none;
    /* text-decoration: overline;
    text decoration: underline; */

    font-weight: 400;
    transition: background 0.3s;
    font-size: 14px;
    padding: 16px 24px;

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

}

/*pseudo selector */

ul li a:hover {

    background: var (--surface-hover);
    border: 1.5px solid var(--text-color);   
}   

#social-media {

    display: flex;
    justify-content: center;
    gap: 15px;
    position: static;
    /* position: absolute; */
    top: -150px;
    flex-direction: row;
    font-size: 20px;
    padding: 10px;
    
}

#social-media a {

    display:flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    
}

#social-media a:hover {
    background: var(--highlight-color);
    border: 1.5 px solid var(--text-color);
    transition: 0.3s;
   

}

footer{
    padding: 100px 0;
    text-align: center;
    color: var(--text-color);
    font-size: 20px;
    text-decoration: underline;
    position: relative;
    top: -230px;
}

/* media query para telas maiores */
@media (min-width: 700px) {
    :root {
        --background-url: url(./assets/bg-desktop.jpg);
    }

    .light {
        --background-url: url(./assets/bg-desktop-light.jpg);
    }
}

/* animations */

@keyframes slide-in {
    from {
        left: 0;
    }
    to {
        left: 50%;
    }
}

@keyframes slide-back {
    from {
        left: 50%;
    }
    to {
        left: 0;
    }
}