/* CSS Document */
body {padding:0;margin:0;font-family: Arial, "sans-serif";}
a {color:#000;}
#page { display:grid; height:100%;width:100%;position:absolute;}


.top { width:100%; background:#8CC883;text-align:center;padding:20px;}
.header { background: rgba(0,0,0,0.5) url("images/dna-genetics-molecule-biology-science-gene-biotechnology-helix-evolution-thumbnail.jpg") center; background-size: cover; height:350px;text-align:center;color:#fff;display:flex;justify-content: center;flex-direction: column;position:relative;}

.header:before { background: rgba(0,0,0,0.5);content:'';width:100%;height:100%;position:absolute; }
.header .content {position:relative;z-index:10;}
.header p {font-size:2rem;font-weight:700;margin-bottom:3rem;}
.header h1 {font-size:2.75rem;font-weight:700;}

#logo {position:absolute;left:20px; top:20px;}

.content {max-width:1150px;margin:auto;padding:20px;}


.maincontent {height:100%;}
.maincontent p {font-size:1.75rem;margin-bottom:2rem;text-decoration:underline;}
.maincontent li {font-size:1.75rem;}

.footer { background:#eee;}
.footer p {font-size:1.5rem;}
#linkedin { background:#2867b2;width:40px;border-radius:5px; margin-left:250px;position:absolute;}


@media only screen and (max-width: 47.99rem){
.header p {font-size:1.75rem;margin-top:80px;}
.header h1 {font-size:2.25rem;}
.maincontent p {font-size:1.25rem;}
.maincontent li {font-size:1.25rem;}
.footer p {font-size:1.25rem;}
#linkedin { margin-left:0px;right:20px;}
}