*{
margin: 0px;
padding: 0px;
}

:Root{
--none: rgba(0,0,0,0);
--black: black;
--black_90_op: rgba(26, 26, 26, 0.9);
--black_80_op: rgba(26, 26, 26, 0.8);
--black_70_op: rgba(26, 26, 26, 0.7);
--black_60_op: rgba(26, 26, 26, 0.6);
--black_50_op: rgba(26, 26, 26, 0.5);
--black_40_op: rgba(26, 26, 26, 0.4);
--black_30_op: rgba(26, 26, 26, 0.3);
--black_20_op: rgba(26, 26, 26, 0.2);
--black_10_op: rgba(26, 26, 26, 0.1);
--black_5_op: rgba(26, 26, 26, 0.05);
--white: white;
--white_90_op: rgba(255, 255, 255, 0.9);
--white_80_op: rgba(255, 255, 255, 0.8);
--white_70_op: rgba(255, 255, 255, 0.7);
--white_60_op: rgba(255, 255, 255, 0.6);
--white_50_op: rgba(255, 255, 255, 0.5);
--white_40_op: rgba(255, 255, 255, 0.4);
--white_30_op: rgba(255, 255, 255, 0.3);
--white_20_op: rgba(255, 255, 255, 0.2);
--white_10_op: rgba(255, 255, 255, 0.1);
--white_5_op: rgba(255, 255, 255, 0.05);
--main: #1467E3;
--main_90 : rgba(20, 103, 227, 0.9);
--main_80 : rgba(20, 103, 227, 0.8);
--main_70 : rgba(20, 103, 227, 0.7);
--main_60 : rgba(20, 103, 227, 0.6);
--main_50 : rgba(20, 103, 227, 0.5);
--main_40 : rgba(20, 103, 227, 0.4);
--main_30 : rgba(20, 103, 227, 0.3);
--main_20 : rgba(20, 103, 227, 0.2);
--main_10 : rgba(20, 103, 227, 0.1);
--main_05 : rgba(20, 103, 227, 0.05);
--font_size_lgr : 3rem;
--font_size_lg : 2rem;
--font_size_md : 1.5rem;
--font_size_sm : 1rem;
--font_size_tiny : 0.8rem;
--font_weight_lg : 700;
--font_weight_md : 500;
--font_weight_sm : 300;
}
html{
font-family: 'Poppins', sans-serif;
scroll-behavior: smooth;
}
body {
overscroll-behavior-y: none;
overflow-y: scroll;
scroll-snap-type: y proximity;
caret-color: var(--main);
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
background-color: var(--black);

}
body::-webkit-scrollbar{
display: none;
}

#dashboard{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: auto;
}
#header{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: auto;
    padding: 5vh 0px;
}
#dashboard img{
    height: 150px;
    width: 150px;
    align-items: center;
    border-radius: 100px;
    object-fit: cover;
    margin-bottom: 2.5vh;
}

#dashboard h1,h2{
    color: var(--white);
    text-align: center;
    margin: 0px;
}
#dashboard h2{
    font-weight: var(--font_size_sm);
    margin-bottom: 2.5vh;
}
#socialIcons{
      display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: auto;
    height: 5vh;
}
#socialIcons img{
    height: 100%;
    width: auto;
    margin: 0px 10px;
    transition: 0.3s;
}
#socialIcons img:hover{
    opacity: 0.5;
    cursor: pointer;
}

#linksContainer{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: auto;
}
.linksList{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 40%;
    height: auto;
    margin-bottom: 2vh;
}
.linksList p{
    color: var(--white);
    margin-bottom: 1.5vh;
}
.linkContainer{
    background-color: var(--white_20_op);
    width: 100%;
    height: 8vh;
    border-radius: 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5vh;
    transition: 0.3s;
}
.linkContainer:hover{
    background-color: var(--white_10_op);
    cursor: pointer;
}
.linkContainer a{
    text-decoration: none;
    color: var(--white);
}
@media (max-width: 600px) {
  .linksList {
    width: 90%; 
  }
}