.container { height: calc(100% -30vh); width: 100vw; font-family: 'Lato', sans-serif; padding-top: 5vh; } img { border-radius: 50%; } .content_container { display: grid; justify-items: center; padding: 5vh 1vw 2vh 1vw; } .content_container img { grid-row: 2; grid-column: 1/2; height: 80vw; width: 80vw; } .content_container h1 { grid-row: 1; color: #333; font-size: 7vh; text-transform: uppercase; padding: 1vh 0; letter-spacing: .15vw; } .content_container h1 span { opacity: 70%; } .content_container p { grid-row: 2/3; grid-column: 1/2; text-align: center; background-color: rgba(255, 255, 255, 0.5); margin-top: 25vh; color: #333; font-size: 2.5vh; padding: 2vh 2vw 4vh 2vw; letter-spacing: .1vw; line-height: 4.25vh; } .content_container a { grid-row: 3; text-decoration: none; background-color: rgba(61, 189, 146, 1); opacity: 80%; color: #eee; padding: 2vh 7vw; text-transform: uppercase; letter-spacing: .35vw; transition: all ease .4s; } .content_container a:active { box-shadow: 0px 0px 10px #63caa7; } #withbutton { padding-bottom: 4vh; } #smaller_text { font-size: 6vh; } #adjust_padding { padding-top: 4vh; } #tiny { font-size: 4vh; padding: 1vh 1vw; text-align: center; } #small_centered { font-size: 6vh; text-align: center; } @media (min-width: 700px) { .content_container p { padding-bottom: 6vh; } } @media (min-width: 1000px) { .container { padding-top: 10vh; } .content_container { padding: 3vh 4vw 1vh 4vw; } .content_container img { grid-column: 1/3; grid-row: 1/3; height: 40vw; width: 40vw; align-self: center; justify-self: flex-start; } .content_container h1 { grid-column:2 ; grid-row: 1; align-self: center; letter-spacing: .3vw; } .content_container p { grid-column:2 ; grid-row: 2; margin-top: 0; width: 50vw; line-height: 5.25vh; } .content_container a { grid-column: 2; } #withbutton { padding-bottom: 6vh; } #adjust_padding { padding-top: 8vh; } }