* { padding: 0; margin: 0; }
:root {
  --page: #ffffff;
  --backround: #fff48d;
}

#wholepage { position:absolute; margin:0px; width:100%; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 height: 100%;
 width: 100%;
 background-color:var(--backround);
}
#wrapper {
 margin: 0 auto;
 width: 80%;
 height: 100%;
 background-color:var(--page);
}

#header {
 color: var(--backround);
 height: 100%;
 width: 100%;
 float: left;
 background-color:var(--backround);
 background:var(--backround);
}

#img-Header{
    height: 30%;
    width: 30%;
    margin: 0% 0% 0% 2.5%;
}

#top{
  color: #000000;
  float: right;
  display: inline-block;
  text-decoration: none;
  margin: 9% 2.5% 0% 0%;
  font-family: sans-serif;
  border-radius: 25px;
  font-style: italic;
  font-size: 2.6vw;
  background-color:var(--backround);
  background:var(--backround);
}


.responsive {
  width: auto;
  height: 100%;
}

#fixNav {
 float: left;
 width: 100%;
 height: 100%;
 background-color:var(--backround);
 display: inline;
}

#navigation {
 float: left;
 width: 95%;
 height: 100%;
 padding-bottom: 10px;
 padding-top: 10px;
 margin: 0px 0px 0px 2.5%;
 background-color:#000000;
 display: inline;
 border-radius: 8px;
 border-bottom: 5px solid #e6e6e6;
 border-image: linear-gradient(to right, #ffd400 36.85%,#e6e6e6 36.85%, #e6e6e6 100%) 2;
}

#topic1{
  display: inline;
}
#link1, #link2, #link3, #link4, #link5, #link6, #link7{
  color: #000000;
  text-decoration: none;
  font-family: Georgia,Times,Times New Roman,serif;
  padding-left:3%;
  padding-right:3%;
  font-size: 1vw;
  color: var(--page);
}

#link1, #link2, #link3, #link4, #link5, #link6 {
  border-right: 1px solid white;
}

#link1:hover, #link2:hover, #link3:hover, #link4:hover, #link5:hover, #link6:hover, #link7:hover{
  color: var(--backround);
}

#search {
 float: left;
 width: 35%;
 height: 100%;
 margin: 0% 80% 0% 2.5%;
 background-color:#ffd400;
 display: inline;
 border-bottom: 5px solid #e6e6e6;
}

#lookUp {
    width: 80%;
    height: 1vw;
    margin: 1% 0% 1% 1%;
    padding: .5% 0% .5% 2%;
    background-color: #fef58f;
    font-family: Georgia,Times,Times New Roman,serif;
    font-size: 1vw;
}

#searching {
  background-color: #fef58f;
  margin: 1% 8% 0% 0%;
  float: right;
  padding: .5% 0% .5% 2%;
  width: 5%;
  height:1.4vw;
  border: 2px solid #000000;
  border-radius: 50%;
}

#searching:hover {
  background-color: #f1de28;
}

#leftcolumn {
 height: 70%;
 width: 70%;
 border-radius: 30px;
 margin: 2% 0% 0% 0%;
 float: left;
 background:#var(--page);
 padding-bottom: 5vw;
}

#article-title {
  color: #000000;
  margin: 0% 2% 5% 2%;
  text-decoration: none;
  font-family: Georgia,Times,Times New Roman,serif;
  font-weight: bold;
  font-size: 2.2vw;
  text-align: center;
}

#article-authdate {
  color: #919191;
  margin: 1% 2% 1% 2%;
  text-decoration: none;
  font-family: Garamond,Baskerville,Baskerville Old Face,Hoefler Text,Times New Roman,serif;
  font-weight: bold;
  font-size: 150%;
  text-align: center;
  font-style: italic;
}

#article-subtitle{
  color: #919191;
  margin: 0px 0px 0px 0px;
  text-decoration: none;
  font-family: Garamond,Baskerville,Baskerville Old Face,Hoefler Text,Times New Roman,serif;
  font-size: 1vw;
  text-align: center;
}
#funnyLinething {
  width: 97%;
  height 100%;
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-color: #888888;
  margin: 1% 3% 3% 5%;
  font-size:50%;
}

