@import url('https://fonts.googleapis.com/css2?family=Chango&display=swap');
@import url('https://fonts.cdnfonts.com/css/star-wars');
@import url('https://fonts.googleapis.com/css2?family=Chango&family=Jersey+15&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bitcount+Single:wght@100..900&family=Chango&family=Jersey+15&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bitcount+Single:slnt,CRSV@-8..0,1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Protest+Strike&display=swap');
@font-face {
  font-family: 'AngerisPixel';
  src: url('fonts/AngerisPixel-Regular.ttf') format('truetype');
}
.chango-regular {
  font-family: "Chango", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.jersey-15-regular {
  font-family: "Jersey 15", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.protest-strike-regular {
  font-family: "Protest Strike", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.bitcount-single {
  font-family: "Bitcount Single", system-ui;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "slnt" -8,
    "CRSV" 1,
    "ELSH" 0,
    "ELXP" 0;
}


.page-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 100vh;
}
::-moz-selection { 
  background: rgb(136, 57, 239);
}

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  
}
.chango-regular {
  font-family: "Chango", sans-serif;
  font-weight: 200;
  font-style: normal;
}
#catAsci{
  color: #a5adcb;
  font-family:Arial, Helvetica, sans-serif ;
  font-size: 2rem;
  margin-bottom: 7rem;
}
.container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 10vh;
  gap: 4vw;
}

.rectangle{
  width: 40vw;
  height: 40vh;
  position: relative;
  overflow: hidden;
  transition: filter 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  vertical-align: center;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 5vh;
  margin-right: 7vw;
}
.text {
    width: 40vw;
    min-height: 40vh; 
    margin-bottom: -15vh;
    
    font-family: 'Space Mono', monospace;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    
    position: relative;
}
#StarWars{
    font-family: 'Star Wars', sans-serif;
    font-size:  clamp(0.875rem, 0.75rem + 0.5vw, 1.25rem);;
    color: white;
}

#title{
  margin-top: 3vh;
  font-family: 'AngerisPixel', sans-serif;
  color: #7b6fb4  ;
  font-size: clamp(1.8rem, 1rem + 2vw, 3.5rem);

}
.rectangle:hover {
  filter: drop-shadow(0 10px 22px rgb(136, 57, 239)); 
}
#gallery{
    
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}
#info{
  font-size: clamp(0.875rem, 0.75rem + 0.5vw, 1.25rem);
  font-family: "Protest Strike", sans-serif;
  color:#b4befe
}
#CNITV{
  color:#b4befe;
  text-decoration: none;
}
#CNITV:hover{
  color: #a6e3a1;
  text-decoration: none;
}
#pain{
  color:#f38ba8
}
#opportunity{

}
/* --- TYPING CONTAINER --- stolen from the internet*/

.typing-container {
  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  margin: 0;
  color: #bcc0cc;
  font-family: monospace;
  font-size: 2vw;
  text-align: center;
}

.line-1, .line-2 {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  border-right: .1.5em solid #cba6f7;
}

.line-1 {
  animation: 
    typing-1 1.5s steps(9) forwards,
    blink-caret .7s step-end infinite;
}

.line-2 {
  display: block;
  animation: 
    typing-2 2.5s steps(24) 1.5s forwards,
    blink-caret .7s step-end infinite;
}

@keyframes typing-1 {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes typing-2 {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
}
/*more code from the internet*/
button.expand {
  --button-height: clamp(40px, 6vh, 60px);
  min-height: var(--button-height);
  height: auto; 
  max-width: calc(100vw - 4rem);
  overflow: hidden;
  outline: none;
  background-color: rgb(57, 47, 105);
  border-radius: 8px;
  
  padding: clamp(8px, 1.5vh, 14px) clamp(16px, 3vh, 32px);
  border: none;
  color: #b7bdf8;
  font-family: "hango-regular";
  cursor: pointer;

  position: relative;
  left: auto;
  transform: none;
  margin: 5rem auto 4rem auto; 

  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: padding 0.3s ease, background-color 0.2s ease;
}
.expand-icon {
  --icon-size: 4vw;
  position: absolute;
  top: 0;
  height: var(--button-height);
  width: var(--button-height);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s, background-color 0.2s;
}

.expand-icon > svg {
  height: var(--icon-size);
  width: var(--icon-size);
  transition: transform 0.2s;
}

.expand-icon:hover {
  background-color: rgb(84, 68, 161);
}

.expand-icon:hover > svg {
  transform: scale(1.2);
}

.expand-icon.option-left {
  left: 0;
  border-right: 1px solid #838383;
  transform: translateX(calc(-1 * var(--button-height) - 1px));
}

.expand-icon.option-right {
  right: 0;
  border-left: 1px solid #838383;
  transform: translateX(calc(var(--button-height) + 1px));
}

button.expand:hover,
button.expand.loading {
  padding-left: calc(25px + var(--button-height));
  padding-right: calc(25px + var(--button-height));
}

button.expand:hover .expand-icon.option-left,
button.expand:hover .expand-icon.option-right {
  transform: translateX(0);
  transition: transform 0.3s 0.05s;
}

.button-text{
  font-size: clamp(12px, 2.2vh, 18px);
  font-family: "Bitcount Single", system-ui;
  white-space: normal;
  text-align: center;
}
.button-text:hover {
  text-shadow: 0px 4px 12px rgb(119, 49, 212);
}
@media (max-width: 600px) {
  button.expand {
    padding: 8px 16px;
  }
  button.expand:hover,
  button.expand.loading {
    padding-left: calc(12px + var(--button-height));
    padding-right: calc(12px + var(--button-height));
  }
  .button-text {
    font-size: clamp(10px, 3.2vw, 14px); 
    text-overflow: ellipsis;
  }
  .expand-icon {
    --icon-size: 18px; 
  }
}