@import url("https://use.typekit.net/bao5jex.css");
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');

#leftCol a{
   	font-size: 28px;
	color: black;
	font-family: 'Open Sans', sans-serif;
  	font-size: 15px;
}

.affix {
    top: 20px;
    z-index: 9999 !important;
    display: inline-block;
    height: 150px;
    width: 200px;
    left: 0;
    font-size: 16px;
}

.custom{
	font-weight: 900;
  color: #335e7d;
}

/* .footer {
    height:40px;
    width:100%;
    position:absolute;
    bottom:0;
}

.footer a{
    font-family: bd-supper, sans-serif;
    font-style: normal;
    font-weight: 400;
} */

.contactM{
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  color: #335e7d;
}

body{
  background: url(https://github.com/bingnaa/bingnaa.github.io/blob/main/portfolio/img/flowerback.png?raw=true);
  background-size: 900px 800px;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: top -95px right -230px;
}

.flex-container{
  padding: 30px;
  display: flex;
  flex-direction: row;
  text-align: left;
  align-items: self-end;
/*   align-content: center; */
  justify-content: center;
  margin: 10px;
}

#proj a{
  font-family: bd-supper, sans-serif;
  font-style: normal;
  font-weight: 400;
  color: #B494B3;
}

.flex-box{	
  display: flex;
  flex-direction: column;
  text-align: left;
  align-items: stretch;
  align-content: start;
  justify-content: start;
  margin: 10px;
  width: 45%;
/*   gap: 100px; */
}

h2{
  text-align: left;
  font-family: bd-supper, sans-serif;
  font-style: normal;
  font-weight: 700;
  color: #335e7d;
  padding-bottom: 10px;
}

h3{
  text-align: left;
  font-family: bd-supper, sans-serif;
  font-style: normal;
  font-weight: 400;
  color: #335e7d;
  padding-bottom: 10px;
}

p{
  text-align: left;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  color: #57762c;
  padding-left: 10px;
  padding-right: 10px;
}

#logo{
  height: 40px;
  padding-left: 20px;
  padding-top: 15px;
}

#dcard{
  width: 45%;
  padding: 30px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.marquee {
 height: 120px;	
 overflow: hidden;
 position: relative;
 border: 5px solid black;
}
.marquee p {
 font-family: bd-supper, sans-serif;
 position: absolute;
 width: 100%;
 height: 100%;
 font-size: 64px;
 color: #B494B3;
 margin: 0;
 line-height: 100px;
 text-align: left;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);	
 transform:translateX(100%);
 /* Apply animation to this element */	
 -moz-animation: scroll-right 8s linear infinite;
 -webkit-animation: scroll-right 8s linear infinite;
 animation: scroll-right 8s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-right {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-right {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-right {
 0%   { 
 -moz-transform: translateX(100%); /* Browser bug fix */
 -webkit-transform: translateX(100%); /* Browser bug fix */
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Browser bug fix */
 -webkit-transform: translateX(-100%); /* Browser bug fix */
 transform: translateX(-100%); 
 }
}

/* gsap */

.menu__item {
  width: max-content;
}

.menu__item-image_wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 400px;
  pointer-events: none;
  opacity: 0;
}

.menu__item-image_inner .menu__item-image {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.menu__item-text {
  position: relative;
  font-family: bd-supper, sans-serif;
  font-style: normal;
  font-weight: 400;
  color: #B494B3;
  text-transform: uppercase;
  font-size: 5vw;
  line-height: 1;
  color: #e6e3d8;
  opacity: 1;
  transition: opacity 350ms ease;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}

.menu__item:hover .menu__item-text {
  color: #c24628;
}

.menu__item:hover .menu__item-image_wrapper {
  z-index: -2;
}