javascript html css onclick css-position

Element misaligns on small width

An element on my site misaligns once the overall width is small enough, it gets under the desired, gradually further the smaller the width. The element it the Discord button, a div with #dciconid. The intention is, that once the button is clicked, it changes its form, revealing a discord user tag. The whole thing has width described in vw, so I don't think that is or should be the problem. So far, I had tried:

making the child elements inline-block;
Absolutely centering the element inside a position: relative div container (current site's state);
Removing the flex property;
Changing fonts.

Also, other buttons seem to not regulate their width and height parameters, eventually resulting in overflowing from their container (div.footerblock(2)), which is a problem too .

Refer to the snippet below.

Here is the original.

PS If possible, please, tell me if the CSS code is esthetical and what I can correct. Thank you!

function discordAnim()
{
    if(document.getElementById('dcicon').classList.contains('discordicontransformed') == false)
    {
        document.getElementById('footerimagediscord').classList.add('invert');
        document.getElementById('dcolor').classList.remove('colora');
        document.getElementById('dcolor').classList.add('colorb');
        document.getElementById('dcicon').classList.remove('discordicon');
        document.getElementById('dcicon').classList.add('discordicontransformed');
    }
    else
    {
        document.getElementById('footerimagediscord').classList.remove('invert');
        document.getElementById('dcolor').classList.remove('colorb');
        document.getElementById('dcolor').classList.add('colora');
        document.getElementById('dcicon').classList.add('discordicon');
        document.getElementById('dcicon').classList.remove('discordicontransformed');
    }
}

footer {
  display: flex;
  width: 100%;
  min-height: 3vw;
  background-color: antiquewhite;
}

div.footerblock:nth-of-type(1) {
  justify-content: left;
}

div.footerblock:nth-of-type(2) {
  justify-content: right;
}

div.footerblock {
  min-height: inherit;
}

*[class*="footer"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  border-left: 0.1vw
}

div.footerblock:last-child {
  margin-right: 3vw;
}

a:not(a[id], #banner p a, nav div.buttons a, main div.contents p a) {
  display: contents;
  text-decoration: none;
  color: #4C00FF;
}

#dcicon {
  cursor: pointer;
}

div.footerblock:nth-of-type(2) div.discordicon {
  width: 1.75vw;
  height: 1.75vw;
  margin-right: 1.75vw;
}

div#dcolor {
  width: 1.75vw;
  height: 1.75vw;
  border-radius: 50%;
}

.imagery1:hover,
main div.contents a,
*[class*="marker"],
*[class*="footerimage_"],
*[class*="footerimage_"]:hover,
#banner p a,
#banner p a:hover,
div.england,
div.poland,
div.england:hover,
div.poland:hover,
div.colora,
div.colora:hover {
  transition-duration: 0.15s;
  transition-timing-function: ease-out;
}

div.footerblock:nth-of-type(2) img:not(div.discordicontransformed img) {
  width: 1.75vw;
  height: 1.75vw;
  margin-right: 1.75vw;
  border-radius: 50%;
}

div.footerblock:nth-of-type(2) div.discordicon img {
  margin-right: 0;
}

div.discordicon p {
  display: none;
}

div.footerblock p {
  margin: 0;
  margin-left: 6vw;
  font-family: monospace;
  font-size: 0.75vw;
}

div.discordicontransformed {
  display: flex;
  justify-content: left;
  align-items: center;
  width: initial;
  height: 1.75vw;
  background-image: url('https://shatterwares.com/RESOURCES/SHWHP_RES/gradients/gradient-discord.png');
  background-size: 100% 100%;
  padding: 0.25vw;
  margin-right: 1.75vw;
  border-radius: 5vw;
}

div.colorb {
  width: 1.725vw !important;
  width: 1.725vw !important;
}

div.discordicontransformed img {
  width: 1.725vw;
  height: 1.725vw;
  margin-right: 0;
  border-radius: 50%;
}

.invert {
  filter: invert(1);
}

div.footerblock:nth-of-type(2) div.discordicontransformed p {
  display: block;
  font-family: monospace;
  font-size: 0.75vw;
  color: white;
  margin: 0 0.4vw;
}

<html>

<head>
  <meta charset="UFT-8">
</head>

<body>
  <footer>
    <div class="footerblock">
      <p class="english">
        © 2023 Jakub Namyślak. All rights reserved.
      </p>
      <p class="polish">
        © 2023 Jakub Namyślak. Wszelkie prawa zastrzeżone.
      </p>
    </div>
    <div class="footerblock">
      <a href="mailto:kawkayt7@gmail.com" target="_blank">
        <img class="footerimage_mail" src="https://shatterwares.com/RESOURCES/PRIMARY/mail.jpg" alt="spotify">
      </a>
      <div class="discordicon" id="dcicon" onclick="discordAnim()">
        <img id="footerimagediscord" src="https://shatterwares.com/RESOURCES/PRIMARY/discord.png" alt="spotify">
        <p>soup can#7318</p>
      </div>
      <a href="https://open.spotify.com/user/31ytzqdvaeubfcjjitrinmaba52q" target="_blank">
        <img class="footerimage_spotify" src="https://shatterwares.com/RESOURCES/PRIMARY/spotify.png" alt="spotify">
      </a>
      <a href="https://www.youtube.com/channel/UCkGfjx-MIcuONgvoYGDgP9w" target="_blank">
        <img class="footerimage_youtube" src="https://shatterwares.com/RESOURCES/PRIMARY/youtube.png" alt="youtube">
      </a>
      <a href="https://steamcommunity.com/id/wechanged" target="_blank">
        <img class="footerimage_steam" src="https://shatterwares.com/RESOURCES/PRIMARY/steam.png" alt="steam">
      </a>
      <a href="https://github.com/jakubekgranie/projecthub.github.io" target="_blank">
        <img class="footerimage_github" src="https://shatterwares.com/RESOURCES/PRIMARY/github.png" alt="github">
      </a>
    </div>
  </footer>