#share-buttons {
    padding-right: 40px;
    margin: 0% 0% .1% 8%;;
    
}

#article-content {
  padding-right: 40px;
  border-right: 1px solid;

}

#article-body {
  color: #000000;
  margin: 4% 1% 1% 8%;
  text-decoration: none;
  font-family: Garamond,Baskerville,Baskerville Old Face,Hoefler Text,Times New Roman,serif;
  font-size: 1.5vw;
  text-align: left;
  white-space: pre-line;
  display: block;
}

#article-body:first-letter
{
    font-size: 50px;
    font-weight: bold;
}

#Black-Fucking-Bars {
  margin: 0% 0% 0% 8%;
  width: 90%;
  height:27.1vw;
  background:#000000;
}

#article-photo {
  height: 100%;
  width: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#Finisher {
  font-family: Garamond,Baskerville,Baskerville Old Face,Hoefler Text,Times New Roman,serif;
  font-size: 30px;
  font-weight: bold;
  text-align: right;
  margin: 10% 0% 0% 0%;
  padding-bottom: 50px;
}

#rightcolumn {
 float: right;
 height: 100%;
 width: 25%;
 margin: 0% 0% 0% 0%;
 display: inline;
 background:var(--page);
}

#instagram-button {
    height:100%;
    width:100%;
    display: flex;
    flex-direction: row;
    font: Garamond;

}

.fa {
  padding: 20px;
  font-size: 90px;
  width: 50px;
  text-align: center;
  text-decoration: none;
}

.fa-instagram {
  background: #125688;
  color: white;
}

.fa:hover {
  opacity: 0.7;
}

#ourInst {
    width: 50%;
}

#update{
    color: #000000;
    text-align: center;
  display: inline-block;
  text-decoration: none;
  margin: 0% 8% 0% 0%;
  font-family: sans-serif;
  border-radius: 25px;
  font-size: 1.5vw;
  background-color:var(--page);
  background:var(--page);
}


#NestedBox {
  border-radius: 25px;
  margin: 10% 10% 5% 2%;
  width: 100%;
  height: 90%;
}

#hotnews{
  color: #000000;
  padding: 2%;
  text-decoration: none;
  font-family: Georgia,Times,Times New Roman,serif;
  text-align: center;
  background-color: #f2f2f2;
  font-size: 2vw;
  border: solid;
  border-color: #aaaaaa;
  width: 82%
}

#artBox1, #artBox2, #artBox3, #artBox4 {
    width: 90%;
    height: 100%;
    margin: 5% 0% 0% 0%;
    border-bottom: 1px solid;
    border-color: #e1e1e1;
    padding-bottom: 20px;
    font-family: Agency FB;
    font-weight: bold;
    font-size: 110%;
    display: inline-block;
}

#blackBox1, #blackBox2, #blackBox3, #blackBox4 {
  margin: 0% 0% 0% 3%;
  width: 45%;
  height:4.46vw;
  background:#000000;
  display: inline-block;
}

#art1, #art2, #art3, #art4{
  width: auto;
  height: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#art1Title, #art2Title, #art3Title, #art4Title {
    width: 45%;
    float:right;
    font-size: .65vw;
    margin: 0% 0% 0% 0%;
}

#artBox1:hover, #artBox2:hover, #artBox3:hover, #artBox4:hover{
  color: var(--backround);
}

.responsiveH {
  width: 100%;
  height: 100%;
}

#footer {
 width: 100%;
 text-align: center;
 clear: both;
 color: #333;
 background-color:#aeadab;
 height: 100%;
 font-weight: bold;
  font-size:.6vw;
}

#foot1 {
    text-align: left;
    display: inline-block;
    margin: 1% 15% 1% 0%;
}

#foot2 {
    text-align: right;
    display: inline-block;
    margin: 1% 0% 1% 15%;
}