/* this is the HOME page styling */

html {
    box-sizing: border-box;
    min-height: 100vh;
    scroll-behavior: smooth;
    font-family: 'Product Sans', sans-serif;
}

body {
    font-family: 'Product Sans', sans-serif;
}

/* this is the NAVBAR MENU styling */

.nav-link {
    display: block;
    padding: 3% 15%;
    transition: ease-in-out;
    color: black;
    font-size: 200%;
}

section {
   display: flex;
   justify-content: center;
}

.logo {
  padding-top: 2%;
}

/*this is the styling for the social media icons*/
.sticky {
    position: fixed;
    top: 72%;
    right: 2%;
}

li {
    padding: 10%;
}

/*this is the wordmark styling*/

.figure {
    display: flex;
}

/*ABOUT page styling begins here*/

.title {
    font-size: 170%;
}

.link {
    text-decoration: none;
    color: black;
    
}

/*WORK page styling here*/

.col-3 {
    width: auto;
}

/*reference for imagehover taken from https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_opacity*/

.imgfluid {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
  }
  
  .middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
  }
  
  .imgfluid:hover  {
    opacity: 0.5;
  }
  
  .description:hover .middle {
    opacity: 1;
  }
  
  .text {
    color: black;
  }

  /*PROJECT page styling here*/

h1, h6, .bottom{
text-align: center;
  }



.caption {
    padding: 1% 21%;
}

/*carousel overrides here*/

.carousel-control-prev-icon, .carousel-control-next-icon {
  width: 2rem;
  height: 2rem;
  background-color: rgba(0, 0, 0, 0.466);  
  border-radius: 35%;
}

.carousel-control-next, .carousel-control-prev {
  width: 37%;
}

.carousel-indicators {
margin-left: 0%;
}


/* FOOTER styling here*/

.uparrow {
    color: #000000;
    height: 30vh;
    font-size: 400%;
}

.bottom {
  text-decoration: none;
  color: black;
}





/*PUT YEAR OF THE PROJECT IN DESCRIPTION