/* Colores */
@media (prefers-color-scheme: dark) {
  :root {
    /* LIGHT MODE */
    /* Fondos y superficies */
    --white-primary: ;
    --white-secondary: ;

    /* Colores de texto */
    --grey-primary: ;
    --grey-secondary: ;

    /* Acentos cálidos */
    --orange-primary: ;
    --orange-secondary: ;

    /* Acento complementario */
    --accent-primary: ;
    --accent-secondary: ;

    /* DARK MODE */
    /* Fondos y superficies */
    --dark-black-primary: #212121;
    --dark-black-secondary: #161616;

    /* Colores de texto */
    --dark-white-primary: #EDEDED;
    --dark-white-secondary: #F0F0F0;

    /* Acentos cálidos */
    --dark-orange-primary: #ffb339;
    --dark-orange-secondary: #E67E22;

    /* Acento complementario */
    --dark-accent-primary: #3787F1;
    --dark-accent-secondary: #2986ff;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    /* LIGHT MODE */
    /* Fondos y superficies */
    --white-primary: #FAFAFA;
    --white-secondary: #F1F1F1;

    /* Colores de texto */
    --grey-primary: #181818;
    --grey-secondary: #212121;

    /* Acentos cálidos */
    --orange-primary: #C04000;
    --orange-secondary: #8d3002;

    /* Acento complementario */
    --accent-primary: #4258ff;
    --accent-secondary: #006BD6;

    /* DARK MODE */
    /* Fondos y superficies */
    --dark-black-primary: ;
    --dark-black-secondary: ;

    /* Colores de texto */
    --dark-white-primary: ;
    --dark-white-secondary: ;

    /* Acentos cálidos */
    --dark-orange-primary: ;
    --dark-orange-secondary: ;

    /* Acento complementario */
    --dark-accent-primary: ;
    --dark-accent-secondary: ;
  }
}

:root.dark {
  /* LIGHT MODE */
  /* Fondos y superficies */
  --white-primary: ;
  --white-secondary: ;

  /* Colores de texto */
  --grey-primary: ;
  --grey-secondary: ;

  /* Acentos cálidos */
  --orange-primary: ;
  --orange-secondary: ;

  /* Acento complementario */
  --accent-primary: ;
  --accent-secondary: ;

  /* DARK MODE */
  /* Fondos y superficies */
  --dark-black-primary: #212121;
  --dark-black-secondary: #161616;

  /* Colores de texto */
  --dark-white-primary: #EDEDED;
  --dark-white-secondary: #F0F0F0;

  /* Acentos cálidos */
  --dark-orange-primary: #ffb339;
  --dark-orange-secondary: #E67E22;

  /* Acento complementario */
  --dark-accent-primary: #3787F1;
  --dark-accent-secondary: #2986ff;
}

:root.light {
  /* LIGHT MODE */
  /* Fondos y superficies */
  --white-primary: #FAFAFA;
  --white-secondary: #F1F1F1;

  /* Colores de texto */
  --grey-primary: #181818;
  --grey-secondary: #212121;

  /* Acentos cálidos */
  --orange-primary: #C04000;
  --orange-secondary: #8d3002;

  /* Acento complementario */
  --accent-primary: #4258ff;
  --accent-secondary: #006BD6;

  /* DARK MODE */
  /* Fondos y superficies */
  --dark-black-primary: ;
  --dark-black-secondary: ;

  /* Colores de texto */
  --dark-white-primary: ;
  --dark-white-secondary: ;

  /* Acentos cálidos */
  --dark-orange-primary: ;
  --dark-orange-secondary: ;

  /* Acento complementario */
  --dark-accent-primary: ;
  --dark-accent-secondary: ;
}

body {
  color: var(--grey-secondary) var(--dark-white-secondary);
  background-color: var(--white-primary) var(--dark-black-primary);
}

h1,
h2 {
  color: var(--grey-primary) var(--dark-white-primary);
}

h2 {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  font-size: 2em;
  text-decoration-color: var(--accent-secondary) var(--dark-accent-secondary);
}

a:link {
  color: var(--accent-secondary) var(--dark-accent-secondary);
}

