@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500&display=swap");

/* Variables */
:root {
  --bg-dark: #121212;
  --bg-soft-dark: #1c1f23;
  --white: #fff;
  --bg-light: #e3e3e3;
  --shadow-dark: #45566b;
  --shadow-light: #e5a37d;
  --transition: all 0.2s;
  --shadow-spacing: 0 0 10px;

}

body {
  font-family: 'Roboto', sans-serif;
  font-weight: 400; }

*,
*::before,
*::after {
  margin: 0;
  padding: 0; }

body {
  
  background-size: cover;
  background-repeat: no-repeat; 
}

/* Transition */
body,
.info__content,
.btn, 
.container {
  transition: var(--transition);
}

.container {
  padding: 10% 0; 
  }

.info__img {
  height: 15rem;
  width: 15rem;
  border-radius: 50%; 
  border: 0.5rem solid;
}

.skills {
  border-radius: .3rem;
}

.skill__container {
  align-self: center;
}

.skill__title {
  font-size: 1.3em;
}

@media (prefers-color-scheme: dark) {
  body {
    /* background-image: url("../img/annie-spratt-vs6a4EHj_Ro-unsplash.jpg") !important; */
    background-color: var(--bg-dark);
     }
  .container {
    background-color: var(--bg-dark);
    color: var(--bg-light);
    }
  .info__img {
      border-color: var(--bg-soft-dark);
    }
  .info__content {
    color: var(--bg-light);
    text-shadow: var(--shadow-dark) var(--shadow-spacing);
    } 
  .skills:nth-child(even) {
    background-color: var(--bg-soft-dark);
  }
  }

@media (prefers-color-scheme: light) {
  body {
    /* background-image: url("../img/MIO-ITO.webp") !important; */
    background-color: var(--bg-light);
    }
  .container {
    background-color: var(--bg-light);
    color: var(--bg-dark);
    }
    .info__img {
      border-color: var(--white);
    }
  .info__content {
    color: var(--bg-dark);
    text-shadow: var(--shadow-light) var(--shadow-spacing);
    } 
  .skills:nth-child(even) {
    background-color: var(--white);
  }
  }