@import "../css/variables-ewuProjects.css";



.archivo-black-regular {
  font-family: "Archivo Black", sans-serif;
  font-weight: 400;
  font-style: normal;
}


.dosis{
  font-family: "Dosis", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}



[data-theme="dark"]{
    --surface-color: #202020;
    --text-colorBody: #f2f2f2;
}

[data-theme="light"]{
    --surface-color: #efefef;
    --text-colorBody: #1a1a1a;
}




body{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background-color: var(--surface-color);
}


header{
    background-color: var(--primary-color);
    margin: 0;
    padding: var(--SpacingM);
    color: var(--text-colorLight);
    position: sticky;
    top:0;
    z-index: 100;
}

.nav-bar{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

ul{
    list-style: none;
    display: flex;
    gap: var(--SpacingL);
    margin: var(--SpacingL);
    padding: 0;
}

ul a{
    color: var(--text-colorLight);
    text-decoration: none;
    font-family: var(--font-family-body);
    font-size: var(--Sizes__L);
}


header button{
    background-color: transparent;
    border: 2px solid var(--text-colorLight);
    color: var(--text-colorLight);
    padding: var(--SpacingS) var(--SpacingM);
    border-radius: var(--Sizes__S);
    cursor: pointer;
    font-family: var(--font-family-body);
    font-size: var(--Sizes__L);
}

.dropdown-content button{
    background-color: var(--primary-color);
    border: none;
    padding: var(--Sizes__M);
}

.dropdown{
    position: relative;
    font-family: var(--font-family-body);
    font-size: var(--Sizes__L);
}

.dropdown-content.active {
    display: block;
    position: absolute;
    border: 2px solid var(--text-colorLight);
    background-color: var(--primary-color);
    border-radius: var(--Sizes__S);
    top: 100%;
    left: 0;
    margin: var(--SpacingM) 0 0 0;
}


.dropdown-content{
    display: none;
  
    
}


main{
    padding: var(--SpacingL);
    margin: var(--SpacingL);
}


h1{
    font-family: var(--font-family-head);
    font-size: var(--Sizes__4XL);
    margin: var(--SpacingL) 0 var(--SpacingM) 0;
    color: var(--text-colorBody);
}

p{
    font-family: var(--font-family-body);
    font-size: var(--Sizes__L);
    color: var(--text-colorBody);
}

h2{
    font-family: var(--font-family-head);
    font-size: var(--Sizes__XL);
    color: var(--text-colorBody);
}

section{
    margin-bottom: var(--SpacingStupid);
}

.pageContainer{
    display: flex;
    flex-wrap: wrap;
    gap: var(--SpacingL);
    margin-top: var(--SpacingM);
}



.projects{
    background-color: var(--secondary-color);
    padding: var(--SpacingL);
    border-radius: var(--Sizes__S);

}

.projects p{
    color: var(--text-colorLight);
    font-family: var(--font-family-body);
    font-size: var(--Sizes__M);
}

.projects a{
    color: var(--text-colorLight);
    text-decoration: none;
    font-family: var(--font-family-head);
    font-size: var(--Sizes__L);
}

footer{
    background-color: var(--secondary-color);
    color: var(--text-colorLight);
    text-align: center;
    padding: var(--Spacing3XL);
    padding-top: var(--SpacingXL);
}

footer p{
    color: var(--text-colorLight);
    padding: var(--SpacingM);
}

footer a{
    color: var(--text-colorLight);
    text-decoration: none;
    margin: var(--SpacingM);
    font-size: var(--Sizes__L);
    font-family: var(--font-family-body);
}