*{
    box-sizing: boarder-box;
    margin: 1px;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
  }

body {
color: white;
}

h1{
color: white;
}
 
body {
  background-color: black;
}

header {
display:flex;
align-items:center ;
justify-content: space-between;
padding: 0;
gap: 0;
}

.nav-container {
display: flex;
align-items: center;
gap: 0;
}

.img-button {
border: none;
background: transparent;
cursor: default;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.wrapper {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.content{
width: 52.5%;
height: 72.65%;
position: absolute;
background: white;
justify-content: center;
align-items: center;
flex-direction: column;
opacity: 0;
transition: 0.25s;
}

.content:hover {
opacity: 0.85;
}

.content h1{
font-size: 45px;
color: black;
margin-bottom: 15px;
}

.content p{
position: absolute;
top: 35%;
width: 100%;
text-align: center;
font-size: 40px;
font-family: robot, sans-serif;
color:gray;
}

.content > *{
transform: translateY(25px);
transition: transform 0.25s;
}

.NAVIGATION_TEXT{
color: var(--color-highlight);
text-decoration: none;
cursor: default;
}

.NAVIGATION_TEXT:hover {
color: grey;
text-decoration: none;
cursor: default;
}