</body>

</html>

Solution

I made a lot of changes here which I think are fairly intuitive. Basically, strive to do a few things with the goal of simplification:

Don't over-apply styles. Your asterisk selectors are problematic because they cover more elements than they should.
Strive to make your CSS reusable. This means avoiding hyper-specific selectors like :nth-child(2) and IDs. Use custom classes instead.
Use a button for action elements, not divs.
Create variables for elements which you select more than once in your JavaScript.

function discordAnim() {
  const footerimagediscord = document.getElementById('footerimagediscord');
  const dcolor = document.getElementById('dcolor');
  const dcicon = document.getElementById('dcicon');

  if (!document.getElementById('dcicon').classList.contains('discordicontransformed')) {
    footerimagediscord.classList.add('invert');
    dcolor.classList.remove('colora');
    dcolor.classList.add('colorb');
    dcicon.classList.remove('discordicon');
    dcicon.classList.add('discordicontransformed');
  } else {
    footerimagediscord.classList.remove('invert');
    dcolor.classList.remove('colorb');
    dcolor.classList.add('colora');
    dcicon.classList.add('discordicon');
    dcicon.classList.remove('discordicontransformed');
  }
}

footer {
  display: flex;
  width: 100%;
  min-height: 3vw;
  background-color: antiquewhite;
}

.justify-left {
  justify-content: left;
}

.justify-right {
  justify-content: right;
}

.footerblock {
  min-height: inherit;
  display: flex;
  align-items: center;
}

.footerblock:last-child {
  margin-left: auto;
  margin-right: 3vw;
}

a:not(a[id], #banner p a, nav div.buttons a, main div.contents p a) {
  display: contents;
  text-decoration: none;
  color: #4C00FF;
}

.discordicon-btn {
  border: 0;
  background: 0;
  padding: 0;
  display: flex;
}

.footerblock:nth-of-type(2) .discordicon {
  width: 1.75vw;
  height: 1.75vw;
  margin-right: 1.75vw;
}

#dcolor {
  width: 1.75vw;
  height: 1.75vw;
  border-radius: 50%;
}

.imagery1:hover,
main div.contents a,
*[class*="marker"],
*[class*="footerimage_"],
*[class*="footerimage_"]:hover,
#banner p a,
#banner p a:hover,
div.england,
div.poland,
div.england:hover,
div.poland:hover,
div.colora,
div.colora:hover {
  transition-duration: 0.15s;
  transition-timing-function: ease-out;
}

.footerblock:nth-of-type(2) img:not(div.discordicontransformed img) {
  width: 1.75vw;
  height: 1.75vw;
  margin-right: 1.75vw;
  border-radius: 50%;
}

.footerblock:nth-of-type(2) div.discordicon img {
  margin-right: 0;
}

.discordicon p {
  display: none;
}

.footerblock p {
  margin: 0;
  margin-left: 6vw;
  font-family: monospace;
  font-size: 0.75vw;
}

.discordicontransformed {
  display: flex;
  justify-content: left;
  align-items: center;
  width: initial;
  height: 1.75vw;
  background-image: url('https://shatterwares.com/RESOURCES/SHWHP_RES/gradients/gradient-discord.png');
  background-size: 100% 100%;
  padding: 0.25vw;
  margin-right: 1.75vw;
  border-radius: 5vw;
}

.colorb {
  width: 1.725vw !important;
  width: 1.725vw !important;
}

.discordicontransformed img {
  width: 1.725vw;
  height: 1.725vw;
  margin-right: 0;
  border-radius: 50%;
}

.invert {
  filter: invert(1);
}

.footerblock:nth-of-type(2) div.discordicontransformed p {
  display: block;
  font-family: monospace;
  font-size: 0.75vw;
  color: white;
  margin: 0 0.4vw;
}

<body>
  <footer>
    <div class="footerblock justify-left">
      <p class="english">
        © 2023 Jakub Namyślak. All rights reserved.
      </p>

      <p class="polish">
        © 2023 Jakub Namyślak. Wszelkie prawa zastrzeżone.
      </p>
    </div>

    <div class="footerblock justify-right">
      <a href="mailto:kawkayt7@gmail.com" target="_blank">
        <img class="footerimage_mail" src="https://shatterwares.com/RESOURCES/PRIMARY/mail.jpg" alt="spotify">
      </a>

      <button class="discordicon-btn" id="dcicon" onclick="discordAnim()">
        <img id="footerimagediscord" class="discordicon" src="https://shatterwares.com/RESOURCES/PRIMARY/discord.png" alt="spotify">
      </button>

      <a href="https://open.spotify.com/user/31ytzqdvaeubfcjjitrinmaba52q" target="_blank">
        <img class="footerimage_spotify" src="https://shatterwares.com/RESOURCES/PRIMARY/spotify.png" alt="spotify">
      </a>

      <a href="https://www.youtube.com/channel/UCkGfjx-MIcuONgvoYGDgP9w" target="_blank">
        <img class="footerimage_youtube" src="https://shatterwares.com/RESOURCES/PRIMARY/youtube.png" alt="youtube">
      </a>

      <a href="https://steamcommunity.com/id/wechanged" target="_blank">
        <img class="footerimage_steam" src="https://shatterwares.com/RESOURCES/PRIMARY/steam.png" alt="steam">
      </a>

      <a href="https://github.com/jakubekgranie/projecthub.github.io" target="_blank">
        <img class="footerimage_github" src="https://shatterwares.com/RESOURCES/PRIMARY/github.png" alt="github">
      </a>
    </div>
  </footer>
</body>