/* 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." */
* {
  box-sizing: border-box;
}

   
@font-face {
  font-family: 'Iceland';
  src: url('/fonts/iceland-regular.ttf') format('truetype');
}


@font-face {
  font-family: 'GeistPixel';
  src: url('/fonts/geistpixel.ttf') format('truetype');
}

@font-face {
  font-family: 'Jersey';
  src: url('/fonts/jersey.ttf') format('truetype');
}




.img-container {
  width: 250px;        /* Set your preferred width */
  height: 35px;       /* Set your preferred height */
  background-position: center bottom;
  padding: 0px;  
}

/* 2. Target the image inside the container */
.img-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease; /* Makes the zoom smooth */
}
/* 3. Apply the scale multiplier when hovering over the container */
.img-container:hover img {
  transform: scale(1.05); /* Scales the image up to 115% */
  cursor: pointer;
}


.img-container2 {
  width: 175px;        /* Set your preferred width */
  height: 55px;       /* Set your preferred height */
  background-position: center bottom;
  padding: 0px;  
}

/* 2. Target the image inside the container */
.img-container2 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.img-container3 {
  width: 100%; 
  background-position: center bottom;
  padding: 0px;  
}

/* 2. Target the image inside the container */
.img-container3 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.img-container4 {
  width: 110px;        /* Set your preferred width */
  height: 53px;       /* Set your preferred height */
  background-position: center bottom;
  padding: 0px;  
}

/* 2. Target the image inside the container */
.img-container4 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


.nav-container {
  display: flex;
  flex-direction: row;
}

.navbutton{
  content: "nav";
  color: #2f679e;
  width: 100px;        /* Set your preferred width */
  height: 40px;
  border: 2px solid rgba(47, 103, 158, 0.8);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(47, 103, 158, 0.5),
    inset 0 -1px 0 rgba(47, 103, 158, 0.1),
    inset 0 0 0px 0px rgba(47, 103, 158, 0);
  font-family: 'Jersey';
  padding: 0;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: center;

  line-height: 1;
  
  font-size: 20px;
  border-radius: 10px;
  margin: 4px 10px;
  
  --s: 94px; /* control the size*/
  --c1: #041429;
  --c2: rgb(0 0 0 / 1.0);
  
  --_g: #0000 90deg,var(--c1) 0;
  background: 
    conic-gradient(from 90deg at 2px 2px,var(--_g)),
    conic-gradient(from 90deg at 1px 1px,var(--_g)),
    var(--c2);
  background-size: var(--s) var(--s), calc(var(--s)/5) calc(var(--s)/5);
  animation: slidePattern2 10s linear infinite;
  grid-column: col-start / span 12;
    /* 1. Crucial: Smooths the scaling over 0.3 seconds */
  
  
  transition: transform 0.3s ease;  
  cursor: pointer;
}

.navbutton:hover {
  /* Scales the element to 1.1x (110%) its original size */
  transform: scale(1.05); 
  background-color: rgba(11, 22, 44, 1.0);
}


.container {
  
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  gap: 20px;
  padding: 20px;               /* Space inside the box */
  max-width: 3000px;            /* Constrain the width */
  
  background: rgba(47, 103, 158, 0.07);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 0px;
  border: 2px solid rgba(47, 103, 158, 0.3);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(47, 103, 158, 0.5),
    inset 0 -1px 0 rgba(47, 103, 158, 0.1),
    inset 0 0 0px 0px rgba(47, 103, 158, 0);
  position: relative;
  overflow: hidden;
}

.container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(47, 103, 158, 0.8),
    transparent
  );
}

.container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(47, 103, 158, 0.8),
    transparent,
    rgba(47, 103, 158, 0.3)
  );
}


nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Mobile first */
.container > * {
  border-radius: 3px;
  border: 2px solid rgba(47, 103, 158, 0.3);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(47, 103, 158, 0.5),
    inset 0 -1px 0 rgba(47, 103, 158, 0.1),
    inset 0 0 0px 0px rgba(47, 103, 158, 0);
  padding: 5px;               /* Space inside the box */
  max-width: 3000px;            /* Constrain the width */
  
  --s: 94px; /* control the size*/
  --c1: #041429;
  --c2: rgb(0 0 0 / 0.7);
  
  --_g: #0000 90deg,var(--c1) 0;
  background: 
    conic-gradient(from 90deg at 2px 2px,var(--_g)),
    conic-gradient(from 90deg at 1px 1px,var(--_g)),
    var(--c2);
  background-size: var(--s) var(--s), calc(var(--s)/5) calc(var(--s)/5);
  animation: slidePattern2 10s linear infinite;
  grid-column: col-start / span 12;
    /* 1. Crucial: Smooths the scaling over 0.3 seconds */
  transition: transform 0.3s ease; 
}

