@import url("reset.css");
@import url("layout.css");
@import url("variables.css");
@import url("typography.css");
/* DO NOT EDIT THESE IMPORTS
In order to keep our CSS as manageable as possible, we're starting with multiple separate stylesheets. They are all imported into style.css.

    Do not edit reset.css at all.
    You can minimally edit layout.css to match your specific column/row grid rules. Try to keep all basic structural rules here.
    Optionally, you can set colour variables in variables.css.
    Use typography.css stylesheet to set your general text styles.
    Use style.css for all general UI styles, or anything that you want to overwrite from other stylesheets, because it's loaded last. */

/* Use this stylesheet to add your UI details, and to overwrite layout details for specific instances. */

html {
  scroll-behavior: smooth;
}

/* //////////////////// Header ///////////////// */
header {
  display: flex;
  justify-content: space-between;
  background-color: black;
  padding: 0.1em;
  height: 200px;
}



/* ----------Style the navigation----------- */


/* //////////// Sections and pages //////////// */
/* Style any specific sections or pages here */



/* //////////////////// Footer ///////////////// */

footer {
     display: flex;
  justify-content: space-between;
  background-color: black;
  padding: 0.5em;
  height: 300px;
}


.buttonblack {
  background-color: black;
  color: #FFF78F;
  padding: 2em;
  height: 5em;
  margin-top:5em ;
  margin-bottom: 3em;
  text-align: center;
  font-family: "PT Sans", sans-serif;
  font-size:30px ;
  font-style: bold;
  border-radius: 12px;
  transition: background-color 0.3s ease; /* Smooth transition */
}

/* Hover state */
.buttonblack:hover {
  background-color: #FFF78F; 
  color: black; 
  cursor: pointer; 
  /* Changes the color on hover */
}
  /*buttons need padding for spacing around the button so other elements are not too close*/




.page-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;  
  margin: 4em;
  gap: 5em;
  
}

.backgroundblack {
  background-color: black;
  height: 60px;
}

.navbutton {
  color: white;
}

.projectnav {
    display: flex;
    justify-content: space-between;
    margin-top: 70px;
    width: 100%; /* Ensures the container spans the full width */
}



.container1 {

    color: black;
    font-style: bold;
    font-size: 25px;
    transition: font-size 0.3s ease; /* Smooth animation */
    
}

.container1:hover {
    font-size: 28px; /* Enlarges the font size */
     cursor: pointer; 
}

.container2 {
    color: black;
    font-style: bold;
    font-size: 25px;
    transition: font-size 0.3s ease; /* Smooth animation */
    margin-left: 1500px;
}

.container2:hover {
    font-size: 28px; /* Enlarges the font size */
      cursor: pointer; 
}

.projects {
display: block;
max-width: 100%;
}

.instagram {
display: flex;
justify-content: right;
width: 60px;
align-items: flex-end;
transition: transform 0.3s ease-out; /* Smooth animation for the transform property */
cursor: pointer; /* Changes the cursor to a hand icon on hover */
}

.instagram:hover {
  /* Enlarge the image on hover */
  transform: scale(1.3); 
}



.logo {
transition: transform 0.3s ease-out; /* Smooth animation for the transform property */
cursor: pointer; /* Changes the cursor to a hand icon on hover */
}

.logo:hover {
  /* Enlarge the image on hover */
  transform: scale(1.2); 
}

.button-link {
  text-decoration: none; /* Removes default underline */
  display: inline-block;
}



/*//////////MEDIA QUERIES////////////*/


@media not all and (pointer: coarse) {

  .card-link {
  position: relative;
  display: block;
}
.overlay2 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transition: all 400ms ease-in-out;
  opacity: 0;
  
  /* Optionally centre content using flexbox */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* center items vertically */
  align-items: center;
  /* center items horizontally */
}

.card-link:hover .overlay2,
.card-link:focus .overlay2 {
  opacity: 1;
}

/* The purpose of this part is to darken the image behind the 
	text - it can be done other ways as well. */
.overlay-filter {
  transition: all 400ms ease-in-out;
}

.card-link:hover .overlay-filter,
.card-link:focus .overlay-filter {
  filter: brightness(0.2);
}
}