/* Global */
@import url(global.css);
@import url(project.css);
@import url(utility.css);

h1,h2,h3,h4,a{
    display: block;
    margin: 0;
    line-height: 1.4;
}
h2{
    margin-bottom: 60px;
}
h3{
    margin-bottom: 40px;
}
h4{
    margin-bottom: 22px;
}
hr{
    margin-bottom: 120px;
}
#mainContent p{
    margin: 0;
    font-size: var(--smallText);
    margin-bottom: 16px;
}
#mainContent li{
    font-size: var(--smallText);
    margin-bottom: 8px;
}
ul{
    margin-bottom: 28px;
}

.largeText{
    font-weight: 800;
}

/* ----- Details ----- */
body{
    display: block;
}
spline-viewer{
    position: relative;
    min-height: 600px;
    max-height: 90vh;
    max-height: 90svh;
    margin-top: -60px;
    margin-bottom: -100px;
    z-index: 0;
    width: calc(100% + 80px);
}
#darkCover{
    width: calc(100% + 80px);
    height: 120px;
    position: relative;
    z-index: 0;
    background-color: var(--background);

    margin-bottom: -80px;
}
main{
    margin: 0;
    position: relative;
    z-index: 1;
}

#mainContent{
    position: relative;
    z-index: 1; 
}


h2#accessibleComponent{
    color: #777;
}

.gridDisplay img{
    margin-bottom: 20px;
}
.gridDisplay h3{
    margin-bottom: 12px;
}

/* Interaction Analysis */
#InteractionAnalysis img{
    border-radius: 20px;
}

.sectionHeader{
    margin-bottom: 10px;
}

.exampleIntro{
    align-items: center;
}
.exampleIntro h3{
    margin-bottom: 40px;
}

/* Accoridon Redesign */
.detailDescriptions{
    margin-bottom: 40px;
}
img.upperImg{
    margin-bottom: 10px;
}

#onActive{
    display: flex;
    align-items: center;
    gap: 12px;
}

#focusOrderDescriptions{
    font-size: var(--regularText);
}
#focusOrderDescriptions a{
    display: inline;
}

#stateModelElements p{
    margin-bottom: 2px;
}


.stateModelVersion2{
    margin-bottom: 50px;
}

.stateModelVersion2Descriptions{
    margin-bottom: 220px;
}


/* Reflection */
#lastParagraph{
    margin-bottom: 220px;
}

/* More Projects */
#moreProjectsSection hr{
    margin-bottom: 20px;
}