body {
    font-family :'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

#add-new-color {
    display : flex;
    flex-direction : column;
    border : 4px;
    height: 600px;
    width: 250px;
    border-style : solid;
    border-color : black;
    margin-left : 30px;
    
}

#autoComplete {
    width : 230px;
    margin-left : 10px;
}

header {
    display : flex;
    flex-direction : row;
    align-content : baseline;
    justify-content : space-between;
    height : 200px;
}

h1 {
    color : #376A3E;
    font-size : 70px;
    font-weight : bold;
    font-family :'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

#right-header {
    display : flex;
    flex-direction : row;
    align-items : center;
}

#color-title {
    display: flex;
    align-self : center;
    font-weight : bold;
    font-size : 20px;
}

button.button {
    display: flex;
    align-self: center;
    justify-content : center;
    background-color: #376A3E;
    color: white;
    width: 120px;
    margin : 30px;
    padding : 6px;
    border-radius : 10px;
}

div.color-option {
    display : flex;
    width : 210px;
    align-self : center;
    justify-content : space-between;
}

div.color-square {
    width : 45px;
    height : 45px;
    border : 2px;
    background-color : white;
    border-style : solid;
    border-color : black;
}

div.color-list { 
    display : flex;
    flex-wrap : wrap;
    flex-direction : column;
    justify-content : space-around;
    padding-top : 30px;
}

#number {
    display : flex;
    width : 30px;
    justify-content : flex-end;
    padding : 3px;
}

#name {
    display : flex;
    flex-wrap : wrap;
    width : 110px;
    margin-left : 3px;
}

#right-header {
    display : flex;
    flex-direction : row;

    justify-content : flex-end;
}

#round {
    width : 40px;
    height : 40px;
    border-radius : 40px;
    display : flex;
    justify-content : center;
    align-items : center;
}

#page {
    display : flex;
    flex-direction : row;
    
}

#right-of-page {
    display : flex;
    flex-direction : column;
   padding-left : 100px;
}

#right-side-buttons {
    display : flex;
    flex-direction : row;
    align-items : center;
    justify-content : space-between;
    max-width : 990px;
    min-width : 960px;
    padding-bottom : 10px;
}

#upload-button {
    margin-left : 420px;
    margin-right : 0px;
}

img.temp {
    width : 900px;
    height : 500px;
    padding-left : 60px;
}

div.color-option:hover {
    background-color : #C5C9C8;
}

div.size-change {
    display : flex;
    flex-direction : row;
    justify-content : space-between;
    width: 140px;
    margin-right : 30px;
    height : 40px;
    padding : 6px;
    padding-left : 0;
    border-style : solid;
    border-width : 2px;
    border-color : black;
    align-items: center;
    font-size : 17px;
}

div.change-right {
    display : flex;
    flex-direction : column;
    justify-content : center;
    width : 20px;
    height : 30px;
    align-items : center;
}

div.square {
    width : 20px;
    min-height : 20px;
    border-style : solid;
    border-width : 2px;
}

#square-div {
    display: flex;
    flex-direction : row;
    flex-wrap : wrap;
    width : 480px;
    height : 400px;
    margin-right : 20px;
}

button.change-button {
    width : 25px;
    display : flex;
    justify-content : center;
    font-size : 15px;
}