.single_line {
    white-space: nowrap;
}

canvas {
    position: fixed;
}

.profiles_div {
    background-color: #1d1800;
    position: fixed;
    
    width: fit-content;
    max-width: 90%;
    height: auto;
    
    right: 1%;
    bottom: 0;

    z-index: 99999;
    border: 3px solid rgb(23, 19, 0);
    border-radius: 12.5px;

    /* Layout */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.profile_icon {
    width: 3vw;
    min-width: 30px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
    transition: transform 0.3s ease, filter 0.3s ease;
    cursor: pointer;
}

.profile_icon:hover {
    transform: rotate(-15deg); 
    filter: brightness(120%); 
}

body {
    margin: 0px;
    background-color: black;
    height: 100%;
}

#title {
    margin: 0px;
    position: absolute;
    left: calc(50% - 375px);
    top: 25px;
    width: 750px;
    background-color: #Ffd700;
    font-size: 75px;
    text-align: center;
    border-radius: 25px;
}

.main_section_div {
    display: flex;
    align-items: center;
    justify-items: center;
    align-content: center;
    justify-content: center;
    position: absolute;
}

#s1 {
    left: calc(50% - 200px);
    top: 150px;
    width: 400px;
}

#s2 {
    left: calc(50% - 200px);
    top: 250px;
    width: 400px;
}

#s3 {
    left: calc(50% - 200px);
    top: 650px;
    width: 400px;
}

#s4 {
    left: calc(50% - 650px);
    top: 900px;
    width: 400px;
}

#s5 {
    left: calc(50% + 250px);
    top: 900px;
    width: 400px;
}

#s6 {
    left: calc(50% - 650px);
    top: 1250px;
    width: 400px;
}

#s7 {
    left: calc(50% - 650px);
    top: 1400px;
    width: 400px;
}

#s8 {
    left: calc(50% - 650px);
    top: 1900px;
    width: 400px;
}

#s9 {
    left: calc(50% + 250px);
    top: 1900px;
    width: 400px;
}

#s10 {
    left: calc(50% - 200px);
    top: 2200px;
    width: 400px;
}

#s11 {
    left: calc(50% - 200px);
    top: 2325px;
    width: 400px;
}

#s12 {
    left: calc(50% - 200px);
    top: 2625px;
    width: 400px;
}

#s13 {
    left: calc(50% + 250px);
    top: 2820px;
    width: 400px;
}

#s14 {
    left: calc(50% - 200px);
    top: 3125px;
    width: 400px;
}

#s15 {
    left: calc(50% - 200px);
    top: 3570px;
    width: 400px;
}

#s16 {
    left: calc(50% - 200px);
    top: 4275px;
    width: 400px;
}

#s17 {
    left: calc(50% - 650px);
    top: 2262.5px;
    width: 400px;
}

#s18 {
    left: calc(50% - 200px);
    top: 4620px;
    width: 400px;
}

.section_icon {
    width: 50px;
    height: 50px;
    position: absolute;
    z-index: 99;
    right: 92.5%;
    bottom: 50%;
} 

.big_section_icon {
    width: 75px;
    height: 75px;
    right: 90%;
}

.section_text {
    margin: 0px;
    position: relative;
    background-color: rgb(255, 255, 255);
    text-align: center;
    border-radius: 25px;
    text-decoration: none;
    width: 100%;
    padding: 5px 30px 5px 30px;
    font-size: 45px;
}

#coolmath_text {
    color: red;
    background-color: rgb(29, 55, 82);
    -webkit-text-stroke: 0.5px yellow;
    font-family: Proxima-Soft-Bold, sans-serif;
}

#scratch_text {
    color: rgb(255, 255, 255);
    background-color: rgb(133, 92, 214);
    -webkit-text-stroke: 0.5px rgb(255, 174, 0);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#studio_text {
    color: rgb(0, 141, 224);
    background-color: rgb(46, 48, 57);
    font-family: Builder Sans, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
}

#python_text {
    color: #4B8BBE;
    background-color: #FFE873; 
    font-family: SourceSansProBold, Arial, sans-serif;
}

#java_text {
    color: #f89820;
    background-color: #26465c; 
    font-family: "OracleSansVF", "OracleSansVFCyGr", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
}

#javascript_text {
    color: #323330;
    background-color: #F0DB4F; 
}

#cpp_text {
    color: white;
    background-color: #00599C; 
}

#react_native_text {
    color: #ffffff;
    background-color: #61DBFB; 
    font-family: "Helvetica";
}

#rust_text {
    color: #ab6c48;
    background-color: #2f333a; 
    font-family: "Fira Sans", Helvetica, Arial, sans-serif;
}

#swift_text {
    color: #ffffff;
    background-color: #e8754b; 
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}

#senior_year_text {
    color: #B9D2DC;
    background-color: #002678; 
    font-family: SourceSansProBold, Arial, sans-serif;
}

#charlotte_text {
    color: #005035;
    background-color: #a49665; 
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif
}

#github_text {
    color: #ffffff;
    background-color: #212830; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.section_content_div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    align-content: center;
    justify-content: center;
    position: absolute;
}

#c2 {
    left: calc(50% - 125px);
    top: 315px;
    width: 250px;
    font-size: 30px;
}

#c3 {
    left: calc(50% - 150px);
    top: 715px;
    width: 300px;
    font-size: 30px;
}

#c4 {
    left: calc(50% - 550px);
    top: 965px;
    width: 200px;
    font-size: 30px;
}

#c5 {
    left: calc(50% + 300px);
    top: 965px;
    width: 300px;
    font-size: 30px;
}

#c6 {
    left: calc(50% - 550px);
    top: 1315px;
    width: 200px;
    font-size: 30px;
}

#c7 {
    left: calc(50% - 600px);
    top: 1465px;
    width: 300px;
    font-size: 28px;
}

#c8 {
    left: calc(50% - 625px);
    top: 1965px;
    width: 350px;
    font-size: 24px;
}

#c11 {
    left: calc(50% - 175px);
    top: 2390px;
    width: 350px;
    font-size: 30px;
}

#c12 {
    left: calc(50% - 175px);
    top: 2690px;
    width: 350px;
    font-size: 30px;
}

#c14 {
    left: calc(50% - 175px);
    top: 3190px;
    width: 350px;
    font-size: 30px;
}

#c15 {
    left: calc(50% - 175px);
    top: 3642.5px;
    width: 350px;
    font-size: 30px;
}

#c16 {
    left: calc(50% - 175px);
    top: 4340px;
    width: 350px;
    font-size: 30px;
}

#c18 {
    left: calc(50% - 175px);
    top: 4687.5px;
    width: 350px;
    font-size: 30px;
}


.content_anchor {
    margin: 2.5px 0px 2.5px 0px;
    position: relative;
    background-color: rgb(255, 255, 255);
    text-align: center;
    border-radius: 25px;
    text-decoration: none;
    width: 100%;
    padding: 5px 15px 5px 15px;
}

.start_stretch_content {
    margin: 42px 0px 20px 0px;
}

.stretch_content {
    margin: 21px 0px 21px 0px;
}

.final_anchor {
    margin-bottom: 25px;
}