HTMLgenerator/HTMLUserInput/style.css

@import url('https://fonts.googleapis.com/css?family=Roboto:300');

body{
    width: 100%;
    float: left;
    position: relative;
    margin: 0;
    padding: 0;
    background: rgb(10, 9, 9);
    color: white;
    font-family: 'Roboto', sans-serif;
}
#UpperInput{
    width: 95%;
    margin-left: 2.5%;
    margin-right: 2.5;
    float: left;
    position: relative;
}
#LeftImg{
    width: 25%;
    float: left;
    position: relative;
}
#LeftImg img{
    width: 100%;
    float: left;
    display: block;
}
#RightSide{
    width: 75%;
    float: left;
    position: relative;
}
.tableInput{
    float: left;
    width: 50%;
    position: relative
}

#BottomInput{
    width: 95%;
    margin-left: 2.5%;
    margin-right: 2.5%;
    float: left;
    position: relative;
}

#Trait1{
    border-top-right-radius: 150px 90px;
    border-bottom-left-radius: 50px;
    width: 21%;
    margin: 1%;
    float: left;
    position: relative;
    background-color: rgba(255,254,254,0.2);
    padding: 1%;
}
#Trait2{
    border-top-left-radius: 150px 90px;
    border-bottom-right-radius: 50px;
    width: 21%;
    margin: 1%;
    float: left;
    position: relative;
    background-color: rgba(255,254,254,0.2);
    padding: 1%;
}
#Trait4{
    border-top-right-radius: 150px 90px;
    border-bottom-left-radius: 50px;
    width: 21%;
    margin: 1%;
    float: left;
    position: relative;
    background-color: rgba(255,254,254,0.2);
    padding: 1%;
}
#Trait3{
    border-top-left-radius: 150px 90px;
    border-bottom-right-radius: 50px;
    width: 21%;
    margin: 1%;
    float: left;
    position: relative;
    background-color: rgba(255,254,254,0.2);
    padding: 1%;
}
.tr1{box-shadow: 5px 5px 5px 0 #13AB92}
.tr2{box-shadow: -5px 5px 5px 0 #F61B35}
.tr3{box-shadow: 5px -5px 5px 0 #41DB18}
.tr4{box-shadow: -5px -5px 5px 0 #FF781C}
input[type=text]{
    color: white;
    background-color: rgb(21, 20, 20);  
    width: 100%;  
}
input[type=number]{
    color: white;
    background-color: rgb(21, 20, 20);
    width: 100%;
}
/*input[type=text]{ width: 90%}*/
select{
    color: white;
    width: 100%;
    overflow: hidden;
    background-color: rgba(255, 254, 254, 0.3);
    border: 1px solid black;
}
select option {
    color: #fff; 
    border: 0;
    margin: 0;
}

#table{
    width: 100%;
    margin-top:15%;
    margin-bottom: 0;
    float: left;
}
.toRight{text-align: right}
/*inner width*/
.inWid{
    width: 55px;
}
/*floatRight*/
.fR{float: right}
/*floatLeft*/
.fL{float: left}
.bgColorGray{background-color: rgba(255, 254, 254, 0.3)}
/*innerRadiusBottomLeft*/
.iRBL{border-bottom-left-radius: 20px}
/*innerRadiusBottomRight*/
.iRBR{border-bottom-right-radius: 20px}
/*innerRadiusTopLeft*/
.iRTL{border-top-left-radius: 20px}
/*innerRadiusTopRight*/
.iRTR{border-top-right-radius: 20px}
/*innerRadiusBottomLeft big*/
.iRBLb{border-bottom-left-radius: 40px}
/*innerRadiusBottomRight big*/
.iRBRb{border-bottom-right-radius: 40px}
/*innerRadiusBottomLeft little*/
.iRBLl{border-bottom-left-radius: 12px}
/*innerRadiusBottomRight little*/
.iRBRl{border-bottom-right-radius: 12px}
/*innerRadiusTopLeft little*/
.iRTLl{border-top-left-radius: 12px}
/*innerRadiusTopRight little*/
.iRTRl{border-top-right-radius: 12px}
/*premade paddings*/
.pdd0{padding: 0}
.pdd1{padding: 1%}
.pdd2{padding: 2%}
.pdd3{padding: 3%}
/*borderStyleNone*/
.bSN{border-style: none}
/*select Fix*/
.selFix{
    padding-top:6%;
    padding-bottom:6%;
    height: 88%;
    font-size: 100%;
    font-family: 'Roboto',sans-serif
}
.bShl{box-shadow: 0 0 1px white}
/*traits box shadow*/
.tr1bs{border: 1px solid #13AB92;box-shadow: 0 0 7px 0 #13AB92 inset}
.tr2bs{border: 1px solid #F61B35;box-shadow: 0 0 7px 0 #F61B35 inset}
.tr3bs{border: 1px solid #41DB18;box-shadow: 0 0 7px 0 #41DB18 inset}
.tr4bs{border: 1px solid #FF781C;box-shadow: 0 0 7px 0 #FF781C inset}
/*other box shadow*/
.otbs{border: 1px solid white;box-shadow: 0 0 7px 0 white inset}