body,h1,p {
color:#091423
}

body {
align-items:center;
background-color:#e6e8ea;
display:flex;
flex-direction:column;
font-family:"Roboto",sans-serif;
justify-content:center;
margin:0;
min-height:100vh;
overflow-x:hidden;
padding:0
}

.container {
width:100%
}

.container,.hero-description {
overflow-x:hidden;
padding:0 1rem;
text-align:center
}

h1,p {
font-family:"Aclonica",sans-serif;
font-size:4rem;
margin-bottom:.5rem
}

p {
color:#5a6270;
font-size:1.2rem;
font-weight:400;
margin-bottom:1.5rem
}

.contact-button {
background-color:#091423;
border:0;
border-radius:5px;
color:#e6e8ea;
cursor:pointer;
font-family:"Roboto",sans-serif;
font-size:1rem;
padding:.8rem 2rem;
transition:background-color .3s ease
}

.contact-button:hover,.language-switch button:hover {
background-color:#5a6270
}

hr.dashed {
border-top:3px dashed #bbb
}

.education-container,.projects-container {
margin:2rem auto;
margin-bottom:100px;
max-width:800px;
width:100%
}

.project-title {
font-family:"Roboto",sans-serif;
font-size:1.5rem;
font-weight:500;
margin-bottom:.5rem;
text-align:center
}

.education-item p,.project-description {
font-size:1rem;
line-height:1.5;
margin-bottom:1rem;
font-family:"Roboto",sans-serif;
}

.project-item {
background-color:#e6e8ea;
border:1px solid #b0b3b8;
border-radius:8px;
box-shadow:0 2px 4px #0000001a;
cursor:pointer;
margin:1rem 0;
padding:1.5rem;
transition:box-shadow .3s ease
}

.project-description {
color:#091423;
font-family:"Roboto",sans-serif;
text-align:left
}

.project-item:hover {
box-shadow:0 4px 8px #0003
}

.skills-tags {
display:flex;
flex-wrap:wrap;
gap:.5rem;
margin-top:.5rem
}

.skill-tag {
background-color:#eef2f7;
border-radius:20px;
color:#333;
font-size:.85rem;
padding:.4rem .8rem
}

.project-details {
background-color:#e6e8ea;
border-radius:4px;
display:none;
margin-top:1rem;
padding:1rem
}

.education-details.active,.project-details.active {
display:block
}

.project-meta {
display:flex;
flex-direction:column;
margin-top:1rem;
text-align:left
}

.education-item h3,.project-skills,.project-timeframe {
margin-bottom:.5rem
}

.project-timeframe {
text-align:center
}

.education-item h3 {
font-family:"Roboto",sans-serif;
font-size:1.5rem;
font-weight:500
}

.education-item {
align-items:center;
background-color:#e0e1e4;
border-radius:8px;
box-shadow:0 2px 4px #0000001a;
display:flex;
margin:1rem 0;
padding:1.5rem;
transition:box-shadow .3s ease
}

.education-content {
align-items:center;
display:flex;
width:100%
}

.education-text {
flex:1
}

.education-header {
display:flex;
flex-direction:column
}

.education-details {
background-color:#e0e1e4;
border-radius:4px;
display:none;
margin-top:1rem;
padding:1rem
}

.education-logo {
border-radius:8px;
height:60px;
margin-left:2rem;
margin-right:1rem;
object-fit:contain;
padding:.5rem;
width:60px
}

.hero-section {
align-items:center;
background-image:url(assets/background.png);
background-position:bottom;
background-repeat:no-repeat;
background-size:cover;
display:flex;
justify-content:center;
min-height:100vh;
padding:1rem;
text-align:center;
width:100%
}

.go-down,h2 {
color:#091423
}

.go-down,.hero-content {
align-items:center;
display:flex;
flex-direction:column;
justify-content:center
}

.go-down {
background-color:transparent;
border-color:#091423;
border-radius:100vw;
border-style:solid;
border-width:3px;
font-size:2rem;
height:75px;
transition:300ms;
width:75px
}

.go-down:hover {
background-color:#091423;
color:#e6e8ea;
transform:rotate(360deg)
}

.hero-content {
gap:.5rem
}

.go-down-container {
margin-top:2rem
}

h2 {
font-family:"Aclonica",sans-serif;
font-size:1rem;
margin-bottom:.5rem
}

.hero-description {
max-width:400px;
width:100%
}

.hero-title {
margin-bottom:1.5rem
}

.hero-contact,.hero-title {
align-items:center;
display:flex;
flex-direction:column;
justify-content:center
}

.language-switch {
display:flex;
gap:.5rem;
position:absolute;
right:1rem;
top:1rem
}

.language-switch button {
border-radius:5px;
cursor:pointer;
padding:.5rem 1rem
}

.arrow-svg {
color:#091423;
height:75%;
width:75%
}

.language-switch button,.project-link {
background-color:#091423;
border:0;
color:#e6e8ea;
font-size:1rem;
transition:background-color .3s ease
}

.project-link {
border-radius:999px;
display:inline-block;
font-family:"Roboto",sans-serif;
padding:.75rem 1.5rem;
text-align:center;
text-decoration:none
}

.project-button {
display:flex;
justify-content:center;
margin-top:2rem
}

.project-link:hover {
background-color:#5a6270
}

.project-filter {
margin: 20px 0;
padding: 8px 12px;
border-radius: 4px;
border: 1px solid #ccc;
font-family: 'Roboto', sans-serif;
font-size: 16px;
background-color:#e0e1e4;
cursor: pointer;
}

@media (max-width: 768px) {
body {
font-size:16px;
padding:0
}

h1 {
font-size:2.5rem;
text-align:center
}

h2 {
font-size:.9rem
}

.hero-description {
max-width:100%;
width:90%
}

.go-down {
font-size:1.5rem;
height:50px;
width:50px
}

.education-item,.project-item {
padding:1rem
}

.education-item h3,.project-title {
font-size:1.2rem
}

.education-item p,.project-description {
font-size:.9rem
}

.project-link {
font-size:.8rem;
padding:.5rem 1rem
}

.hero-section {
padding:1rem
}

.education-item {
flex-direction:column;
padding:1rem
}

.education-logo {
height:50px;
margin-left:0;
margin-right:0;
width:50px
}

.project-item {
font-size:.9rem;
padding:1rem
}

.contact-button {
font-size:.9rem;
padding:.5rem 1.5rem
}
}