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

:root {
  --text: #080e12;
  --background: #e8f1f7;
  --primary: #1c5878;
  --secondary: #6cbcea;
  --accent: #0f8dd7;

  --border-radius: 20px;
  --border-thickness: 0.25em;
}

[data-theme="dark"] {
  --text: #edf3f7;
  --background: #081117;
  --primary: #87c3e3;
  --secondary: #156593;
  --accent: #28a7f0;
}

* {
  box-sizing: border-box;
}

body {
  width: 85%;
  margin: 2em auto;
  background-color: var(--background);
  color: var(--text);
  font-family: "DM Mono", monospace;
  font-weight: 400;
  font-style: normal;
  min-height: 100vh;
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  vertical-align: text-bottom;
}

header {
  padding: 1.5em;
  border: var(--border-thickness) solid var(--text);
  border-bottom: 0px;
  border-radius: var(--border-radius) var(--border-radius) 0px 0px;
}

header h1 {
  display: inline;
}

nav ul {
  display: flex;
  justify-content: space-around;
  padding: 0px;
  margin: 0px;
}

nav {
  border-radius: 0px 0px var(--border-radius) var(--border-radius);
}

nav li {
  display: inline;
  flex-grow: 1;
  border: var(--border-thickness) solid var(--text);
  text-align: center;
  padding: 0.5em;
  transition: flex-grow 0.25s;
}

nav li:last-child {
  border-radius: 0px 0px var(--border-radius) 0px;
  border-left: 0px;
}

nav li:first-child {
  border-radius: 0px 0px 0px var(--border-radius);
}

nav li:not(:first-child) {
  border-left: 0px;
}

nav li:hover {
  background-color: var(--text);
  color: var(--background);
  flex-grow: 1.25;
}

header .material-symbols-outlined {
  font-size: xx-large;
  font-variation-settings: "wght" 700;
}
.material-symbols-outlined {
  color: var(--accent);
}

footer ul {
  display: flex;
  justify-content: space-around;
  padding: 0px;
  margin: 0px;
}

footer {
  border-radius: 0px 0px var(--border-radius) var(--border-radius);
}

footer li {
  display: inline;
  flex-grow: 1;
  border: var(--border-thickness) solid var(--text);
  text-align: center;
  padding: 0.5em;
  transition: flex-grow 0.5s;
}

footer li:last-child {
  border-radius: 0px var(--border-radius) var(--border-radius) 0px;
  border-left: 0px;
}

footer li:first-child {
  border-radius: var(--border-radius) 0px 0px var(--border-radius);
  border-right: 0px;
}

footer li:hover {
  background-color: var(--text);
  color: var(--background);
  flex-grow: 1.25;
}

main {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 1.5em;

  margin: 1.5em 0px;
}

article {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: stretch;
  align-items: stretch;
  gap: 1em;
}

section {
  flex-grow: 1;
  width: 100%;
}

section > * {
  margin: 0px;
}

section > :first-child {
  border: 0.25rem solid var(--text);
  border-radius: var(--border-radius) var(--border-radius) 0px 0px;
  color: var(--secondary);
}

section > :not(:first-child):not(:last-child) {
  border: 0.25rem solid var(--text);

  border-top: 0px;
}

section > :last-child {
  border: 0.25rem solid var(--text);
  border-radius: 0px 0px var(--border-radius) var(--border-radius);
  border-top: 0px;
}

section > ul{
  list-style-type: none;
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  overflow-x: auto;
}



section > ul::-webkit-scrollbar { 
  border-radius: 0px;
  /*background-color: rgb(0, 45, 128);
*/
}

/* Track */
section > ul::-webkit-scrollbar-track {
  background-color: var(--text);
  border-radius: 0px 0px var(--border-radius) var(--border-radius);
}
 
/* Handle */
section > ul::-webkit-scrollbar-thumb {
  background: var(--secondary); 
  border-radius: 0px 0px var(--border-radius) var(--border-radius);
}

/* Handle on hover */
section > ul::-webkit-scrollbar-thumb:hover {
  background: #b30000; 
}

section > ul > li{
  margin: 0.5em;
}

a {
  color: var(--primary);
  text-decoration: underline;
}

nav li a, footer li a{
  text-decoration: none;
  color: var(--text);
}

nav li:hover a, footer li:hover a{
  color: var(--background);
}

section > * {
  padding: 1.5rem;
  list-style-position: inside;
}

#proyectos .txt-image img{
  width: 100%;
  aspect-ratio: 1/1;
}

.txt-image {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: 1fr;
  gap: 0px 1.5em;
  grid-template-areas: "txt img";
  align-items: center;
}

.txt-image:first-child {
  grid-area: txt;
}

.txt-image img {
  grid-area: img;
    width: 100%;
  object-fit: cover;
}

.theme-switch input {
  position: absolute;
  opacity: 0;
}

/* Create a custom checkbox */
.theme-switch {
  display: block;
  padding: 0.5em;
  border: var(--text) 0.25em solid;
  border-bottom: 0px;
  text-align: center;
}

.theme-switch:hover {
  background-color: var(--text);
  color: var(--background);
}


p{
    margin: 0;
}

.icons-flex{
    display: flex;
    justify-content: space-between;
    gap:1em;
    flex-wrap: wrap;
}

.icons-flex img{
    width: 2em;
    height:auto;

    object-fit: contain;
}