/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@import url('https://fonts.googleapis.com/css2?family=Changa:wght@200..800&family=Martian+Mono:wght@100..800&family=Monda:wght@400..700&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Sansation:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Sarpanch:wght@400;500;600;700;800;900&family=Syne+Mono&display=swap');

body {
  background-image: url('https://file.garden/Z1Bqsg_kAHz1WS0r/citybg');
  background-repeat: no-repeat;
  background-position: center top 300px; 
  background-attachment: fixed; 
  background-size: contain;
  background-color: black; 
  font-family: sansation;
  font-size:15px;
  letter-spacing:1px;
  line-height:24px;
  color: white;
  cursor: url('https://file.garden/Z1Bqsg_kAHz1WS0r/cursor_edited.png') 25 25, auto;
}

.clickable-item {
  cursor: url('https://file.garden/Z1Bqsg_kAHz1WS0r/cursor_edited.png') 25 25, auto;
}

.target-element:hover {
  cursor: url('https://file.garden/Z1Bqsg_kAHz1WS0r/cursor_edited.png') 25 25, auto;
}

.button-class:hover {
  cursor: url('https://file.garden/Z1Bqsg_kAHz1WS0r/cursor_edited.png') 25 25, auto;
}

a:link, a:visited, a:active {
  font-weight:bold;
  color:grey;
  text-decoration:none;
}
a:hover { color:#ddd; }

b { color:gold; }
i { color:#aaa; }
u { color:#888; }

::-webkit-scrollbar-thumb {
  background:#111;
  border:1px solid #666;
}
::-webkit-scrollbar {
  width:7px;
  background:transparent;
}

table, th, td {
  border:1px solid white;
  border-collapse: collapse;
  padding: 13px 13px 13px 13px;
}

#layout {
  width:1500px;
  margin:0 auto;
}


#columns {
  overflow: hidden;
}

#header {
  height:400px;
  width:1000px;
  background:black url(https://file.garden/Z1Bqsg_kAHz1WS0r/gifs/chroma-keyed-video.gif) left 100px no-repeat ;
  margin: 0 auto;
}

#sitename a {
  font:60px martian mono;
  color:#FF4700;
  text-transform:uppercase;
  letter-spacing:8px;
  border-radius:10px;
  padding:4px 20px;
}

#subname a {
  font:20px martian mono;
  color:#FF4700;
  text-transform:lowercase;
  background:black;
  border-radius:5px;
  padding:4px 10px;
}

#left1, #content1 {
  float:left;
  padding:20px;
  margin:80px;
}

#left1 {
  width:280px;
  background:transparent;
  color:#5a5a5a;
  border:20px orange;
}

#content1 {
  width:600px;
  background:transparent;
  color:lightgrey;
  animation: flicker-in-2;
  animation-fill-mode: backwards;
}

.title {
  font:bold 20px martian mono;
  color:#FF7F00;
  letter-spacing:3px;
  margin-bottom:2px;
}

.subtitle {
  font:bold 17px martian mono;
  color:#FF7F00;
  letter-spacing:3px;
  margin-bottom:2px;
}

.title-blue {
  font:bold 20px martian mono;
  color:royalblue;
  letter-spacing:3px;
  margin-bottom:2px;
}

.subtitle-blue {
  font:bold 17px martian mono;
  color:steelblue;
  letter-spacing:3px;
  margin-bottom:2px;
}

.title-purple {
  font:bold 20px martian mono;
  color:blueviolet;
  letter-spacing:3px;
  margin-bottom:2px;
}

.subtitle-purple {
  font:bold 17px martian mono;
  color:mediumpurple;
  letter-spacing:3px;
  margin-bottom:2px;
}

.title-green {
  font:bold 20px martian mono;
  color:forestgreen;
  letter-spacing:3px;
  margin-bottom:2px;
}

.subtitle-green {
  font:bold 17px martian mono;
  color:seagreen;
  letter-spacing:3px;
  margin-bottom:2px;
}

.title-pink {
  font:bold 20px martian mono;
  color:fuchsia;
  letter-spacing:3px;
  margin-bottom:2px;
}

.subtitle-pink {
  font:bold 17px martian mono;
  color:hotpink;
  letter-spacing:3px;
  margin-bottom:2px;
}

.title-teal {
  font:bold 20px martian mono;
  color:mediumspringgreen;
  letter-spacing:3px;
  margin-bottom:2px;
}

.subtitle-teal {
  font:bold 17px martian mono;
  color:palegreen;
  letter-spacing:3px;
  margin-bottom:2px;
}

.scrollbox {
  background:black;;
  height:100px;
  overflow:auto;
  overflow-x:hidden;
  margin-top:4px;
}

textarea {
  font:15px martian mono;
  background:white;
  color: white;
}

