*{
  box-sizing: border-box;
}

body{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-image: url("images/background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: var(--grey);

  --grey: #8F948C;
  --BG: rgba(0, 0, 0, 0.867);
}

#main{
  height: 100vh;
  width: 100vw;
  /* background-color: aqua; */
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr 7fr 0.5fr;
}

#header{
  height: 100%;
  width: 100%;
  background-color: var(--BG);
  display: flex;
  flex-direction: row;
  padding: 2vh;
  justify-content: space-evenly;
  gap: 2vh;
  align-items: center;
}

#logo{
  background-image: url("images/logo.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  height: 75%;
  aspect-ratio: 1;
  /* flex: 1 */
}

#titleContainer{
  flex: 5;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

#title{
  font-size: 2rem;
  font-weight: bold;
}

#subtitle{

}

#navbar{
  display: flex;
  flex-direction: column;
  padding: 1vh;
  gap: 1vh;
  flex: 0;
}

.navButton{
  height: 100%;
  width: 100%;
  padding: 1vh;
  background-color: var(--BG);
  color: var(--grey);
}

.navButton:hover{
  height: 100%;
  width: 100%;
  color: var(--BG);
  background-color: var(--grey);
}

#content{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

#contentText{
  height: fit-content;
  width: fit-content;
  background-color: var(--BG);
  display: flex;
  flex-direction: column;
  padding: 2vh;
  align-items: center;
  gap: 1vh;
  border-radius: 0.5vh;
}

#footer{
  height: 100%;
  width: 100%;
  background: var(--BG);
}

.cookie-popup {
  display: none;
  position: fixed;
  bottom: 1vh;
  background-color: black;
  padding: 10px 20px;
  border-radius: 5px;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1vh;
  margin: 0 auto;
  left: 50%;
  transform: translateX(-50%);
  width: 75%;
  text-align: center;
}

.cookie-popup button {
  color: var(--BG);
  background: var(--grey);
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 3px;
  width: 100%;
}

button{
  border-radius: 0.25vh;
  border: 0;
}

button:hover{
  background: #cfc9c9;
}

.bankRow{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.bankRow > *{
  width: 100%;
  text-align: center;
  background: var(--grey);
  color: var(--BG);
  padding: 0.5vh;
  border-radius: 0.5vh 0.5vh 0 0;
}

.bankRow > *:nth-child(2){
  font-size: 1.5rem;
  font-weight: bold;
  background: white;
  border-radius: 0 0 0.5vh 0.5vh;
}

.bankRow > *:nth-child(2):hover{
  font-size: 1.5rem;
  font-weight: bold;
  background: var(--grey);
}

.copied {
  background-color: green;
}