html {
    font-family: Helvetica;
    padding: 56px 70px;
    
    min-width: 800px;
    
    /* Center page on wide screen */
    max-width: 1360px;
    margin-left: auto;
    margin-right: auto;
}

#digital-portfolio {
    position: relative;
    margin-top: 40px;
}

#under-employment {
    position: relative;
}

.banner-container {
    padding: 20px 60px;
}

.social-container {
    position: relative;
    left: 0;
    right: 0;
    float: right;
}

.linkedin {
    cursor: pointer;
    margin-right: 67px;
    margin-top: 5px;
}

/* Banners style */

.banner {
    position: relative;
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
}

.action {
    cursor: pointer;
}

.banner-logo-container {
    position: absolute;
    width: 42px;
    height: 100%;
}

.banner-accessory-view {
    position: absolute;
    top: 0;
    right: 0;
    width: 22px;
    height: 100%;
    margin-left: auto;
    transition: width 160ms;
}

.banner-accessory-indicator {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.banner-content {
    margin-left: 60px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 40px;
}

.logoless-banner-content {
    margin-left: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 40px;
}

.banner-logo {
    position: absolute;
    width: 100%;
    object-fit: contain;
    top: 0;
    bottom: 0;
    margin: auto;
}

.banner-title {
    font-size: 16px;
}

.banner-subtitle {
    font-size: 14px;
}

/* Banner hover */

.banner:hover .banner-accessory-view {
    width: 32px;
}

/* Lightspeed banner colors */

#lightspeed-banner {
    background-color: #FFE9E9;
}

#lightspeed-banner-logo-container {
    background-color: #FFD5D5;
}

/* Crafter banner colors */

#crafter-banner {
    background-color: #F5E9D9;
}

#crafter-banner-logo-container {
    background-color: #1B1D27;
}

#crafter-banner-accessory-view {
    background-color: #EED7B8;
}

/* Coder banner colors */

#coder-banner {
    background-color: #E9F5FE;
}

#coder-banner-logo-container {
    background-color: #269FF8;
}

#coder-banner-accessory-view {
    background-color: #CFEBFF;
}

/* Bachelor project colors */

#bsc-proj-banner {
    background-color: #EFEFEF;
}
#bsc-proj-banner-accessory-view {
    background-color: #D8D8D8;
}

/* ShopTiming banner colors */

#shoptiming-banner {
    background-color: #ECF7FE;
}

#shoptiming-banner-logo-container {
    background-color: #D6E7F2;
}

/* Left content indicator */

.left-indicator-container {
    position: absolute;
    height: 100%;
    width: 200px;
}

.left-indicator-text {
    top: 0;
    left: 0;
    position: absolute;
    transform-origin: 0 0;
  overflow: visible;
    justify-content: flex-start;
    transform: rotate(-90deg) translateX(-100%);
}

.left-indicator-bracket {
    margin-left: 20px;
}

.left-mainline {
    background-color: black;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
}

.left-topline {
    background-color: black;
    height: 2px;
    position: absolute;
    top: 0;
    width: 6px;
}

.left-bottomline {
    background-color: black;
    height: 2px;
    position: absolute;
    bottom: 0;
    width: 6px;
}

/* Right content indicator */

.right-indicator-container {
    position: absolute;
    height: 100%;
    width: 200px;
    right: 0;
    text-align: right;
}

.right-indicator-text {
    bottom: 0;
    right: 0;
    position: absolute;
    transform-origin: 0 0;
  overflow: visible;
    justify-content: flex-start;
    transform: translateX(100%) translateY(100%) rotate(90deg) translateX(-100%)
}

.right-indicator-bracket {
    margin-right: 20px;
    margin-left: auto;
    width: 6px;
    
}

.right-mainline {
    background-color: black;
    position: absolute;
    top: 0;
    bottom: 0;
    margin-left: 4px;
    width: 2px;
}

.right-topline {
    background-color: black;
    height: 2px;
    position: absolute;
    top: 0;
    width: 6px;
}

.right-bottomline {
    background-color: black;
    height: 2px;
    position: absolute;
    bottom: 0;
    width: 6px;
}