/* a minimalist set of CSS resets */

h1 {
  color: #ff4d6d;
}
h3 {
  color: #ff4d6d;
}
h2 {
  color: #ff4d6d;
}
p {
  color: #1b0c36;
}
a {
  color: #1b0c36;
}
div {
  color: #1b0c36;
}
* {
  margin: 0px;
  padding: 0px;
}

html {
  box-sizing: border-box;
  font-size: 16px;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

/* adjust typography defaults */
html,
body {
  margin: 0;
  font-family: "Lucida Console", "Courier New", monospace;
  line-height: 1.5;
  margin: 10px;
  text-align: center;
  background-color: #ffc8dd;
}

/* images and videos max out at full width */
img,
video {
  height: 200px;
  max-width: 100%;
}

#footer {
  position: sticky;
  border-style: solid;
  border: dotted;
  padding: 5px;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #e06d99;
  text-align: center;
}

/* Add a black background color to the top navigation */
.topnav {
  background-color: #e06d99;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ffdfba;
  color: #e06d99;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #ffffba;
  color: #e06d99;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

.container {
  padding: 75px 0;
  margin: 0 auto;
  width: 1140px;
}

.gallery-wrap {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 70vh;
}

.item {
  flex: 1;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: none;
  transition: flex 0.8s ease;

  &:hover {
    flex: 7;
  }
}

.item-1 {
  background-image: url("https://cdn.glitch.global/19ec598d-27bf-480d-b89b-4f4f412a3352/0cffa79e-a70d-460d-b578-2fa63cac39b5.image.png?v=1713360219002");
}

.item-2 {
  background-image: url("https://www.toydonut.com/cdn/shop/products/image_890dbf79-1025-4dc4-8e51-ff3f2032d455.jpg?v=1678383322&width=480");
}

.item-3 {
  background-image: url(https://cdn.glitch.global/19ec598d-27bf-480d-b89b-4f4f412a3352/b73bb9e7-e218-4249-94cb-a2edd6bdd3d3.image.png?v=1713360720329);
}

.item-4 {
  background-image: url("https://simplytoyz.com/cdn/shop/products/TTA05238-04.jpg?v=1646127358");
}

.item-5 {
  background-image: url("https://cdn.glitch.global/19ec598d-27bf-480d-b89b-4f4f412a3352/65b2a467-d9ed-4ef6-9b01-134c64db7642.image.png?v=1713361721188");
}

.social {
  position: absolute;
  right: 35px;
  bottom: 0;

  img {
    display: block;
    width: 32px;
  }
}
.bc-banner {
  position: relative;
  border: 1px solid #;
  overflow: hidden;
  background-color: pink;
}
.bc-banner a {
  text-decoration: none;
  color: #fff;
}
.bc-banner a:hover {
  opacity: 0.8;
}
.bc-banner-header {
  background-image: "https://media.giphy.com/media/P8BljOJnQcjf3HNoWR/giphy.gif?cid=790b7611csuqx22v5uoihulwb7899m4krwb6jexoa4s6ae95&ep=v1_stickers_search&rid=giphy.gif&ct=s";
  position: relative;
  z-index: 2;
  padding: 1px;
}

.bc-banner-body {
  position: relative;
  z-index: 2;
  padding: 2rem;
}
.bc-banner .bc-banner-cover {
  position: absolute;
  opacity: 0.3;
  filter: alpha(opacity=30); /* For IE8 and earlier */
  object-fit: cover;
  top: 0;
  z-index: 1;
  height: 100%;
  width: 100%;
}

/* Floating profile */
:root {
  --quick: all 0.15s ease-in-out;
  --slow: all 0.5s ease-in-out;
  /* I'll be slowly transferring the colors into variables as I feel like it */
  --vadericon: #ffe7e2;
  --vadericonshadow: #c11e22;
  --vadericonhover: #c11e22;
}
.card {
  display:flex;
  justify-content:flex-end;
  height: 300px;
  width: 200px;
  overflow: hidden;
  margin: 15px;
  box-shadow: 10px 8px 12px rgba(0, 0, 0, 0.2);
  position: static;
  background: transparent;
  filter: grayscale(100%);
  transition: var(--quick);
}
.card:hover {
  filter: grayscale(0%);
}
.card:hover .bg {
  width: 110%;
  height: 110%;
  display:flex;
  justify-content:flex-end;
}
.card:hover .biocard {
  color: transparent;
}
.card:hover .vadercard {
  background: url("https://i.pinimg.com/originals/72/e6/ac/72e6acfbdc3272e94b4473feceb78cb4.jpg");
  background-position: right;
  -webkit-background-clip: text;
  background-clip: text;
  display:flex;
  justify-content:flex-end;
}

.icons {
  position: static;
  display: flex;
  flex-direction: column;
  padding: 15px;
}
.icon {
  text-decoration: none;
  text-align: center;
  font-size: 1.1em;
  transition: var(--quick);
}
.biocard {
  position: absolute;
  bottom: 0;
  right: 15px;
  text-align: right;
  transition: var(--slow);
  
}
.vadercard,
.kenobicard,
.ahsokacard {
position: bottom;
}
.vadercon {
  color: var(--vadericon);
  text-shadow: 0px 0px 14px var(--vadericonshadow);
}
.fa-brands {
  margin: 2px 0;
}
.bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
  transition: var(--slow);

}
.vader-bg {
  height:300px;
  width:200px;
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSz9F14_iPQGxDVr5998_Q3803scSEhWzAVlA&usqp=CAU");
}

/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
  float: left;
  width: 50%;
  padding: 5px;
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
}