/* 2. Target the hover state */
.container > :hover {
  /* Scales the element to 1.1x (110%) its original size */
  transform: scale(1.00); 
  --c2: rgb(2 7 15 / 0.7);
}

@media (min-width: 576px) {
  nav ul {
    display: flex;
    justify-content: space-between;
  }
  .content{
    grid-column: col-start / span 12;
  }
  .footer {
    grid-column: col-start / span 12;
  }
  body {
    padding: 0 30px; 
  }
  
}

.topborders {
  border: 2px solid rgba(47, 103, 158, 0.3);
  max-width: 3000px;
  border-radius: 0px;
  border-style: solid solid none solid;
  background-image: url('https://speephouse.neocities.org/images/background2.png');
  background-position: center bottom; /* Keeps the image centered */
  background-repeat: no-repeat;
  
  /* Choose one of the options below: */
  background-size: cover;    /* Stretches to fill & crops cleanly (Recommended) */
  /* background-size: contain;  Fits the whole image inside without cropping */
}
  

@media (min-width: 900px) {
  .nav {
    grid-column: col-start / span 3;
    max-height: 600px;
  }
  .content {
    grid-column: col-start 4 / span 9;
    grid-row: 2 / 4;
  }
  .footer {
    grid-column: col-start / span 12;
  }
  nav ul {
    flex-direction: column;
  }
  body {
    padding: 0 10%; 
  }
}

.footer {
  display: flex;
  align-items: center;
  justify-content: center;
}

body {
  color: rgb(47 103 158 / 0.8);
  font-family: GeistPixel, 'Courier New';
  /* Set your box size */
  width: 100%;
  height: 0px;           
  
  
  /* Set the path to your image */
  background-image: url('images/codethingies.gif');
  
  /* Forces the image to repeat horizontally and vertically */
  background-repeat: repeat; 
  
  /* Control how large each pattern unit is */
  background-size: 240px 240px; 
  animation: slidePattern 15s linear infinite;
}

@keyframes slidePattern {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0px 240px; /* Shift by the tile size */
  }
}

@keyframes slidePattern2 {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0px 94px; /* Shift by the tile size */
  }
}


.container {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  gap: 20px;
}

.button{
  font-family: 'Jersey';
  padding: 0;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: center;

  line-height: 1;
  
  gap: 3px;
  font-size: 20px;
  border-radius: 0px;
  border: 4px solid rgba(47, 103, 158, 0.3);
    padding: 5px;
  
  background-color: rgba(11, 22, 44, 0.5);
  transition: transform 0.3s ease;  
  cursor: pointer;
}

.button:hover {
  /* Scales the element to 1.1x (110%) its original size */
  transform: scale(1.05); 
  background-color: rgba(11, 22, 44, 1.0);
}






.infoloader {
  width: fit-content;
  font-weight: bold;
  font-family: 'Iceland';
  font-size: 45px;
  color:#2220;
  background:linear-gradient(90deg,#2f679e calc(50% - 0.5ch),#171963 0 calc(50% + 0.5ch),#2f679e 0) right/calc(200% + 1ch) 100%;
  -webkit-background-clip:text;
          background-clip:text;
  animation: l8 2s infinite steps(100);
}
.infoloader:before {
  content:"info"
}
@keyframes l8 {to{background-position: left}}



.blogsloader {
  width: fit-content;
  font-weight: bold;
  font-family: 'Iceland';
  font-size: 45px;
  color:#2220;
  background:linear-gradient(90deg,#2f679e calc(50% - 0.5ch),#171963 0 calc(50% + 0.5ch),#2f679e 0) right/calc(200% + 1ch) 100%;
  -webkit-background-clip:text;
          background-clip:text;
  animation: l8 3s infinite steps(90);
}
.blogsloader:before {
  content:"blogs"
}
@keyframes l8 {to{background-position: left}}

.no-underline {
    text-decoration: none;
}


.artloader {
  width: fit-content;
  font-weight: bold;
  font-family: 'Iceland';
  font-size: 45px;
  color:#2220;
  background:linear-gradient(90deg,#2f679e calc(50% - 0.5ch),#171963 0 calc(50% + 0.5ch),#2f679e 0) right/calc(200% + 1ch) 100%;
  -webkit-background-clip:text;
          background-clip:text;
  animation: l8 3s infinite steps(90);
}
.artloader:before {
  content:"art"
}
@keyframes l8 {to{background-position: left}}

.no-underline {
    text-decoration: none;
}



.custom-line {
  border: none;               /* Removes the default 3D border effect */
  height: 2px;                /* Controls the thickness of the line */
  background-color: rgba(47, 103, 158, 0.8);  /* Controls the line color */
  width: 100%;                 /* Controls the width (spans 100% by default) */
  margin: 10px auto;          /* Spacing above/below, and centers the line horizontally */
}