*{margin:0;padding:0;box-sizing:border-box;font-family:sans-serif;}

body{
  background:#000;
  color:#fff;
}

/* NAVBAR */
.navbar{
  height:70px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 40px;
  background:#111;
}

.account-panel {
  display: flex;
  gap: 50px; /* odstępy między elementami */
  align-items: center;
}


/* MAIN */
main{
  min-height:calc(100vh - 70px);
  display:flex;
  gap:20px;
  padding:20px 40px;
}

/* BLOKI */
.content{
  flex:12;
  background:#111;
  padding:20px;
  border-radius:15px;
}

.panel {
    margin-bottom: 15%;
}

.sidebar{
    display:block;
    justify-content: center;
  flex:1;
  background:#111;
  padding:2%;
  border-radius:15px;
}

.account{
  flex:1;
  background:#111;
  padding:20px;
  border-radius:15px;
}

/* SCROLL */
.scroll-box{
  max-height:300px;
  overflow:auto;
  margin-top:10px;
}

.scroll-box-updates{
  max-height:300px;
  overflow:auto;
  height: 50%;
  margin-top:10px;
  width: 30%;
}

.banner_image {
  width: 100%;
  height: 33%;

  object-fit: cover;
  object-position: 0% 53%;
}


form {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* FORM */
input{
  width:90%;
  padding:10px;
  border-radius:8px;
  border:none;
  background:#222;
  color:#fff;
}

button{
  width:60%;
  padding:10px;
  align-self: center;
  background:#fff;
  color:#000;
  border:none;
  border-radius:8px;
}

/* FOOTER */
.footer{
  display:flex;
  justify-content:space-between;
  padding:40px;
}

.footer .center{
  text-align:center;
}

.footer .right{
  text-align:right;
}

.update-form {
  display: inline-grid;
  width: 80%;
  height: 30%;;
}

.update-form p {
  padding: 10px;
}

.update-form input, textarea, button {
  margin: 1%;
  color:white;
  
  background-color: black;
}

.main-container {
  width: 99%;
  height: 90%;
  display: flex;
  flex-direction: column; /* ustawienie elementów jeden pod drugim */
  justify-content: center; /* centrowanie w pionie */
  align-items: center; /* centrowanie w poziomie */
}
/* AVATAR */
.avatar{
  width:40px;
  border-radius:50%;
  margin-bottom:10px;
}

/* RESPONSIVE */
@media(max-width:900px){
  main{
    flex-direction:column;
  }
}

a {
    color:white;
}

.google-sans-bold {
  font-family: "Google Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-variation-settings:
    "GRAD" 0;
}