:root { --colortext: #f3f3f3; --color1: rgb(0, 162, 255); --color2: #3434ad; --color3: #80bdff; } *, *::before, *::after { box-sizing: border-box; } body { font-family: 'Roboto', sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.4; margin: 0; color: var(--colortext); } body::before { content: ''; position: fixed; /* makes sure the ::before psuedo element stays fixed in viewport even when the user scrolls */ top: 0; left: 0; height: 100%; width: 100%; z-index: -1; /* z-index here with -1 value makes all form on top of background color green fade and url of Carlos' face. !importat because it takes places the ::before element behind all the other content on the page ensures that any content will appear above the background */ background: var(--color3); /* fallback color in case the gradient doesn't load*/ background-image: linear-gradient( 115deg, rgba(60, 60, 160, .8), rgba(138, 138, 210, .7) ), url(https://scontent.feau1-1.fna.fbcdn.net/v/t39.30808-6/464911587_9445655408792494_4478436332504796568_n.jpg?_nc_cat=103&ccb=1-7&_nc_sid=6ee11a&_nc_ohc=UpdIDG71QKQQ7kNvgH22x3m&_nc_zt=23&_nc_ht=scontent.feau1-1.fna&_nc_gid=AZdw5orNkR2l7ywrfU5-oYg&oh=00_AYBb0-bhMnoR97fkDyl-KnYxAQHks1TG4JKOJCQxnIYqfg&oe=67512BAF); background-size: auto; /* play with this some more not happy... 11/17 */ background-repeat: no-repeat; background-position: center; } h1 { font-weight: 300; line-height: 1; } p{ font-size: 1rem; } h1, p { margin-top: 0; margin-bottom: 1rem; } label { display: flex; align-items: center; font-size: 1rem; margin-bottom: 0.5rem; } input, button, select, textarea { box-sizing: border-box; /* Includes padding/border in element width/height */ margin: 0; /* Removes default margin */ padding: 0; /* Removes padding (optional, depending on design) */ font-family: inherit; /* inherited from element*/ font-size: inherit; line-height: inherit; } button { border: none; } .container { width: 100%; margin: 4rem auto 0 auto; } /* this @media query below is what pushes content more centered. Submit button used to span the entire page. and there was no padding However, thiswas et up after a big chunk of css was done. this @media query was added 11/17. Check version control for past version */ @media (min-width: 600px) { .container { max-width: 550px; } } /* This below @media query moved the contenet back to the left slightly and was added after the above 11/17 */ @media (min-width: 750px) { .container { max-width: 700px; } } .header { padding: 0 1rem; } .description { font-style: italic; /* font-weight omitted didn't seem to have an effefct. */ text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); } .clue { margin-left:.25rem; font-size: 1rem; color: #e4e4e4; } .text-center { text-align: center; } /*form*/ form { /* background: var(--color2); */ background: rgba(100, 150, 200, 0.5); /* went with washed out color instead of poacity, opacity makes the content or the words and boxes less opaque as well */ padding: 3rem .75rem; border-radius: .5rem; /* opacity: .5; */ } @media (min-width: 500px) { form { padding: 3rem; /* pulls shit to the right and up some play with 2- 2.5 - 3rem*/ } } .form-group { margin: 0 auto 1.35rem auto; padding: .2rem } .form-control { display: block; width: 100%; height: 2.25rem; padding: .25rem; color: #495057; /* not sure wht this is doing rn */ background-color: #fff; /* this gave the kind of black shadow arounf the fields for name, email and age not sure if teh color above plays into it*/ background-clip: padding-box; border: 1px solid #ced4da; /* made the black border thing go away */ border-radius: .5rem; transition: border-color 1ms ease-in-out, box-shadow 1s ease-in-out; /* also no idea what this is doing tried editing this on chrome developer */ } .form-control:focus { border-color: #80bdff; outline: 0; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .025); } .input-radio, .input-checkbox { display: inline-block; margin-right: 1rem; min-height: 1rem; min-width: 1rem; } .input-textarea { min-height: 100px; width: 100%; padding: 1rem; resize: vertical; } .submit-button { display: block; width: 100%; padding: 1rem; background: var(--color3); border-radius: 4px; cursor: pointer; color: inherit; }