/* @media (max-width: 1550px) {
    :root {
        --hero-y: 18vh;
    }
    .hero {
        width: 115%;
        transform: translateX(-7.5%);
    }
}
@media (max-width: 1275px) {
    .hero {
        width: 135%;
        transform: translateX(-17.5%);
    }
} */
@media (max-width: 1100px) {
    :root {
        --hero-y: 21vh;
    }
    .hero {
        width: 145%;
        transform: translateX(-22.5%);
    }
}
@media (max-width: 950px) {
    .hero {
        width: 165%;
        transform: translateX(-32.5%);
    }
}
@media (max-width: 830px) {
    :root {
        --hero-y: 23vh;
    }
    .hero {
        width: 180%;
        transform: translateX(-40%);
    }
}
@media (max-width: 700px) {
    :root {
        --hero-y: 26vh;
    }
    .hero {
        width: 220%;
        transform: translateX(-60%);
    }
}
@media (max-width: 560px) {
    :root {
        --hero-y: 28vh;
    }
    .hero {
        width: 250%;
        transform: translateX(-75%);
    }
}
@media (max-width: 450px) {
    :root {
        --hero-y: 29vh;
    }
    .hero {
        width: 275%;
        transform: translateX(-87.5%);
    }
}

::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #121315;
}

::-webkit-scrollbar
{
	width: 12px;
	background-color: #121315;
}
::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: var(--gold);
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

.hero {
    /* width: 100%;
    height: 1080px;
    background-image: url(../img/dome_glow.png);
    background-repeat: no-repeat;
    background-size: contain; */
    /* position: fixed; */
    /* transform: translateX( calc(var(--hero-width) * -0.5) );
    width: var(--hero-width);
    x: calc(var(--hero-width) * 0.5) */
    /* top: 10vh; */
}

body {
    background-color: white;
}

.hero_text {
    font-size: 600%;
    font-family: itc;
    top: 10vh;
}
@media (max-width: 775px) {
    .hero_text {
        font-size: 400%;
    }
}
@media (max-width: 540px) {
    .hero_text {
        font-size: 300%;
    }
}
@media (min-width: 1700px) {
    .hero_text {
        font-size: 800%;
    }
}


.background {
    width: 100%;
    height: 100vh;
    fill: black;
    position: fixed;
}

.content {
    width: 100%;
    position: absolute;
    top: 300vh;
    overflow-x: hidden;
}

.small_title {
    font-family: itc;
    font-size: 600%;
    color: transparent;
    padding-top: 14.5vh;
    padding-left: var(--edge-padding);
    line-height: 90%;
    -webkit-text-stroke: 3px black;
}

.header_text {
    font-family: itc;
    font-size: 500%;
    color: black;
}
@media (max-width: 600px) {
    .header_text {
        font-size: 300%;
    }
}
@media (min-width: 1700px) {
    .header_text {
        font-size: 600%;
    }
}
.sub_header {
    font-family: "proxima-nova", sans-serif;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    font-size: 200%;
    color: black;
    margin-top: 2vh;
}
@media (max-width: 800px) {
    .sub_header {
        font-size: 140%;
    }
}
@media (min-width: 1700px) {
    .sub_header {
        font-size: 250%;
    }
}
.body_text {
    font-family: "proxima-nova", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 150%;
    color: black;
    padding-top: 2vh;
}
@media (max-width: 600px) {
    .body_text {
        font-size: 100%;
    }
}
@media (min-width: 1700px) {
    .body_text {
        font-size: 190%;
    }
}

#studybreak {
    /* padding-top: 13vh;  temporary fix for the automatic scrolling to studybreak being too high*/ 
}


#committee {
    background-color: black;
    padding-bottom: calc(var(--top-padding) * 1.15);
}
#committee > .header_text, #committee > .body_text{
    color: white;
}

#history {
}

#faq {
    padding-top: 0;
    scroll-margin-top: calc(var(--top-padding) + 5vh);
}

.content_tab_item {
    padding: var(--top-padding) var(--edge-padding) var(--top-padding) var(--edge-padding);
    scroll-margin-top: 5vh;
    width: 100%;
}

.underline_bar {
    width: 2.5vh;
    height: 2.5vh;
}
.gold {
    background-color: var(--gold);
}
.green {
    background-color: var(--green);
}
.white {
    background-color: white;
}
.top_bar {
    transition: 0.8s ease;
    margin-top: 1vh;
}
.bottom_bar {
    transition: 1.3s ease;
    width: 5vh;
}


