:root {
    --standerd-font-font-family: "Raleway", Helvetica;
    --standerd-font-font-weight: 600;
    --standerd-font-font-size: 32px;
    --standerd-font-letter-spacing: 0px;
    --standerd-font-line-height: 125%;
    --standerd-font-font-style: normal;
    --RIASEC-head-1-font-family: "Raleway", Helvetica;
    --RIASEC-head-1-font-weight: 900;
    --RIASEC-head-1-font-size: 64px;
    --RIASEC-head-1-letter-spacing: 0px;
    --RIASEC-head-1-line-height: normal;
    --RIASEC-head-1-font-style: normal;
    --head-center-font-family: "Raleway", Helvetica;
    --head-center-font-weight: 700;
    --head-center-font-size: 36px;
    --head-center-letter-spacing: 0px;
    --head-center-line-height: normal;
    --head-center-font-style: normal;
    --card-title-font-family: "Raleway", Helvetica;
    --card-title-font-weight: 400;
    --card-title-font-size: 18px;
    --card-title-letter-spacing: 0px;
    --card-title-line-height: 20px;
    --card-title-font-style: normal;
    --card-body-font-family: "Raleway", Helvetica;
    --card-body-font-weight: 400;
    --card-body-font-size: 12px;
    --card-body-letter-spacing: 0px;
    --card-body-line-height: 20px;
    --card-body-font-style: normal;
    --collection-1-ltight-r: rgba(252, 218, 96, 1);
    --collection-1-light-i: rgba(167, 209, 97, 1);
    --collection-1-color: rgba(91, 193, 171, 1);
    --collection-1-color-2: rgba(0, 160, 239, 1);
    --collection-1-color-3: rgba(247, 146, 90, 1);
    --collection-1-color-4: rgba(180, 137, 236, 1);
    --collection-1-color-5: rgba(209, 160, 24, 1);
    --collection-1-color-6: rgba(75, 122, 43, 1);
    --collection-1-color-7: rgba(56, 113, 101, 1);
    --collection-1-color-8: rgba(12, 75, 126, 1);
    --collection-1-color-9: rgba(179, 71, 28, 1);
    --collection-1-color-10: rgba(88, 79, 146, 1);
}

html, body {
    margin: 0; /*Remove default margins */
    padding: 0; /* Remove any default padding */
    height: 100%; /* Ensure the body and html take up the full height of the viewport */
    width: 100%; /*Ensure full width */
    font-family: 'Inter', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    line-height: 1.5;
    background-color: #142437;
}

body {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;;
}

/** Components **/

.btn {
    flex: 0 auto;
    max-width: 90%;
    background: #38B6E8;
    border: none;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
  
    color: #fff;
    font-family: "Raleway", sans-serif;
    font-size: 1.75rem;
    font-weight: bold;
    letter-spacing: 1px;
}

@media screen and (max-width: 1024px) {
    button.btn {
        padding: 0.75rem;
        font-size: 1.5rem;
        letter-spacing: 0.5px;
    }  
}
  
/** Original CSS **/

.topLevel {
    top: 0px;
    left: 0px;
}

.row1 {
    display: flex;
    flex-direction: row;
    height: 100vh; /*full screen*/
}

.left {
    width: 25%;
}

.middle {
    width: 50%;
    display: flex;
    flex-direction: column;   
}

.right {
    width: 30%;
}

/*********************logo*********************************/
.northstar-full-wrapper {    
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically if necessary */       
}

.northstar-full-icon-intro {
    padding-top: 10%; /*Adjust top positioning as needed */
    padding-left: 10%; /*Adjust top positioning as needed */
    padding-right: 10%; /*Adjust top positioning as needed */
    width: 80%; /*Responsive width based on viewport */
    object-fit: contain; /* Ensure the logo fits within the container */
}

/**********************BUTTON*****************************************/
/*DON'T TOUCH (INTRO -SIGNUP)*/
.frame-singlebutton-container {
    position:relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    text-align: center;
    /*font-size: clamp(1rem, 2vw, 2.5rem);*/ /* minimum font, preferred, max*/
    color: #fff;
    font-family: 'Inter';
    width: clamp(20px, 50vw, 300px);
    left: clamp(10px, 40vw, 50%); /* Position based on viewport width */
    transform: translateX(-50%);  /*Ensures it stays centered        */   
}

.frame-singlebutton-riasec-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: left;
    cursor: pointer;
    text-align: center;
    font-size: clamp(1rem, 2vw, 2.5rem); /* minimum font, preferred, max*/
    color: #fff;
    font-family: 'Inter';
    width: clamp(100px, 50vw, 300px); /* Ensure width adjusts for small screens */
    /*left: clamp(10px, 40vw, 0%);*/
   /* Position based on viewport width */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Centering adjustment */
}

