body { background-color: #1c1c1c; color: #ffffff; font-family: 'Montserrat', sans-serif; letter-spacing: 0.05em; } h1 { font-weight: normal; margin: 0; } h2 { font-weight: normal; } p { line-height: 150%; } .content { width: 80vw; margin: 0 auto; margin-top: 10vh; } article { margin-top: 10%; margin-bottom: 42px; } .generator { margin-top: 10%; display: flex; flex-direction: column; } .menu { display: flex; flex-direction: row; justify-content: space-around; } .col1 { display: flex; flex-direction: column; } .generator img { border: 10px solid rgb(235, 182, 67); border-radius: 0.5em; } .menu div { width: 40%; display: flex; flex-direction: column; justify-content: space-around; } #mean_sliders { flex-direction: column; } .menu div input { width: 100%; /* margin: 1em; */ } .footer { width: 100%; margin-top: 5%; margin-bottom: 5%; display: flex; flex-direction: row; justify-content: center; } .white_btn { background-color: #dedede; color: #1c1c1c; text-decoration: none; text-align: center; font-weight: bold; padding: 0.5em 1em; border-radius: 1em; box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5) } #generate_btn { font-family: 'Montserrat', sans-serif; font-size: large; border: none; margin: 0 auto; display: block; background-color: #dedede; color: #1c1c1c; text-decoration: none; text-align: center; font-weight: bold; padding: 0.5em 1em; border-radius: 1em; margin-top: 3em; box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5) } #generate_btn:hover{ align-self: center; background-color: rgb(235, 182, 67); box-shadow: px 5px 10px 0px rgba(0, 0, 0, 0.5) } #logvar_sliders{ display: none; } @media only screen and (max-width: 1000px) { div { overflow-x: hidden; } .col1{ margin-bottom: 2%; } .menu { /* margin-left: 10%; */ height: 400%; width:250%; display: block; line-height:40px; } label { font-size: 200%; } #generate_btn{ font-size: 2rem; position:fixed; bottom: 4rem; cursor: pointer; } .white_btn { width: auto; height: auto; font-size: 200%; margin-top: 20%; margin-bottom: 10%; } }