Estilo de Página com Gradiente e Scroll Personalizado

Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;700&display=swap');
body {
 background: linear-gradient(236.85deg, #041832 27.26%, #3468A7 96.03%); font-family: 'Roboto', sans-serif;
}
.container {
 margin: 64px;
 background: #ECF4FF;
 color: #1C1C1C;
 border-radius: 20px;
 padding: 64px;
 box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
}
.cabecalho {
 display: flex;
 justify-content: space-between;
}
.perfil {
 display: flex;
}
.perfil-foto {
 max-width: 160px;
 border-radius: 460px;
 box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
}
.titulo {
 margin-left: 16px;
}
.titulo h1 {
 font-weight: 700;
 font-size: 36px;
}
.titulo h3 {
 font-weight: normal;
 font-size: 24px;
}
.tema button {
 align-self: flex-end;
 font-size: 16px;
 padding: 8px 16px;
 background: #ECF4FF;
 box-sizing: border-box;
 border-radius: 100px;
 border: 2px solid #0E1D2F;
}
.portfolio {
 margin-top: 64px;
 display: grid;
 grid-template-columns: 2fr 1fr;
 gap: 16px;
}
.projetos {
 max-height: 300px;
 overflow-y: scroll;
 scrollbar-width: thin;
 display: flex;
 flex-direction: column;
 padding: 8px 32px;
 background: linear-gradient(230.65deg, #499CFE 27.49%, #9CC8FC 83.19%);
 border-radius: 20px;
 box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
}
.conquistas {
 height: 300px;
 overflow-y: scroll;
 	scrollbar-width: thin;
 display: flex;
 flex-direction: column;
 align-items: center;
 padding: 8px 32px;
 background: linear-gradient(230.65deg, #499CFE 27.49%, #9CC8FC 83.19%);
 border-radius: 20px;
 box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
}
.projetos ul {
 list-style: none;
 padding-left: 0;
 font-weight: 700;
 font-size: 24px;
}
.projetos li {
 list-style-type: none;
 font-size: 20px;
 line-height: 2em;
}
.conquistas ul {
 list-style: none;
 padding-left: 0;
 font-weight: 700;
 font-size: 24px;
}
.conquistas li {
 list-style-type: none;
}
.conquistas img {
 max-height: 100px
}
.dark {
 background: linear-gradient(236.85deg, #375B86 27.26%, #6B87A9 96.03%);
}
 
.dark .container {
 background: #333439;
 color: #F6F6F6;
}
.dark .portfolio {
 color: #1C1C1C;
}
.dark .tema button {
 color: #FFFFFF;
 background: #1C1C1C;
 box-sizing: border-box;
 border-radius: 100px;
 border: 2px solid #F7F7F7;
}
::-webkit-scrollbar{
width: 5px;
height: 5px;
}
::-webkit-scrollbar-thumb{
background: #1C1C1C;
border: 1.8px solid #1C1C1C;
border-radius: 100px;
}
::-webkit-scrollbar-thumb:hover{
background: #ECF4FF;
}
::-webkit-scrollbar-track{
background: #ECF4FF;
border-radius: 100px;
box-shadow: inset 0px 0px 0px 0px #F0F0F0;
margin: 15px 0px;
}