#committee {
    --member-img-size: 175px;
    --member-font-size: 100%;
}
.ringcomm_wrapper {
    /* width: 100%;
    text-align: left;
    margin-top: -2vh; */
    margin-top: 7vh;
    --gap: 2rem;
    display: flex;
    gap: var(--gap);
    flex-direction: row;
    flex-wrap: wrap;

    /* REMOVE THE FOLLOWING LINE TO ALIGN RINGCOMM LEFT */
    /* justify-content: center; */
}
.ringcomm_card {
    /* display: inline-block;
    padding-top: 7vh; */
    flex-basis: 44%;
    display: grid;
    align-items: center;
    grid-template-columns: var(--member-img-size) auto;
}
.member_pic {
    /* content: url('../img/ringcomm/annfun.webp') !important; */
    object-fit: cover;
    float: left;
    width: var(--member-img-size);
    height: var(--member-img-size);
    border-radius: 50%;
    /* border: 2px solid white; */
    box-shadow: 2px 2px 0px var(--green), -2px -2px 0px var(--gold);
}
.helena:hover {
    content: url('../img/ringcomm/helenafun.webp')
}
.maggie:hover {
    content: url('../img/ringcomm/maggiefun.webp')
}
.sean:hover {
    content: url('../img/ringcomm/seanfun.webp')
}
.hailey:hover {
    content: url('../img/ringcomm/haleyfun.webp')
}
.marco:hover {
    content: url('../img/ringcomm/marcofun.webp')
}
.katrina:hover {
    content: url('../img/ringcomm/katrinafun.webp')
}
.nathan:hover {
    content: url('../img/ringcomm/nathanfun.webp')
}
.jamie:hover {
    content: url('../img/ringcomm/jamiefun.webp')
}
.teresa:hover {
    content: url('../img/ringcomm/teresafun.webp')
}
.vicky:hover {
    content: url('../img/ringcomm/vickyfun.webp')
}
.ann:hover {
    content: url('../img/ringcomm/annfun.webp')
}
.sabrina:hover {
    content: url('../img/ringcomm/sabrinafun.webp')
}

.member_info_container {
    display: inline-block;
    vertical-align: middle;
    padding-left: 18px;
}
.member_info {
    color: white;
    font-family: "proxima-nova", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: var(--member-font-size);
    line-height: 8px;
    text-align: left;
    white-space: nowrap;
}
.member_name {
    font-weight: 700;
    text-transform: uppercase;
    font-size: calc(var(--member-font-size) * 1.2);
}
.member_position {
    font-style: italic;
    font-size: calc(var(--member-font-size) * 1.1);
    padding-bottom: 8px;
}
.member_social {
}
@media (max-width: 1200px) {
    #committee {
        --member-img-size: 150px;
        --member-font-size: 80%;
    }
    .member_info {
        line-height: 0px;
    }
    .member_info_container {
        padding-left: 0px;
    }
    .member_info_container {
        padding-left: 12px;
    }
    .member_info {
        line-height: 3px;
    }
    .member_position {
        padding-bottom: 5px;
    }
}
@media (max-width: 900px) {
    .ringcomm_card {
        flex-basis: 100%;
    }
}
@media (max-width: 500px) {
    #committee {
        --member-font-size: 75%;
    }
}
@media (min-width: 1700px) {
    #committee {
        --member-font-size: 150%;
        --member-img-size: 215px;
    }
    .member_info_container {
        padding-left: 12px;
    }
    .member_info {
        line-height: 15px;
    }
    .member_position {
        padding-bottom: 12px;
    }
}
/* 
.rainbow_wrapper {
    width: 100%;
    height: 30vh;
    display: flex;
    flex-direction: column-reverse;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
}
.rainbow_subwrapper {
    text-align: center;
    width: 100%;
    height: 80%;
}
.bar_wrapper {
    width: 9%;
    display: inline-block;
    padding: 0;
    vertical-align: bottom;
}
.bar {
    width: 100%;
    height: 0;
    transition: 1.3s ease;
    background-color: #ffda25;
    vertical-align: bottom;
    float: left;
}
#bar1, #bar10 {
    height: 25%;
}
#bar2, #bar9 {
    height: 40%;
}
#bar3, #bar8 {
    height: 55%;
}
#bar4, #bar7 {
    height: 70%;
}
#bar5, #bar6 {
    height: 85%;
}
#bar5-6 {
    height: 100%;
} */
#faq_first {
    padding-top: 5vh;
}
.question_wrapper {
    padding-top: 3vh;
}
.question {
    font-family: "proxima-nova", sans-serif;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    font-size: 150%;
    color: black;
}
.answer {
    font-family: "proxima-nova", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 120%;
    color: black;
}
@media (max-width: 600px) {
    .question {
        font-size: 110%;
    }
    .answer {
        font-size: 100%;
    }
}
@media (min-width: 1700px) {
    .question {
        font-size: 180%;
    }
    .answer {
        font-size: 150%;
    }
}


.link {
    text-transform: uppercase;
    text-decoration: none;
    color: white;
    border: 2px solid black;
    border-radius:10px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: black;
    transition: 0.2s ease;
}
.link:hover {
    color: var(--gold);
}



.bigscreen {
    display: block;
}
.smallscreen {
    display: none;
    width: 100%;
    height: 60vh;
    overflow: hidden;
}
@media (max-width: 480px) {
    .bigscreen {
        display: none;
    }
    .smallscreen {
        display: block;
    }
}

.smaller_body_text {
    font-size: 120%;
}