|
|
- .container {
- height: calc(100% -30vh);
- width: 100vw;
- font-family: 'Lato', sans-serif;
- }
-
- 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) {
-
- .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;
- }
- }
|