@import url('https://fonts.googleapis.com/css2?family=Abel&family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Rubik+Mono+One&display=swap');

::-webkit-scrollbar {
    width: 7px;
}
  
/* Track */
::-webkit-scrollbar-track {
    border-radius: 0px;
    background: rgba(3, 0, 0, 0.404);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #4b7bff;
    border-radius: 0px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #3936ff; 
}

html, body, #main{
    min-height: 100% !important;
    height: 100%;
}

body {
    overflow: hidden; 
    margin: 0;
    background: linear-gradient(90deg, #000B42 1.17%, #2200B9 100%);
}

section {
    height: 50vh;
    scroll-snap-align: start;
}

#main {
    display: grid;
}

.contents {
    scroll-snap-type: y mandatory;
    scroll-margin-bottom: 500px;
    margin: auto;
    width: 100%;
    height: 50vh;
    overflow: auto;
}

.pfp {
    width: 250px;
    height: 250px;
    margin: 25px;
    border-radius: 14px 123px 59px 13px;
    object-fit: cover;
    box-shadow: 16px 17px 14.1px 6px rgba(0, 0, 0, 0.25);
}

.intro {
    color: white;
    font-family: "Rubik Mono One";
    background: linear-gradient(332deg, #696EFF -47.44%, #000240 46.37%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.about {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background: linear-gradient(332deg, #000240 17.75%, #696EFF 111.55%);
}

.about h1 {
    color: #FFF;
    font-family: "Anonymous Pro";
    font-size: 64px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.about p {
    color: #FFF;
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.hobbies {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(237deg, #400001 -3.21%, #FD69FF 183.08%);
}

.hobbies h1 {
    color: #FFF;
    font-family: "Anonymous Pro";
    font-size: 64px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.hobbies li {
    color: #FFF;
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.skills {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(188deg, #1D0040 -34.33%, #69FF85 332.11%);
}

.skills h1 {
    color: #FFF;
    font-family: "Anonymous Pro";
    font-size: 64px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.skills li {
    color: #FFF;
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.experience {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background: linear-gradient(134deg, #2A4000 -5.34%, #FF9E69 207.28%);
}

.experience h1 {
    color: #FFF;
    font-family: "Anonymous Pro";
    font-size: 64px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.experience p {
    color: #FFF;
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.outro {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(332deg, #000240 17.75%, #696EFF 111.55%);
}

.outro h1 {
    color: #FFF;
    font-family: "Anonymous Pro";
    font-size: 64px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.outro p {
    color: #FFF;
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}