How to set 100% opacity of this element?

Question

I am beginner in Web Development and I'm creating my first site. I want to set the visible of class .maintitle (with text Jakub Poznanski) on 100% every time, but it's coliding with hover options for a list when opacity is set on 0.6. Anyone know how to fix this issue? Code and github link under. + If you have any advices for me i am open

GitHub link: https://github.com/Vorhacz/HTML-CSS/tree/main/websiteCV

* {
  transition: 300ms;
  margin: 0;
  padding: 0;
  font-family: 'Century Gothic', sans-serif;
  box-sizing: border-box;
}

body {
  background: black;
  color: white;
}

.logo-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 100px;
}

.logo {
  width: 300px;
  height: auto;
}

.underlogotext {
  display: flex;
  justify-content: left;
  font-family: 'Dancing Script';
  font-size: 19px;
  font-style: italic;
  margin-top: 10px;
}

#header {
  width: 100%;
  height: 100vh;
  background-image: url(images/background.png);
  background-size: cover;
  background-position: center;
}

.container {
  padding: 10px, 10%;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.maintitle a {
  opacity: 1;
  font-size: 110%;
  color: #bed6ff;
}

nav ul li {
  display: inline-block;
  list-style: none;
  margin-top: 30px;
  margin-left: 30px;
}

nav ul li a {
  font-weight: 400;
  color: #e5eafc;
  text-decoration: none;
  border-radius: 100px;
  cursor: pointer;
}

nav ul li a:hover {
  color: #bed6ff;
}

nav ul li a:not(:hover) {
  opacity: 0.6;
}

<div id="header">
  <div class="container">
    <nav>
      <ul>
        <li class="maintitle"><a href="#">Jakub Poznański</a></li>
        <li><a href="#">O mnie</a></li>
        <li><a href="#">Umiejętności</a></li>
        <li><a href="#">Doświadczenie</a></li>
        <li><a href="#">Kontakt</a></li>
      </ul>
    </nav>
  </div>
  <div class="logo-container">
    <div class="logo">
      <img class="logo" src="images/logo.png">
      <p class="underlogotext">Tutaj będzie jakiś mądry opis</p>
    </div>
  </div>
</div>

Answer 1

* {
  transition: 300ms;
  margin: 0;
  padding: 0;
  font-family: 'Century Gothic', sans-serif;
  box-sizing: border-box;
}

body {
  background: black;
  color: white;
}

.logo-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 100px;
}

.logo {
  width: 300px;
  height: auto;
}

.underlogotext {
  display: flex;
  justify-content: left;
  font-family: 'Dancing Script';
  font-size: 19px;
  font-style: italic;
  margin-top: 10px;
}

#header {
  width: 100%;
  height: 100vh;
  background-image: url(images/background.png);
  background-size: cover;
  background-position: center;
}

.container {
  padding: 10px, 10%;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.maintitle a {
  opacity: 1;
  font-size: 110%;
  color: #bed6ff;
}

nav ul li {
  display: inline-block;
  list-style: none;
  margin-top: 30px;
  margin-left: 30px;
}

nav ul li a {
  font-weight: 400;
  color: #e5eafc;
  text-decoration: none;
  border-radius: 100px;
  cursor: pointer;
}

nav ul li a:hover {
  opacity: 1;
  color: #bed6ff;
}

nav ul li a {
  opacity: 0.6;
}

<div id="header">
  <div class="container">
    <nav>
      <ul>
        <li class="maintitle"><a href="#">Jakub Poznański</a></li>
        <li><a href="#">O mnie</a></li>
        <li><a href="#">Umiejętności</a></li>
        <li><a href="#">Doświadczenie</a></li>
        <li><a href="#">Kontakt</a></li>
      </ul>
    </nav>
  </div>
  <div class="logo-container">
    <div class="logo">
      <img class="logo" src="images/logo.png">
      <p class="underlogotext">Tutaj będzie jakiś mądry opis</p>
    </div>
  </div>
</div>

I think you should change two of your last css styles like in my modifications of your example.

On the moderator's demand just a little explanation on the issue.

The “a” element that comprises “Jakub Poznanski” text has got under influence of two css rules simultaneously - with a selector “.maintitle a” and “nav ul li a:not(:hover)”. With the first rule 1-point opacity was applied to the a-element with Jakub Poznanski text, at the same time with the second one opacity of the a-element with the text was reset to 0.6 this way discarding initial opacity setting of the first rule. So my changes of the last two css rules corrected the situation.