/*DON'T TOUCH (INTRO -SIGNUP)*/
.rectangle-signbutton-parent {
    position: relative; 
    align-self:center;
    width:100%;
}

/*DON'T TOUCH (INTRO -SIGNUP)*/
.frame-item {   
    height: 82.88%;
    width: 97.47%;
    top: 10%;
    right: 1.27%;
    bottom: 10%;
    left: 1.26%;
    box-shadow: 0px 4px 0px #1a95c0;
    border-radius: 20px;
    background-color: #38b6e8;
    position: absolute;
}

/*DON'T TOUCH (INTRO - SIGNUP) single button text*/
.singlebutton {
    position: relative;
    top: 15%;
    font-size: clamp(1rem, 2vw, 2.5rem); /* minimum font, preferred, max*/
    font-weight: 600;
    font-family: Raleway;
}

/**********************INTRO*****************************************/
/* Intro Parent Div */
.intro-parent {
    position: relative;
    width: 100%; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    display: flex;
    justify-content: center;
    align-items: center;  
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
}

/* Intro Child Div */
.intro-child {
    display: flex;
    flex-direction: column; /* Stack grandchildren vertically */
    width: 80%; /* Responsive width */
    /*max-width: 600px;*/ /* Limit width for large screens */
    height: auto;   
    border-radius: 10px;
    /*padding: 10px;*/
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    box-sizing: border-box;
    gap: 15px; /* Space between grandchildren */
}

/* Intro Grandchild Div */
.intro-grandchild {
    padding: 15px;
    border-radius: 5px;
    text-align: center;
    font-size: 1.5rem;
    color: darkslategray;
}

.row {    
    display: flex;
    width: 100%;
    gap: 1rem;
}

.rectangle-parent-riasecb-RI-TopHalf {
    position: relative;
    /* don't add left*/
    background-color: yellow;
    height: 100%; /*don't touch'*/
}

.mask-group-icon-RI {
    width: 100%; /*Responsive width based on viewport */
    object-fit: contain; /* Ensure the logo fits within the container */
}

.b, .t, .c, .h, .l, .p {
    position: absolute;
    font-weight: 900;
    display: inline-block;
}

/* Individual Element Positions */
.b {
    top: 7%;
    left: 25%;
    width: 12%;
    height: 17%;
}

.t {
    top: 7%;
    left: 62%;
    width: 11%;
    height: 18%;
    opacity: 0.3;
}

.c {
    top: 39%;
    left: 82%;
    width: 12%;
    height: 18%;
    opacity: 0.3;
}

.h {
    top: 71%;
    left: 62%;
    width: 13%;
    height: 19%;
    opacity: 0.3;
}

.l {
    top: 71%;
    left: 26%;
    width: 11%;
    height: 19%;
    opacity: 0.3;
}

.p {
    top: 41%;
    left: 5%;
    width: 12%;
    height: 17%;
    opacity: 0.3;
}


/*.b {
    position: absolute;
    height: 17.14%;
    width: 12.16%;
    top: 7.19%;
    left: 25.44%;
    font-weight: 900;
    display: inline-block;    
}

.t {
    position: absolute;
    height: 17.69%;
    width: 11.34%;
    top: 7.19%;
    left: 61.93%;
    font-weight: 900;
    display: inline-block;
    opacity: 0.3;
}

.c {
    position: absolute;
    height: 18.25%;
    width: 12.44%;
    top: 38.98%;
    left: 82.39%;
    font-weight: 900;
    display: inline-block;
    opacity: 0.3;
}

.h {
    position: absolute;
    height: 19.08%;
    width: 13.27%;
    top: 71.33%;
    left: 61.93%;
    font-weight: 900;
    display: inline-block;
    opacity: 0.3;
}

.l {
    position: absolute;
    height: 19.08%;
    width: 10.78%;
    top: 71.33%;
    left: 26.26%;
    font-weight: 900;
    display: inline-block;
    opacity: 0.3;
}

.p {
    position: absolute;
    height: 16.59%;
    width: 12.72%;
    top: 40.64%;
    left: 5.53%;
    font-weight: 900;
    display: inline-block;
    opacity: 0.3;
}*/
/******* INTRO ****************/
.intro-parent {
    color:#fff;
}

/******* BUILDERS ****************/
.builders-parent {
    color: #a7d161;
}

/******* thinkers****************/
.thinkers-parent {
    color: #00a0ef;
}

/******* CREATORS****************/
.creators-parent {
    color: #b489ec;
}

/******* HELPERS****************/
.helpers-parent {
    color: #5bc1ab;
}

/******* LEADERS ****************/
.leaders-parent {
    color: #f7925a;
}

/******* PLANNERS ****************/
.planners-parent {
    color: #fcda60;
}

