@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

/*boxes and position*/

.container {

   width: 788px;
   height: 1024px;

}

.sidebar {

   width: 320px;
   height: 1024px;
   display: flex;
   flex-direction: column;
   gap: 30px;
   box-shadow: 16px 0 52px 0 rgba(14, 24, 80, 0.2),
               -2px 0 4px 0 rgba(69, 79, 126, 0.02);

}

.header {

   display: flex;
   align-items: center;
   gap: 25px;
   padding: 15px;

}

.selection {

   display: flex;
   flex-direction: column;
   gap: 30px;
   padding-left: 0;

}

.push--right {

   margin-left: auto;
}

.list {

   margin: 20px;
}

.lower-buttons {

   margin-top: auto;
   display: flex;
   flex-direction: row;
   gap: 25px;
   padding: 15px;

}

footer {

   padding-left: 25px;
   margin-top: -20px;

}

.language {

   display: flex;
   flex-direction: row;
   gap: 30px;
   padding: 30px;
   padding-bottom: 50px;
   font-weight: 500;
   font-size: 16px;
}

/*typography*/

*{

   font-family: 'Roboto', sans-serif;

}

.button,
.logo {

   background-color: #FFFFFF;
   border: none;


}

li {

   list-style: none;

}

a,
p {

   color: #1B1C21;
   text-decoration: none;
   font-weight: 500;
   font-size: 16px;
   line-height: 24px;
   letter-spacing: -0.2px;

}

.current_page {

   color: #7E7E82;
   border-left: 4px solid #41F6D7;
   padding: 0 20px;
   margin: 0px;

}

.number {

   font-weight: 700;
   font-size: 24px;

}

/*size*/

.button {

   height: 40px;
   width: 40px;

}

.logo {

   height: 50.81px;
   width: 96.55px;

}

.current--language {

   color: #7E7E82;
}

/*transition*/

.button{

   transition:opacity 0.5s ease;
}

.button:hover,
.button:focus{

   opacity: .8;

}