/* <-----style-----> */


 body {
    font-family: "Consolas", "Lucida Console", "Monaco", "FourThreeSeven", monospace;
  }

@font-face {
    font-family: 'FourThreeSeven';
    font-style: normal;
    font-weight: 400;
    src:local("/fonts/FourThreeSevenMedium.ttf") format('truetype');
  }

  .usefont {
    font-family: "Consolas", "Lucida Console", "Monaco", "FourThreeSeven", monospace;
    line-height: 100%; /* prevent horizontal stripes/vertical gaps */
  }

:root {
  --bg-color: #353839; /* #FEFEFA */
  --txt-color: #fefefa;
  --bttn-bg: #999;
  --bttn-txt:#fefefa;
  padding: 25px;
  background-color: var(--bg-color);
  color: var(--txt-color);
  font-size: 25px;
}

/* html.lightMode {
  --bg-color: #353839;
  --txt-color: white;
  --bttn-bg: #333;
  --bttn-txt: white;
  background-color: var(--bg-color);
  color: var(--txt-color);
} */

.links-container,
.peripheral-container {
opacity: 0;
transition: opacity 1s ease-in-out;
}

.links-container.loaded,
.peripheral-container.loaded {
  opacity: 1;
}

.links-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin-top: 10px;
  justify-content: space-evenly;
}

.peripheral-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin-top: 10px;
  justify-content: space-evenly;
  font-size: 20px;
  }

.socialsButton {
  border: none;
  background: none;
  width: 300px;
  padding: 20px 0;
  font-size: 20px;
  text-align: center;
  color: var(--bttn-txt);
  border-radius: 15px;
}

.barTop-container {
 overflow: hidden;
 display: flex;
 justify-content: center;
 align-items: center;
 margin-bottom: 20px;
}

.barTop-container a {
display: flex;
justify-content: center;
align-items: center;
width: 200px;

}

.barTop-container button {
border: none;
background: none;
color: var(--bttn-txt);
}