* {
  /* sets the height & width values to boxes' BORDER, not the inside CONTENT (default) */
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --pink: rgb(197, 103, 177);
  --light-pink: rgb(226, 80, 136);
  --dark-purple: rgb(88, 2, 60);
  --magenta: rgb(95, 2, 48);
  --dark: rgb(0, 0, 0);

}

body {
    background: fixed url(normal-bg3.gif) ;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-family: mononoki, consolas, Helvetica, sans-serif;
    text-align: center;
}

#navbar {
  padding: 2%;
  display: flexbox;
}

#link-button {
  border: 2px var(--magenta) solid;
  box-shadow: 3px 3px 10px var(--dark);
  border-radius: 10px;
  padding: 0.5em;
  color: rgb(255, 0, 140);
  font-weight: bold;
  position: relative; /* Needed for the pseudo-element positioning */
  background: none; /* Remove background from the main button */
  overflow: hidden; /* Ensures the pseudo-element doesn’t spill out */
}

#link-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(alt-bg.gif) center / cover no-repeat;
  filter: sepia(1) hue-rotate(300deg) saturate(3) brightness(0.7);
  z-index: -1; /* Ensures the background stays behind the button content */
  border-radius: inherit; /* Match the button's border-radius */
}

#bar {
    background: linear-gradient(
      0deg,
      var(--pink) 0%,
      var(--dark-purple) 100%
    );
    text-align: right;
    font-weight: bold;
    font-size: 12px;
    word-spacing: 10px;
    padding: 10px;
  }

  main {
    color: var(--dark);
    background: var(--pink);
    display: grid;
    grid-template-areas:
      "bar"
      "address"
      "microblog";
    grid-template-columns: 100%;
    grid-template-rows: auto;
    position: static;
    max-height: 80vh;
    max-width: 60vw;
    margin: auto;
    border: 2px  var(--magenta) solid;
    box-shadow: 3px 3px 10px var(--dark);
    border-radius: 10px;
    overflow-y: auto;
  }

  #address-bar {
    grid-area: address;
    padding: 1% 5%;
    font-weight: bold;
    display: flex;
    overflow: hidden;
    text-overflow: hidden;
    white-space: nowrap;
    line-height: 150%;
    font-size: 16px;
    border-bottom: 5px #4500534f solid;
  }

  #browser-icons {
    padding: 1%;
    text-align: center;
    font-size: 20px;
    display: inline-block;
    font-size: 20;
    
  }

  #address {
    font-weight: normal;
    margin-left: 30px;
    margin-right: 15px;
    padding: 1%;
    border: 1px solid var(--dark-purple);
    border-radius: 20px;
    background-color: rgb(253, 236, 255);
    width: 80%;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;


    
  }


  .url-like-input {
    flex: 1;
    /* ^^ fills available space in flexbox */
    color: #4b81bd;
    font-family: inherit;
    font-size: inherit;
    cursor: text;
    overflow: hidden;
    border: none;
    background: none;
    margin-right: 5px;
    margin-left: 3px;

  }

  .url-like-input:focus {
    outline: none;
  }


  #blog {
    grid-area: microblog;
    background: linear-gradient(
      0deg,
      rgb(151, 96, 133) 0%,
      var(--pink) 100%);
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    overflow-y: auto;
    margin: auto;
    padding: 1%;
  }


  article {
    margin: 5px;
    padding: 2%;
    border-radius: 10px;
    border: 1px solid transparent;
    transition-duration: 0.7s;
  }

  article:hover {
    background-color: var(--light-pink);
    border: 1px solid var(--dark-purple);
  }

  footer {
    padding: 10px;
  }