* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Courier New', Courier, monospace, sans-serif;
    background-color: #ffffff;
    color: #333;
    margin: 0;
}
img {
    max-width: 100%;
}
header {
    margin: 0;
    padding: 0;
    background-color: hsl(59, 97%, 76%);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 1rem; 
    justify-content: space-around;
}
header nav ul {
    padding: 2rem;
}
header nav ul li a {
    color: hsl(59, 97%, 76%);
    background-color: rgb(34, 34, 34);
    text-decoration: none;
    border-radius: 4rem;
    padding: 0.75rem 1.5rem;
    display: block;
    text-align: center;
    width: 8em;
}
.botonesnav {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    margin: 0 2em;
}
body header figure img {
    display: block;   
    align-items: end;
    justify-content: flex-end;
    width: min(100%, 12rem);
    max-width: 100%;
    padding: 1rem;
    margin-right: 3rem; 
}
header nav ul li a:hover {
    color: hsl(0, 0%, 0%);
    background-color: rgb(235, 254, 255);
    border: solid 3px hsl(180, 2%, 12%);
    transition: 0.2s;
}

h1 {
    color: rgb(39, 38, 37);
    font-size: 1.5rem; 
}

h2 { 
    color: hsl(248, 100%, 9%);
    font-size: 2.5rem; 
}

p {
    margin: 1rem 0 2rem;
    line-height: 1.5;
}

main {
    width: 100%;
    max-width: 60rem;
    margin: 2rem auto;
    padding: 1rem;
}
h2 {
    margin-top: 1rem;
}

.highlight {
    font-weight: bold;
}
.contact-list {
    display: flex;
    flex-wrap: wrap; 
    gap: 2rem; 
    margin-top: 1rem;
}

.contact-list a {
    display: flex;
    align-items: center;
    text-decoration: none; 
    color: hsl(0, 1%, 13%); 
}

.contact-icon {
    width: 2rem; 
    height: 2rem; 
    margin-right: 0.5rem; 
}
.materias-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 2rem;
    padding: 2rem;
}

.profile-container {
    display: flex;
    flex-wrap: wrap; 
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    background-color: rgb(232, 241, 241);    
    border-radius: .24rem;
    padding: 2rem;
}
.portfolio-section {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin: 2rem 0;
}
.profile-image img {
    display: block;
    width: 100%;
    max-width: 16rem;
    border-radius: 1rem;
    padding: 0.5rem;
}

.profile-info {
    flex: 1;
    padding: 1rem;
}

.profile-info h1 {
    margin-top: 0;
    margin-bottom: 0.25rem;    
    text-align: justify;
}
.profile-info p {
    margin: 0.5rem 0;
}
.portfolio-item {
    display: flex; 
    background-color: hsl(59, 97%, 76%); 
    border-radius: .10rem;
    padding: 2rem;
    flex: 1 200px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.portfolio-section h2 {
    font-size: 2rem;
    margin: 1rem 0; 
    color: hsl(0, 1%, 13%); 
    width: 100%; 
}

.portfolio-item figure {
    margin: 0;
    padding: .30rem;
}

.portfolio-item img {
    width: 100%;
    border-radius: .24rem;
    max-width: 5rem; 
    margin: 0 auto; 
}

.portfolio-info {
    padding: 1rem 0;
}

.portfolio-info p {
    margin-bottom: 1rem;
}

.portfolio-info a {
    text-decoration: none;
    color: hsl(0, 1%, 13%);
    font-weight: bold; 
}
footer {
    background-color: rgb(187, 187, 187);
    margin-top: 1rem;
    display: flex;
    justify-content: center; 
    padding: 1rem;
}

footer p {
    text-align: center;
}
aside {
    background-color: hsl(231, 15%, 91%);
    padding: 2rem;
    color: rgb(31, 30, 28);
    border-left: 4px solid hsl(182, 70%, 50%);
}

.info-item {
    margin-bottom: 2rem;
}

figure {
    margin: 0;
}

aside img {
    width: 100%;
    max-width: 5rem;
    height: auto;
    margin-bottom: 1em;
}

.bocetos-section figure img {
    display: block;
    width: 100%;
    max-width: 16rem;
}
ul {
    list-style-type: none;
    padding-left: 0;
}

.info-list li {
    margin: 0.5rem 0; 
}
.btn {
    background-color: hsl(182, 70%, 50%); 
    color: white; 
    padding: 0.75rem 1.5rem;
    border: none; 
    border-radius: 0.5rem; 
    text-align: center;
    text-decoration: none; 
    display: inline-block; 
    font-size: 1rem; 
    transition: background-color 0.3s ease; 
}