a:active {
  color: var(--accent-secondary) var(--dark-accent-secondary);
}

a:hover {
  color: var(--accent-primary) var(--dark-accent-primary);
}

a:visited {
  color: var(--accent-primary) var(--dark-accent-primary);
}

div.card {
  background-color: var(--white-secondary) var(--dark-black-secondary);
}

li.article-card {
  background-color: var(--white-secondary) var(--dark-black-secondary);
}

p.language {
  color: var(--orange-secondary) var(--dark-orange-secondary);
}

ul.navigation {
  background-color: var(--white-secondary) var(--dark-black-secondary);
}

a.navigation:hover {
  color: var(--white-primary) var(--dark-black-primary);
  background-color: var(--orange-primary) var(--dark-orange-primary);
}

a.navigation:active {
  color: var(--white-primary) var(--dark-black-primary);
  background-color: var(--orange-secondary) var(--dark-orange-secondary);
}

span.blue {
  color: var(--accent-secondary) var(--dark-accent-secondary);
}

span.orange {
  color: var(--orange-primary) var(--dark-orange-primary);
}

/* Fuente */
body {
  font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}

h1 {
  font-size: 4em;
}

/* Estilo */
body {
  margin-top: 1vw;
  margin-bottom: 1vw;
  margin-left: 4vw;
  margin-right: 4vw;
}

body>header {
  margin: 0;
  padding-top: 2%;
}

body>footer {
  margin-top: 4vw;
  margin-bottom: 2vw;
  padding-bottom: 2%;
}

h1 {
  margin-top: 2vw;
  text-align: center;
}

h3 {
  margin-bottom: 5px;
}

p {
  margin-top: 5px;
  margin-bottom: 0;
}

img {
  width: 25vw;
  max-width: 250px;
  display: block;
  margin: auto;
  margin-top: 4vw;
}

a {
  text-decoration: none;
  vertical-align: middle;
}

/* Clases */
main.container {
  margin-left: auto;
  margin-right: auto;
}

div.container {
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2vw 2vw;
}

section.side-menu {
  margin-left: auto;
  margin-right: auto;
}

h1.subtle-center {
  font-size: 2.4em;
}

h1.subtle {
  font-size: 2.4em;
  text-align: left;
}

p.center {
  text-align: center;
}

ul.space {
  width: 65%;
  margin-left: auto;
  margin-right: auto;
}

li.dotless {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

div.card {
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 10px;
  padding: 25px;
}

ul.navigation {
  border-radius: 10px;
  list-style-type: none;
  margin-left: auto;
  margin-right: auto;
  margin-top: 32px;
  margin-bottom: 32px;
  padding: 0;
  max-width: 900px;
}

a.navigation {
  border-radius: 10px;
  display: block;
  padding: 1vw 1vw;
  text-decoration: none;
}

/* Clases artículo */
ul.article-container {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li.article-card {
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 10px;
  overflow: hidden;
  padding: 25px;
}

a.article {
  text-decoration: none;
}

p.article {
  margin-bottom: 1vw;
}

/* Media queries */
/* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
@media (max-width: 480px) {
  #item1 {
    grid-area: 1 / span 2;
  }

  #item2 {
    grid-area: 2 / span 2;
  }

  h1 {
    font-size: 4em;
  }

  h2 {
    font-size: 2em;
  }

  ul.navigation {
    margin-top: 8vw;
    margin-bottom: 10vw;
  }

  main.container {
    margin-bottom: 8vw;
  }

  a.navigation {
    padding: 4vw 4vw;
  }

  div.contact {
    margin-bottom: 8vw;
  }

  p.contact {
    margin-top: 5vw;
    margin-bottom: 5vw;
  }

  div.skills {
    margin-bottom: 8vw;
  }

  div.card {
    padding: 5vw 5vw;
    margin-bottom: 4vw;
  }

  p.article {
    margin-bottom: 5vw;
  }
}

/* smartphones, Android phones, landscape iPhone */
@media (min-width: 480px) {
  #item1 {
    grid-area: 1 / span 2;
  }

  #item2 {
    grid-area: 2 / span 2;
  }

  h1 {
    font-size: 4em;
  }

  h2 {
    font-size: 2em;
  }

  a.navigation {
    padding: 3vw 3vw;
  }

  ul.navigation {
    margin-top: 5vw;
    margin-bottom: 7vw;
  }

  div.contact {
    margin-bottom: 6vw;
  }

  p.contact {
    margin-top: 4vw;
    margin-bottom: 4vw;
  }

  main.container {
    margin-bottom: 3vw;
  }

  div.skills {
    margin-bottom: 5vw;
  }

  div.card {
    padding: 3vw 3vw;
    margin-bottom: 2vw;
  }

  p.article {
    margin-bottom: 3vw;
  }
}

/* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
@media (min-width: 600px) {
  #item1 {
    grid-area: 1 / span 2;
  }

  #item2 {
    grid-area: 2 / span 2;
  }

  h1 {
    font-size: 4em;
  }

  h2 {
    font-size: 2em;
  }

  a.navigation {
    padding: 2vw 2vw;
  }

  ul.navigation {
    margin-top: 3vw;
    margin-bottom: 5vw;
  }

  div.contact {
    margin-bottom: 5vw;
  }

  p.contact {
    margin-top: 3vw;
    margin-bottom: 3vw;
  }

  main.container {
    margin-bottom: 1vw;
  }

  div.skills {
    margin-bottom: 3vw;
  }

  div.card {
    padding: 2vw 2vw;
    margin-bottom: 2vw;
  }

  p.article {
    margin-bottom: 2vw;
  }
}

/* tablet, landscape iPad, lo-res laptops ands desktops */
@media (min-width: 801px) {
  #item1 {
    grid-area: 1 / span 2;
  }

  #item2 {
    grid-area: 2 / span 2;
  }

  h1 {
    font-size: 3.5em;
  }

  h2 {
    font-size: 2em;
  }

  a.navigation {
    padding: 1.5vw 1.5vw;
  }

  ul.navigation {
    margin-top: 2vw;
    margin-bottom: 3vw;
  }

  div.contact {
    margin-bottom: 4vw;
  }

  p.contact {
    margin-top: 2vw;
    margin-bottom: 2vw;
  }

  main.container {
    margin-bottom: 1vw;
  }

  div.skills {
    margin-bottom: 4vw;
  }

  div.card {
    padding: 1.5vw 1.5vw;
    margin-bottom: 2vw;
  }

  p.article {
    margin-bottom: 1.5vw;
  }
}

/* big landscape tablets, laptops, and desktops */
@media (min-width: 1025px) {
  #item1 {
    grid-area: 1 / span 1;
  }

  #item2 {
    grid-area: 1 / span 1;
  }

  div.container {
    max-width: 80%;
    column-gap: 4vw;
  }

  h1 {
    font-size: 3em;
  }

  h2 {
    font-size: 1.5em;
  }

  a.navigation {
    padding: 1vw 1vw;
  }

  ul.navigation {
    margin-top: 2vw;
    margin-bottom: 3vw;
  }

  div.contact {
    margin-bottom: 0;
  }

  p.contact {
    margin-top: 1vw;
    margin-bottom: 1vw;
  }

  main.container {
    margin-bottom: 0.25vw;
  }

  div.skills {
    margin-bottom: 3vw;
  }

  div.card {
    padding: 1.5vw 1.5vw;
    margin-bottom: 2vw;
  }

  p.article {
    margin-bottom: 1vw;
  }
}

/* hi-res laptops and desktops */
@media (min-width: 1281px) {
  #item1 {
    grid-area: 1 / span 1;
  }

  #item2 {
    grid-area: 1 / span 1;
  }

  div.container {
    max-width: 70%;
    column-gap: 2vw;
  }

  h1 {
    font-size: 3.5em;
  }

  h2 {
    font-size: 2em;
  }

  a.navigation {
    padding: 1vw 1vw;
  }

  ul.navigation {
    margin-top: 1.5vw;
    margin-bottom: 2.5vw;
  }

  main.container {
    margin-bottom: 1vw;
  }

  div.skills {
    margin-bottom: 2vw;
  }

  div.card {
    padding: 1vw 1vw;
    margin-bottom: 0;
  }
}