:root {
    --very-dark:   #191d1b;
    --dark-brown:  #534c3f;
    --med-brown:   #949084;
    --light-brown: #bcb7b4;
    --very-light:  #bdc5bd;
    --light-blue:  #b9caae;
    --peri:        #6768ac;
    --magenta:     #c91a1e;
    --red:         #ee5da3;
    --yellow:      #ffd700;
    --magenta2:    #bb2648;
    --pink:        #f719ff;
    --link-color:  #FFF700;
    --turquoise:   #2eb49f;
    --dark-blue:   #1634fe;
    --dark-dark:   #12163e;
    --gray:        rgb(226,226,226);
    --trunk:       #320808;
}

* {
    box-sizing: border-box
}

html {
    font-family:         "Space Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight:         400;
    font-style:          normal;
    font-size:           16px;
    scroll-behavior:     smooth;
}

body {
    background-color: #007eff;
    color:            #fff;
    margin:           0px;
    position:         relative;
}

header {
    position:       realtive;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    height:         100vh;
}

#header-top {
    position:        relative;
    width:           100%;
    max-width:       1040px;
    padding-left:    20px;
    padding-right:   20px;
    display:         flex;
    flex-direction:  row;
    justify-content: space-between;
    align-items:     start;
}

#header-top h1 {
    position:       relative;
    height:         175px;
    width:          175px;
    font-size:      36px;
    font-weight:    700;
    letter-spacing: -2.5px;
    line-height:    0.8em;
    padding-top:    56px;
    padding-left:   13px;
    transform:      translateY(-40px);
    border:         1px solid hsla(0,0%,100%,.4);
    border-radius:  100%;
}

#header-top h2 {
    position:                   relative;
    height:                     175px;
    width:                      175px;
    font-size:                  36px;
    font-weight:                700;
    letter-spacing:             -2.5px;
    line-height:                0.8em;
    padding-top:                56px;
    padding-right:              13px;
    transform:                  translateY(-40px) translateX(-8px) ;
    border:                     1px solid hsla(0,0%,100%,.4);
    border-bottom-left-radius:  100%;
    border-bottom-right-radius: 100%;
    text-align:                 right;
}

#header-top #nav {
    padding-top:    18px;
    flex-grow:      1;
    display:        flex;
    flex-direction: column;
    align-items:    flex-end;
}

#header-top #nav > li {
    background:   url(arrow.svg) no-repeat 0;
    border-top:   1px solid hsla(0,0%,100%,.4);
    cursor:       pointer;
    font-size:    16px;
    line-height:  36px;
    padding-left: 2.5em;
    padding-top:  2px;
    transition:   background-position-x .3s;
    width:        230px;
    text-align:   left;
}

#header-top #nav > li:hover {
    background-position-x:.5em
}

@media(max-width:630px) {
    #header-top #nav > li {
        display: none;
    }
}

a {
  color: inherit; 
  text-decoration: underline;
}

a.invisible {
  text-decoration: none;
}

a:hover {
  /*color: var(--link-color);*/
  text-decoration: underline;
}

#header-bottom {
    position:       relative;
    flex-grow:      1;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    /* border:         1px solid red; */
    width:          100vw;
    overflow:       hidden;
}

#header-bottom #canvas-holder {
    flex-grow: 1;
    /* border:    1px solid blue; */
}

main {
    position:       relative;
    display:        flex;
    flex-direction: column;
    align-items:    center;
}

section {
    position:        relative;
    width:           100%;
    border-top:      1px solid white;
    display:         flex;
    flex-direction:  row;
    align-items:     start;
    justify-content: center;
    padding-top:     80px;
    padding-bottom:  80px;
}

section h2 {
    width:       230px;
    font-size:   24px;
    font-weight: 700;
}

section .section-content {
    position:    relative;
    flex-grow:   1;
    max-width:   770px;
    font-size:   16px;
    line-height: 1.4em;
}

@media(max-width:1000px) {
    section {
        display:        block;
        padding-left:   40px;
        padding-right:  40px;
        padding-top:    60px;
        padding-bottom: 60px;
    }
    section h2 {
        margin-bottom: 25px;
    }
}


#speakers ul,
#organizers ul {
    position:       relative;
    display:        flex;
    flex-direction: row;
    flex-wrap:      wrap;
    row-gap:        25px;
    width:          100%;
    list-style:     none;
}

#speakers li,
#organizers li {
    display: inline-block;
    width:   33%;
}

@media(max-width:645px) {
    #speakers li,
    #organizers li {
        width: 50%;
    }
}

@media(max-width:450px) {
    #speakers li,
    #organizers li {
        width: 100%;
    }
}

#registration p:first-child {
    margin-top: 0px;
}

#registration p {
    margin-top: 25px;
}

#organizers p {
    margin-top: 25px;
}

#organizers img {
    max-height:   50px;
    margin-right: 10px;
}