.RIASECShape {
    position: relative;
    padding-top: 20%;
    text-align: left;
    font-size: clamp(1rem, 2.5vw, 3rem); /* minimum font, preferred, max*/   
}

.rectangle-parent-riasecb-riasecintro {
    position:relative;
   /* top: 30%;*/
    left: 0%;
    /*width: 249px;*/
    width: 100%;
    height: 66px;
    font-family: 'Inter';
    background-color: navajowhite;
}

.rectangle-parent-riasecb {
    position: relative;
    top: 30%;
    left: 0%;
    /*width: 249px;*/
    width: 100%;
    height: 66px;
    font-family: 'Inter';   
}

.frame-wrapper-riasecb {
    position: absolute;
    height: 53.03%;
    width: 96.22%;
    top: 19.83%;
    right: 2.49%;
    bottom: 27.14%;
    left: 1.28%;
}

.next-wrapper-riasecb {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0%;
    right: 0%;
    bottom: 0%;
    left: 0%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.next-riasecb {
    position: relative;
    letter-spacing: 0.06em;
    position: absolute;
    font-size: clamp(1rem, 3vw, 3rem); /* minimum font, preferred, max*/
    font-weight: 600;
    font-family: Raleway;
    color: #fff;
}
/*LIGHT BEGIN*/
.light {
    
    background-color: #142437;
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
}

    .light .overlap-wrapper {
        background-color: #ffffff;
        width: 1194px;
        height: 834px;
    }

    .light .overlap {
        position: relative;
        height: 834px;
        background-image: url(https://c.animaapp.com/OPykVlsa/img/volunteeratnonprofit.png);
        background-size: cover;
        background-position: 50% 50%;
    }

    .light .group {
        position: absolute;
        width: 70px;
        height: 70px;
        top: 48px;
        left: 71px;
        background-color: #ffffff99;
        border-radius: 35px;
    }

    .light .back {
        position: absolute;
        width: 46px;
        height: 46px;
        top: 12px;
        left: 12px;
    }

    .light .rectangle {
        position: absolute;
        width: 1194px;
        height: 220px;
        top: 614px;
        left: 0;
        background-color: #1c2431;
        border-radius: 30px 30px 0px 0px;
    }

    .light .text-wrapper {
        position: absolute;
        top: 637px;
        left: 71px;
        opacity: 0.8;
        font-family: "RocknRoll One", Helvetica;
        font-weight: 400;
        color: #ffffff;
        font-size: 20px;
        letter-spacing: 0;
        line-height: 25px;
        white-space: nowrap;
    }

    .light .line-wrapper {
        position: absolute;
        width: 1060px;
        height: 1px;
        top: 797px;
        left: 71px;
    }

    .light .line {
        top: -6px;
        left: 0;
        position: absolute;
        width: 1060px;
        height: 6px;
    }

    .light .frame {
        display: inline-flex;
        align-items: center;
        gap: 36px;
        position: absolute;
        top: 679px;
        left: 657px;
    }

    .light .div {
        position: relative;
        width: 64px;
        height: 90px;
    }

    .light .mood {
        position: absolute;
        width: 44px;
        height: 44px;
        top: 0;
        left: 9px;
    }

    .light .text-wrapper-2 {
        position: absolute;
        top: 50px;
        left: 0;
        font-family: "RocknRoll One", Helvetica;
        font-weight: 400;
        color: #f6f6f6;
        font-size: 18px;
        text-align: center;
        letter-spacing: 0;
        line-height: 40px;
        white-space: nowrap;
    }

    .light .group-2 {
        position: relative;
        width: 82px;
        height: 90px;
    }

    .light .mood-dp-eeaed {
        left: 18px;
        position: absolute;
        width: 44px;
        height: 44px;
        top: 0;
    }

    .light .group-3 {
        position: relative;
        width: 70px;
        height: 90px;
    }

    .light .img {
        left: 12px;
        position: absolute;
        width: 44px;
        height: 44px;
        top: 0;
    }

    .light .group-4 {
        position: relative;
        width: 59px;
        height: 90px;
    }

    .light .mood-2 {
        left: 7px;
        position: absolute;
        width: 44px;
        height: 44px;
        top: 0;
    }

    .light .group-5 {
        position: relative;
        width: 65px;
        height: 90px;
        margin-right: -2.00px;
    }

    .light .mood-3 {
        left: 10px;
        position: absolute;
        width: 44px;
        height: 44px;
        top: 0;
    }

    .light .text-wrapper-3 {
        position: absolute;
        width: 500px;
        top: 678px;
        left: 71px;
        font-family: "RocknRoll One", Helvetica;
        font-weight: 400;
        color: #ffffff;
        font-size: 32px;
        letter-spacing: 0;
        line-height: 40px;
    }

    .light .line-2 {
        top: 791px;
        left: 71px;
        position: absolute;
        width: 1060px;
        height: 6px;
    }

    .light .rectangle-2 {
        position: absolute;
        width: 1194px;
        height: 834px;
        top: 0;
        left: 0;
    }

    .light .rectangle-3 {
        position: absolute;
        width: 597px;
        height: 378px;
        top: 244px;
        left: 298px;
        background-color: #18202e;
        border-radius: 30px;
        box-shadow: 0px 0px 10px #29546f;
    }

    .light .good-job-you {
        width: 465px;
        top: 345px;
        left: 368px;
        font-family: var(--standerd-font-font-family);
        font-weight: var(--standerd-font-font-weight);
        color: #ffffff;
        font-size: var(--standerd-font-font-size);
        position: absolute;
        text-align: center;
        letter-spacing: var(--standerd-font-letter-spacing);
        line-height: var(--standerd-font-line-height);
        font-style: var(--standerd-font-font-style);
    }

    .light .overlap-group-wrapper {
        position: absolute;
        width: 339px;
        height: 66px;
        top: 480px;
        left: 440px;
    }

    .light .overlap-group {
        position: relative;
        width: 330px;
        height: 55px;
        top: 3px;
        left: 4px;
        background-color: #38b6e7;
        border-radius: 20px;
        box-shadow: 0px 4px 0px #1994bf;
    }

    .light .rectangle-4 {
        position: absolute;
        width: 312px;
        height: 17px;
        top: 2px;
        left: 9px;
    }

    .light .frame-wrapper {
        position: absolute;
        width: 326px;
        height: 35px;
        top: 10px;
        left: 0;
    }

    .light .next-wrapper {
        display: flex;
        width: 326px;
        align-items: center;
        justify-content: center;
        gap: 10px;
        position: relative;
    }

    .light .next {
        position: relative;
        width: fit-content;
        margin-top: -2.00px;
        -webkit-text-stroke: 1px #ffffff;
        font-family: "RocknRoll One", Helvetica;
        font-weight: 400;
        color: #ffffff;
        font-size: 24px;
        text-align: center;
        letter-spacing: 1.44px;
        line-height: normal;
    }
    .light .nextButton {
        position: relative;
        width: 320px;
        /*width: fit-content;*/
        margin-top: -2.00px;
        -webkit-text-stroke: 1px #ffffff;
        font-family: "RocknRoll One", Helvetica;
        font-weight: 400;
        color: #ffffff;
        font-size: 24px;
        text-align: center;
        letter-spacing: 1.44px;
        line-height: normal;
        background-color: transparent;
        border: none;
    }
    .light .ellipse {
        position: absolute;
        width: 15px;
        height: 10px;
        top: 2px;
        left: 10px;
    }

/*LIGHT END*/
/* Media Query for Extra Small Screens (e.g., phones) */
@media (max-width: 476px) {
    html, body {
        overflow: auto; /* Enable scrolling for small screens */
    }

    .click-a-dimension-to-explore-parent {
        /*  top: 10%;
        bottom: 10%;*/
        /* right: 60%;*/
    }
    .click-a-dimension{
        left: 10%;
        position:relative;

    }
    .mask-group-icon-riasecb {
        width: 90%;
        /*  Adjust to smaller size height: auto;*/
    }

    .mask-group-parent-riasecb {
        width: 300px;
        position: relative;
        height: 300px;
        text-align: left;
        font-size: 50px;
        left: 20%;
    }

    .l {
        top: 65%;
        left: 22%;
    }

    .h {
        top: 65%;
        left: 55%;
    }

    .c {
        left: 75%;
    }

    .left-side {
        width: 70%; /* Full width for smaller screens */
        height: 20%; /* Each side takes half the height */
        padding: 0%;
    }

    .RIASECShape {
        padding-top: 0%;
    }
    .parent {
        height: 100vh;
        width: 100%;
    }
   
}

/* Media Query for Extra Small Screens (e.g., phones) */
@media (max-width: 480px) {
    .intro-grandchild {
        font-size: 1rem; /* Further reduce font size */
        padding: 10px;
    }

    .frame-singlebutton-riasec-container {
        width: 80%; /* Make it take up more width */
        left: 10%; /* Adjust position to avoid overflow */
        transform: none; /* No need for centering adjustment */
    }

    .singlebutton {
        font-size: 1.2rem; /* Slightly smaller font for small screens */
        top: 10%; /* Adjust position */
    }

    .frame-item {
        width: 90%; /* Adjust size for small screens */
        left: 5%; /* Center within the smaller frame */
    }
    /*.mask-group-parent-riasecb {
    width: 80%;*/ /* Adjust to smaller size */
    /*height: auto;
}

.b, .t, .c, .h, .l, .p {
    font-size: 2rem;*/ /* Adjust size for smaller screens */
    /*}*/
}