:root {
    --accent-color: #8f47ff;
    --accent-color-10: rgba(143, 71, 255, 0.1);
    --accent-color-50: rgba(143, 71, 255, 0.5);
    --accent-color-90: rgba(143, 71, 255, 0.9);
    --text-color: #f8f9fa;

    --text-color-dim: #d2d2d3;

    --text-alternate-color: #191919;
    --text-alternate-color-dim: #434343;
    --text-dim-color: #a9a9a9;

    --tint: rgba(92, 92, 92, 0.5);

    --primary-color: rgb(78, 46, 207);
    --primary-color-10: rgba(78, 46, 207, 0.1);
    --primary-color-50: rgba(78, 46, 207, 0.5);
    --primary-color-90: rgb(78, 46, 207, 0.9);
    --secondary-color: #1d1d42;

    --success-color: #38d077;
    --error-color: #f44336;
    --info-color: #ff9800;

    /*dimensions*/
    --m0: 5px;
    --m1: 10px;
    --m2: 20px;
    --m3: 30px;
    --m4: 40px;
    --m5: 50px;

    /*fonts*/
    --font-xxlarge: 40px;
    --font-xlarge: 30px;
    --font-large: 20px;
    --font-medium: 16px;
    --font-small: 14px;

    /*shadows*/
    --shadow: rgba(0, 0, 0, 0.44) 0 0 10px 5px;
    --shadow-alternate: rgba(78, 46, 207, 0.56) 0px 0 10px 5px;

    --temp-1: dodgerblue;
    --temp-2: green;
    --temp-3: purple;
}

::-webkit-scrollbar {
    width: 0;
    height: 0;
}

::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    border-radius: 5px;
}

::-webkit-scrollbar-track {
    background-color: var(--secondary-color);
}

::-webkit-scrollbar-track:hover {
    background-color: var(--secondary-color);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent-color);
}

* {
    /*outline: 1px solid red;*/
  -webkit-tap-highlight-color: transparent;
}

body {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    color: var(--text-color);
    /*background-color: var(--secondary-color);*/
    background: var(--secondary-color) radial-gradient(rgba(255, 255, 255, 0.19) 10%, transparent 1%);
    background-size: 11px 11px;
    font-family: "Manrope", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

body.pattern1 {

}

p {
    padding: 0;
    margin: 0;
}

.main-layout {
    width: 100%;
    height: 100dvh;
    overflow-y: scroll;
    scroll-behavior: smooth;
    
    @media screen and (min-width: 800px) {
        overflow: auto; /* Allow scrolling but we'll control it with JS */
    }
}

.sections {
    width: 100%;
    border-bottom: 1px solid transparent;
    position: relative;
    
    @media screen and (min-width: 800px) {
        height: 100dvh;
        overflow-y: auto; /* Allow scrolling within sections */
    }
}

#section-home {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .content {

    }

    .bottom {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60px;
        overflow: hidden;

        @media screen and (max-width: 800px) {
            display: none;
        }
    }
}

#section-about {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: scroll;

    .section2-scroll-btn {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60px;
        overflow: hidden;

        @media screen and (max-width: 800px) {
            display: none;
        }
    }
}

#section-projects {
    @media screen and (min-width: 800px) {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }


    .section3-scroll-btn {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60px;
        overflow: hidden;

        @media screen and (max-width: 800px) {
            display: none;
        }
    }
}

#section-contact {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: var(--m1);

    @media screen and (max-width: 800px) {
        height: 100dvh;
    }
}