:root {
  --green: #15400a;
  --white: #FFFFFF;
  --black: #000000;
  --grey: #cacaca;
  --blue: #051f8a;
 
}
.dark{
  --green: #00ff00;
  --grey: #363636;
  --black: #FFFFFF;
  --white: #000000;
  --blue: aqua;
}
#color_changer{
    position: relative;
    float: right;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--black);
    border: 3px solid var(--white);
    outline: 3px solid var(--black);
}
body {
    background-color: var(--white);
    height: 100vh;
}
.container{
    max-width: 800px;
    margin: 40px auto;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 32px;
    border-radius: 8px;
    background: var(--grey);
    color: var(--black);
    position:absolute;
    top:0px;
    left: 10px; 
    right: 10px; 
    margin-inline: auto; 
    width: fit-content;
    
}   
a, a:visited, #Spanish, #English {
    color: var(--blue);
    text-decoration: none;
}
#Spanish:focus, #English:focus,
#Spanish:focus-visible, #English:focus-visible,
a:focus, a:focus-visible{
 outline: 1px solid var(--green);
}
a:hover {
    text-decoration: underline;
}
h1, h2, h3 {
    margin-top: 0;
    color: var(--green);
    border-bottom: 2px solid var(--green);
}
h1 {
    font-size: 2.5rem;
    padding-bottom: 8px;
    margin-bottom: 24px;
}
p {
    font-family: Arial, Helvetica, sans-serif;
}
.contact {
    margin-bottom: 24px;
    font-size: 1.1rem;
}
.section {
    margin-bottom: 32px;
}
.section-title {
    font-size: 1.3rem;
    color: var(--green);
    margin-bottom: 12px;
    border-bottom: 1px solid var(--green);
    padding-bottom: 4px;
    font-family: garamond, serif;
}
ul {
    padding-left: 20px;
}
.job, .edu {
    margin-bottom: 16px;
}
.job-title, .edu-title, .projects-title {
    font-weight: bold;
    color: var(--green);
    font-family: garamond, serif;
}
.job-date, .edu-date {
    color: var(--black);
    font-size: 0.95em;
    float: right;
}
.skills-list{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
    color: var(--black);
}
.skills-list li {
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 1em;
    background-color: var(--white);
}

.skills-list li:hover{
    background: var(--green);
    color: var(--white);
    transition: background 0.5s, color 0.5s;
}
.skills-list li:hover a {
    color: inherit;
    text-decoration: none;
}
.skills-list li:focus,.skills-list li:focus-visible{
    outline: 1px solid var(--green);
}

@media (max-width: 600px) {
    .container {
    padding: 12px;
    }
    h1 {
    font-size: 1.5rem;
    }
}
/*
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}
*/
 #Spanish:hover, #English:hover {
  color: var(--white);
  text-decoration: none;
  transform: translate(50px, 100px);  
}