html,
body {
    height: 100%;
    margin: 0%;
    background-color: #FAE8E5;
}

.main-container {
    justify-content: space-between;
    display: flex;
    flex-direction: column;
    /*    height: 100vh;*/
    min-height: 100%;
    width: 70vw;
    align-items: center;
    margin: auto;
}

.logo-container {
    position: absolute;
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.logo {
    width: 100px;
    height: 100px;
}

.image-container {
    display: flex;
    justify-content: center;
    margin-top: 5px;
    height: 80vh;
}

.main-image {
    width: auto;
    height: 100%;
}

.options {
	height: 20vh;
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow-x: auto;
    width: 100%;
    margin-top: 20px; 
/*    margin-bottom: 40px;*/
}

.option {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: white;
    margin: 0.57rem;
    padding: 8px;
    border: 4px solid #FFF;
}

.option:hover {
    cursor: pointer;
}

.option.selected {
    border: 4px solid #84AE9E;
}

.options .option:first-child {
    margin-left: auto;
}

.options .option:last-child {
    margin-right: auto;
}


.option-color {
    width: 128px;
    height: 128px;
}

.option-name {
    padding: 0;
    margin: 0;
    width: 128px;
    height: 32px;
    /* UI Properties */
    text-align: center;
    font: normal normal normal 20px/27px Segoe UI;
    letter-spacing: 0px;
    color: #707070;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
    scrollbar-width: auto;
    scrollbar-color: #84AE9E transparent;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: #84AE9E;
    border-radius: 4px;
    border: 4px solid transparent;
}

@media (max-width: 720px) {
    .main-container {
        width: 100vw;
    }

    .logo-container{
	position:relative
    }

    .image-container{
	    height: auto;
    }

    .main-image {
        width: 100vw;
        height: auto;
    }

    .options{
	    height: auto;
    }
}

/*
    @media (min-width: 1250px) {
        .main-image {
            max-height: 60vh;
        }
    }
    
    
    @media (max-height: 600px) {
        .main-image {
            max-height: 50vh;
        }
    }
    */