body,
html {
  height: 100%;
  margin: 0;
  border: 0;
}

nav {
  position: absolute;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  font-family: "Lobster", sans-serif;
  height: 8vh;
  width: 100%;
  z-index: 2;
}

.thisItem a {
  font-size: 50px;
  color: rgb(242, 75, 175);
  padding: 2.5vw;
  text-decoration: none;
  transition: all 300ms ease-in-out;
}

.thisItem a:hover {
  font-size: 55px;
  color: #00ffff;
  transition: all 300ms ease-in-out;
}

.bgimg-1,
.bgimg-2,
.bgimg-3,
.bgimg-4,
.bgimg-5,
.bgimg-6,
.bgimg-7,
.bgimg-8,
.bgimg-9,
.bgimg-10 {
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bgimg-1 {
  background-image: url("../LOVE/assets/BR1.jpg");
  min-height: 100%;
}

.bgimg-2 {
  background-image: url("../LOVE/assets/BR2.png");
  min-height: 650px;
}

.bgimg-3 {
  background-image: url("../LOVE/assets/her1.jpg");
  min-height: 750px;
}

.bgimg-4 {
  background-image: url("../LOVE/assets/her2.jpg");
  min-height: 650px;
}

.bgimg-5 {
  background-image: url("../LOVE/assets/her3.jpg");
  min-height: 750px;
}

.bgimg-6 {
  background-image: url("../LOVE/assets/BR3.png");
  min-height: 100%;
}

.bgimg-7 {
  background-image: url("../Content/Assets/Loneliness&Brain.png");
  min-height: 750px;
}

.bgimg-8 {
  background-image: url("../Content/Assets/Objectophilia.png");
  min-height: 750px;
}

.bgimg-9 {
  background-image: url("../Content/Assets/AI&Romance.jpg");
  min-height: 750px;
}

.bgimg-10 {
  background-image: url("../Content/Assets/AlgorithmicBias.png");
  min-height: 750px;
}

.v1 {
  position: relative;
  background-color: #282e34;
  text-align: center;
  padding: 10px 30px;
}

.caption1 {
  position: absolute;
  margin-left: 71.5%;
  margin-top: 28%;
  transform: rotate(-5deg);
}

.caption2 {
  position: absolute;
  margin-left: 75%;
  margin-top: 17%;
}

.caption2 a {
  font-size: 50px;
  font-family: "Pixelify Sans", sans-serif;
  color: aqua;
  text-decoration: none;
  transition: all 300ms ease-in-out;
}

.caption2 a:hover {
  font-size: 100px;
  color: pink;
  transition: all 300ms ease-in-out;
}

.caption3 {
  position: absolute;
  left: 20%;
  right: 20%;
  top: 25%;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: #e6cbcb;
}

.caption4 {
  position: absolute;
  left: 20%;
  right: 20%;
  top: 20%;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: #243aff;
}

.caption5 {
  position: absolute;
  left: 20%;
  right: 20%;
  top: 22%;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: #acf6fc;
}

.caption6 {
  position: absolute;
  left: 20%;
  right: 20.5%;
  top: 20%;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: #ffffff;
  background-blend-mode: lighten;
}

p.p1 {
  letter-spacing: 1px;
  font-size: 45px;
  text-align: center;
}

p.p1 span.B {
  font-family: "Noto Sans Osmanya", sans-serif;
  font-style: italic;
  color: #ffffff;
}

p.p1 span.M {
  font-size: 65px;
  font-family: "Pixelify Sans", sans-serif;
  color: #1c42ff;
}

p.p1 span.M1 {
  font-size: 65px;
  font-family: "Monoton", sans-serif;
  color: #1c42ff;
}

p.p1 span.H {
  font-size: 65px;
  font-family: "Dancing Script", cursive;
  color: #eaff00;
}

p.p1 span.L {
  font-size: 65px;
  font-family: "Great Vibes", cursive;
  color: #ff0000;
}

p.p1 span.L1 {
  font-size: 65px;
  font-family: "Lobster", sans-serif;
  color: #ff0000;
}

p.p1 span.L2 {
  font-size: 65px;
  font-family: "Dancing Script", cursive;
  color: #ff0000;
}

p.p1 span.L3 {
  font-size: 65px;
  font-family: "Shadows Into Light", cursive;
  color: #ff0000;
}

#mypath {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: drawPath 13s forwards;
}

.digital_rain {
  position: relative;
  margin: 0;
  background-color: #000000;
}

.digital_rain iframe {
  position: absolute;
  top: 20%;
  left: 22.5%;
  width: 55%;
  height: 65%;
  border: none;
}

.heart_beat {
  position: relative;
  bottom: 55%;
  height: 0;
}

#my_canvas {
  width: 100%;
  height: 100%;
}

video {
  position: relative;
  top: 50%;
  left: 50%;
  width: 47%;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}

.conclusion-text {
  position: relative;
  background-color: rgb(0, 0, 0);
  border: 1px solid rgb(0, 0, 0);
}

.conclusion-text p {
  position: relative;
  width: 50%;
  left: 25%;
  height: 50%;
  font-size: 30px;
  font-family: "Noto Sans Osmanya", sans-serif;
  font-style: italic;
  color: rgb(255, 0, 0);
  margin-top: -12.5px;
  margin-bottom: 12.5vh;
}

footer {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
  width: 100%;
  background-color: black;
  text-align: center;
  padding: 10px 0;
}

footer a {
  font-size: 30px;
  color: white;
  font-family: "Couture", sans-serif;
  transition: all 300ms ease-in-out;
}

footer a:hover {
  color: #ffa21b;
  transition: all 300ms ease-in-out;
}

@keyframes drawPath {
  to {
    stroke-dashoffset: 0;
  }
}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
  .bgimg-1,
  .bgimg-2,
  .bgimg-3,
  .bgimg-4,
  .bgimg-5,
  .bgimg-6 {
    background-attachment: scroll;
  }
}