.contact-about { position: absolute; top: 0; left: 0; z-index: 0; width: 100vw; height: 100vh; text-align: center; } .contact-about-wrapper { position: relative; margin: 0 auto; margin-top: 7rem; overflow-y: hidden; height: 80vh; max-width: 30rem; } .contact-about-section { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2); border-radius: 2px 2px 2px 2px; -moz-border-radius: 2px 2px 2px 2px; -webkit-border-radius: 2px 2px 2px 2px; height: auto; background-color: rgba(20, 31, 43, 0.3); } .contact-about-section h1 { text-align: center; font-weight: regular; font-size: 1.3rem; padding-bottom: 0; color: white; } #aboutpage { background: url(/images/about-background.jpg) no-repeat center center fixed; background-size: cover; -o-background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; } #about-section { text-align: center; padding-top: 2rem; padding-bottom: 2rem; } #about-section h1 { margin-top: 1rem; margin-bottom: 1.1vh; } #about-section p { margin-top: 0; padding-top: 0.5vh; text-align: justify; font-weight: normal; color: #e8e8e8; line-height: 1.61; font-weight: 300; margin-left: 4vw; margin-right: 4vw; } .tab { display: inline-block; margin-left: 2rem; } @media screen and (max-width: 800px) { #aboutme-wrapper { width: 100%; max-width: 100%; margin-top: 9rem; } #about-section { padding-top: 0; height: 100vh; top: 0; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); background-color: transparent; } #about-section h1 { margin-top: 2rem; } } @media screen and (max-width: 500px) { #aboutme-wrapper { height: 66vh; margin-top: 10rem; overflow-y: hidden; } #aboutme-wrapper p { margin-left: 6vw; margin-right: 6vw; } } #contactpage { background: url(/images/contact-background.jpg) no-repeat center center fixed; background-size: cover; -o-background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; } #contact-section { height: auto; width: 100%; background-color: rgba(20, 31, 43, 0.3); } #contact-section ul { list-style-type: none; padding: 0; margin-top: 0.3rem; padding-top: 0.2rem; padding-bottom: 8vh; } #contact-section ul li { color: #e8e8e8; font-weight: 300; margin-top: 20px; } #contact-section ul li a { color: inherit; text-decoration: none; box-shadow: inset 0 -4px 0 rgba(241, 20, 104, 0.9); -webkit-transition: background-color 0.2s ease; -moz-transition: background-color 0.2s ease; -ms-transition: background-color 0.2s ease; -o-transition: background-color 0.2s ease; transition: background-color 0.2s ease; } #contact-section ul li a:hover { background-color: rgba(241, 20, 104, 0.9); } #contact-section h1 { display: inline-block; max-width: 20rem; margin-top: 3rem; margin-bottom: 0; } @media screen and (max-width: 800px) { #contact-wrapper { width: 100%; max-width: 100%; margin-top: 9rem; height: 80vh; } #contact-wrapper h1 { margin-bottom: 0; margin-top: 2rem; } #contact-wrapper ul { margin-top: 0; } #contact-section { height: 100vh; top: 0; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); background-color: transparent; } } @media screen and (max-height: 390px) { #contact-wrapper p { font-size: 0.8rem; } } @media screen and (max-width: 500px) { #contact-wrapper { height: 66vh; margin-top: 10rem; overflow-y: hidden; } }