.container { width: 100vw; font-family: 'IBMPlexMono', sans-serif; padding-top: 15vh; } img { border-radius: 50%; } .content_container { display: grid; justify-items: center; padding: 0 1vw 2vh 1vw; } .content_container img { grid-row: 2; grid-column: 1/2; height: 80vw; width: 80vw; } .content_container h1 { grid-row: 1; color: #000; font-size: 6vh; 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: 35vh; color: #333; font-size: 1.5vh !important; padding: 2vh 2vw 4vh 2vw; letter-spacing: .1vw; line-height: 3.25vh !important; } .content_container a { grid-row: 3; text-decoration: none; background-color: #fff; border: .25vw solid #000; opacity: 80%; color: #000; padding: 2vh 7vw; text-transform: uppercase; letter-spacing: .35vw; transition: all ease .4s; } .content_container a:hover { box-shadow: 0px 0px 10px #8693AB; } .content_container a:active { box-shadow: 0px 0px 10px #8693AB; } #withbutton { padding-bottom: 4vh; } #withbutton p { padding-bottom: 3vh; } #smaller_text { font-size: 3.5vh; } #smaller { font-size: 4.5vh; } #mid_padding_bottom { font-size: 10vw; text-align: center; margin-bottom: 2vh; } #adjust_padding { padding-top: 4vh; } #tiny { font-size: 4vh; padding: 1vh 1vw; text-align: center; } #small_centered { font-size: 4.5vh; text-align: center; line-height: 8vh; } #padding_bottom { padding-bottom: 4vh; } #space_between { padding-bottom: 8vh; } #weed { height: 90vw; } #up { margin-top: 25vh !important; } #littleup { margin-top: 30vh !important; } #down { margin-bottom: 0; } #small { font-size: 2.95vh !important; } @media (min-width: 700px) { .content_container h1 { margin-top: 0; font-size: 5.5vh; } .content_container p { padding-bottom: 6vh; padding-top: 2vh; margin-top: 25vh; font-size: 1.8vh !important; line-height: 3.75vh !important; } .content_container { display: grid; justify-items: center; padding: 1vh 1vw 2vh 1vw; } .content_container img { height: 40vw !important; width: 40vw !important; } #smaller_text { font-size: 6vh; } #littleup { margin-top: 20vh !important; } } @media (min-width: 1000px) { .container { padding-top: 5vh; margin-bottom: 6vh; } .content_container { padding: 3vh 4vw 1vh 4vw; margin-top: 6vh; } #first { margin-top: 0; } .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; font-size: 1.95vh !important; padding: 5vh 2.5vw; } .content_container a { grid-column: 2; padding: 2vh 3vw; border: .15vw solid #000; } #withbutton { padding-bottom: 6vh; } #adjust_padding { padding-top: 8vh; } #small_centered { margin-left: 2vw; font-size: 6vh; } #up, #littleup { margin-top: 5vh !important; } #littleup { margin-bottom: 0 !important; padding-bottom: 0 !important; } #mysvg { border-radius: 15%; margin-left: 1vw; } #permapp { margin-bottom: 7.5vh; } #smaller_text { margin-left: 10vw; } } #spider { height: 85vw; width: 90vw; }