html {
background-color: beige;
background-attachment: fixed;
background-size: cover;
}
body {
margin: 0;
height: 1000px;
}
.header {
margin: 0;
position: fixed;
top: 0;
width: 100%;
background-color: #5FB8D4;
height: 26px;
padding-top: 6px;
opacity: 1;
text-align: center;
font-family: 'helvetica';
font-size: 18px;
font-weight: 100;
color: #fff;
}
.pageHeading {
background-image: url(http://i.imgur.com/TewF8td.jpg);
background-size: cover;
color: purple;
font-family: brandon grotesque;
font-size: 90px;
text-align: center;
text-shadow: 3px 3px 3px black;
}
.tagline {
color: black;
text-align: center;
font-weight: bold;
font-family: brandon grotesque;
}
.firstheading {
position: relative;
font-family: Trebuchet MS;
text-align: center;
top: 125px;
font-size: 40px;
color: #3b464b;
}
u {
border-bottom: 4px dashed #3b464b;
text-decoration: none;
}
.introduction {
font-family: "Palatino Linotype";
}
.subheading {
font-size: 30px;
font-family: 'Spectral';
}
.pageContent {
background-color: #a3cac6;
padding: 30px;
border-radius: 10px;
box-shadow: 5px 5px 5px black;
width: 700px;
margin-left: auto;
margin-right: auto;
margin-top: 150px;
margin-bottom: 15px;
opacity: 0.8;
font-family: atlas grotesk;
color: black;
text-align: justify;
}
.links {
width: 90%;
margin: 0 auto;
text-align: center;
font-family: trebuchet ms;
}
.link {
display: inline-block;
vertical-align: top;
width: 100px;
height: 34px;
line-height: 36px;
text-transform: uppercase;
text-decoration: none;
color: #3b464b;
letter-spacing: 0.1em;
text-align: center;
font-size: 0.8rem;
margin: 10px;
position: relative;
}
.link span {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
text-align: center;
}
.link-text {
color: blue;
}
.link-text:hover {
color: gray;
}
.opacity {
transition: background-color 0.3s linear, color 0.3s linear;
background: rgba(255, 255, 255, 0);
}
.opacity:hover {
color: #124a58;
background: rgba(255, 255, 255, 0.9);
}
.wipe {
transition: color 0.3s ease-out;
}
.wipe::after {
width: 100%;
height: 100%;
display: block;
background-color: #fff;
content: " ";
position: absolute;
top: 0;
transition: transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translateY(34px);
z-index: -1;
}
.wipe:hover {
color: #124a58;
}
.wipe:hover::after {
transform: translateY(0px);
}
.underline {
border: 2px solid transparent;
}
.underline::after {
width: 0%;
height: 2px;
display: block;
background-color: #fff;
content: " ";
position: absolute;
top: 34px;
left: 50%;
transition: left 0.2s cubic-bezier(0.215, 0.61, 0.355, 1), width 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.underline:hover::after {
width: 100%;
height: 2px;
display: block;
background-color: #3b464b;
content: " ";
position: absolute;
top: 34px;
left: 0;
}