/*========================
        FONTS
=========================*/

@font-face{
font-family: "Rubik Mono One";
font-weight:400;
src: url("/assets/fonts/rubikmonoone-regular-webfont.woff2") format("woff2"), 
        url("../assets/fonts/rubikmonoone-regular-webfont.woff") format("woff")
}

@font-face{
font-family: "Manrope";
font-weight:400;
src: url("../assets/fonts/Manrope-Regular.woff2") format("woff2")
}

@font-face{
font-family: "Manrope";
font-weight:600;
src: url("../assets/fonts/Manrope-SemiBold.woff2") format("woff2")
}

/*================================
        BODY & MAIN CONTAINERS
=================================*/

body{
    margin:0;
    color:#000;
    font-family:"Manrope"; 
    overflow-x:clip;
    }


header{
    width:90%;
    margin:1em auto;
    font-size:1.4rem;
    line-height:1.2em;
}

main{
    margin:0 auto;
    width:80%;
}

.cv-link-container{
    text-align:right;
    font-family: "Rubik Mono One", sans-serif;
    justify-content:right;    
}

/*================================
        NAVIGATION
=================================*/

nav{
    display:flex;
    justify-content: space-between;
}

nav ul{
  font-size:1em;  
  margin:0;
  padding:0;
  list-style:none;
  font-family: "Rubik Mono One", sans-serif;
  text-align:right;
}

nav ul{
  text-align: right;
}

/*================================
FILTER
=================================*/

.filter{
  margin-top:1em;
  display:flex;
  justify-content: space-between;
}

.filter-item{
  display:flex;
  cursor:pointer;
  background:none;
  padding:0.2em 0.7em;
  font-family: "Manrope";
  font-size:0.5em;
  border:1px solid black;
  color:black;
}

.filter-item:active{
  background:#000;
  color:white;
 
}
          
.filter-item.active {
  font-weight: bold; 
  color: white;
  background:#000;
}

.filter-item.hover {
  background:#000;
  color:white;
  transition: background-color 0.5s;
}

.hidden {
  display: none; /* Hides the elements */
}


/*================================
TYPOGRAPHY
=================================*/

h1{
    font-family: "Rubik Mono One", sans-serif;
    width:40%;
    margin:0;
    font-size:1em;
}

a{
    text-decoration: none;
    color:#000;    
}

/* a {
  color: inherit; 
} */

a:hover,
a:focus, 
a:active
{
    color:#eb0707;
    font-weight:800; 
}

.accent{
    color:#eb0707;
}

/*================================
        CONTACT
=================================*/

.contact{
  margin:1em;
  text-align:center;
  display:inline-block;

}

.copy{
  display:inline-block;
  text-decoration: none;
  color: black;
  font-weight:500;
  padding:0.1em 1em;
  border:dashed  #eb0707 1px;
  margin-left:3em;
  background-color: white;
}

.copy:hover{
  background: #eb0707;
  color:white;
}

/*================================
        BIO
=================================*/

.bio{
    
    margin-top:0;
    font-size:1.3rem;
    text-align: justify;
    font-family:"Manrope"; 
    font-weight:200;
    line-height:1.7;  
    color:black;
}

.bio p{
  margin:0;
}

.bio-paragraph{
    margin-bottom: 0;
}

.mailto{
    display:inline-block;
    text-decoration: none;
    color:black;
}

.mailto:hover,
.mailto:focus{
    color:#eb0707;
}



/*================================
        BOX IN THE BEGINNING
=================================*/
#rectangle{
border-width: 0px;
margin-top: 27%;
margin-left: 0px;
margin-right: 0px;
width:100%;
height:100px;
background:#eb0707;
}

/*================================
        BUTTONS
=================================*/

.btn-cv{
    text-align: center;
    margin:0 auto;
}

.btn-copy{
    display:inline;
}



.cv{
    margin:0;
    display: inline-block;
    background-color: #eb0707;
    text-decoration: none;
    font-family: Rubik Mono One;
    color:#000;
    padding:2em;
}

.cv:hover,
.cv:focus{
    background-color: #6e0404;
    color:white;

}

/*================================
        WORKS GRID
=================================*/
main{
  display:flex;
  color:white;
  margin:3em auto;
  width:80%;
  display:flex;
  justify-content: center;
  flex-wrap:wrap;
}

.btn{
  margin-bottom:3em;
}

.link-works{
  display:flex;
  background-color: #eb0707;
  font-size:1rem; 
  width:16em;
  height:16em;
  justify-content:center;
  align-items: center;
  text-align: center;
  text-decoration:none;
  color:#000; 
}

.link-works:hover,
.link-works:focus{
  background-color: #6e0404;
  color:white;
  transition: background-color 0.5s;
}

.btn.highlight {
  border: 2px solid #eb0707; /* Or any color you want for the highlight */
  background-color: rgba(235, 7, 7, 0.2); /* Optional: Change background color */
  
}

/*================================
        MEDIA QUERY
=================================*/


@media (min-width:650px){

  header{
      width:80%;
  }

  h1{
      font-size:1.2em;
      width:70%;
  
  }

  .filter{
      width:60%;
      margin: 0;
  }

  

  main{
      justify-content: space-between;
  }

  .bio{
    width:60%;
    margin:4em auto;
  }
}