.typewriter h1 {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid #FF4700; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 5s steps(20, end),
    blink-caret .85s step-end infinite;
  font:bold 30px martian mono;
  color:#FF4700;
  float:left;
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #FF4700; }
}

.typewriter-blue h1 {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid royalblue; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 5s steps(20, end),
    blink-caret-blue .85s step-end infinite;
  font:bold 30px martian mono;
  color:royalblue;
  float:left;
}

/* The typewriter cursor effect */
@keyframes blink-caret-blue {
  from, to { border-color: transparent }
  50% { border-color: royalblue; }
}

.typewriter-purple h1 {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid blueviolet; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 5s steps(20, end),
    blink-caret-purple .85s step-end infinite;
  font:bold 30px martian mono;
  color:blueviolet;
  float:left;
}

/* The typewriter cursor effect */
@keyframes blink-caret-purple {
  from, to { border-color: transparent }
  50% { border-color: blueviolet; }
}

.typewriter-green h1 {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid forestgreen; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 5s steps(20, end),
    blink-caret-green .85s step-end infinite;
  font:bold 30px martian mono;
  color:forestgreen;
  float:left;
}

/* The typewriter cursor effect */
@keyframes blink-caret-green {
  from, to { border-color: transparent }
  50% { border-color: forestgreen; }
}

.typewriter-pink h1 {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid fuchsia; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 5s steps(20, end),
    blink-caret-pink .85s step-end infinite;
  font:bold 30px martian mono;
  color:fuchsia;
  float:left;
}

/* The typewriter cursor effect */
@keyframes blink-caret-pink {
  from, to { border-color: transparent }
  50% { border-color: fushsia; }
}

.typewriter-teal h1 {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid mediumspringgreen; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 5s steps(20, end),
    blink-caret-teal .85s step-end infinite;
  font:bold 30px martian mono;
  color:mediumspringgreen;
  float:left;
}

/* The typewriter cursor effect */
@keyframes blink-caret-teal {
  from, to { border-color: transparent }
  50% { border-color: mediumspringgreen; }
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

.container {
  position: relative; /* Essential: keeps the child image relative to this box */
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.floating-bg {
  position: absolute;
  top: 10%;
  right: 5%;
  z-index: -1; /* Pushes the image behind the text */
  width: 200px;
  opacity: 0.5; /* Optional: makes it look like a watermark */
}

.floating-bg2 {
  position: absolute;
  z-index: -1; /* Pushes the image behind the text */
  opacity: 0.5; /* Optional: makes it look like a watermark */
  float: right;
  height: 300%;
  width: auto;
  display: flex;
  align-items: flex-end;
}

@keyframes fadeInUp {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

.fadeInUp-animation {
  animation: 3s fadeInUp;
  animation-delay: 3s;
  animation-fill-mode: backwards;
}

details {
  padding: 0.5em 0.5em 0;
}

summary {
  font-weight: bold;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
  color:orange;
}

details[open] summary {
  border-bottom: 1px solid #aaaaaa;
  margin-bottom: 0.5em;
}

details[open] {
  padding: 0.5em;
}

.image-container {
  display: flex;         /* Enables flexbox */
  align-items: center;   /* Vertically centers the image and text */
  gap: 50px;            /* Adds space between the image and text */
}

.side-img {
  width: 150px;          /* Adjust as needed */
  height: auto;
}

.image-container-small {
  display: flex;         /* Enables flexbox */
  align-items: center;   /* Vertically centers the image and text */
  gap: 10px;            /* Adds space between the image and text */
}

.side-img-small {
  width: 30px;          /* Adjust as needed */
  height: auto;
}


/* center the blockquote in the page */
.blockquote-wrapper {
   display: flex;
   height: 30vh;
   padding: 0 20px;
}

/* Blockquote main style */
.blockquote {
    position: relative;
    font-family: martian mono;
    font-weight: 400;
    color: #ffffff;
    padding: 30px 0;
    width: 100%;
    max-width: 500px;
    z-index: 1;
    margin: 80px auto;
    align-self: center;
    border-top: solid 1px;
    border-bottom: solid 1px;
    font-size: 2rem;
}

/* Blockquote header */
.blockquote h1 {
    position: relative;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    margin: 0;
}

/* Blockquote right double quotes */
.blockquote:after {
    position: absolute;
    content: "”";
    color: rgba(255, 255, 255, 1);
    font-size: 7rem;
    line-height: 0;
    bottom: -43px;
    right: 30px;
}

/* increase header size after 600px */
@media all and (min-width: 600px) {
    .blockquote h1 {
        font-size: 23px;
   }

}

/* Blockquote subheader */
.blockquote h4 {
    position: relative;
    color: #292a2b;
    font-size: .7rem;
    font-weight: normal;
    line-height: 1;
    margin: 0;
    padding-top: 20px;
    z-index: 1;
}