* { 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: #000000;
}

#leftcolumn {
 height: 70%;
 width: 63%;
 margin: 2% 0% 0% 0%;
 float: left;
 padding-right: 10%;
 border-right: 1px solid;
 background:#var(--page);
 margin-bottom: 5vw;
}

#Topic, #Missing {
  color: #000000;
  margin: 0% 2% 5% 5%;
  text-decoration: none;
  font-family: Georgia,Times,Times New Roman,serif;
  font-weight: bold;
  text-align: left;
}

#Topic {
  font-size: 3.5vw;
  width:100%;
}

#Missing {
  font-size: 2vw;
  width:50%;
}

#artBox1L, #artBox2L, #artBox3L, #artBox4L, #artBox5L, #artBox6L {
  width: 100%;
  margin: 7% 0% 0% 10%;
  border-top: 1px solid black;
  padding-top: 5%;
}


#art1TopicL, #art2TopicL, #art3TopicL, #art4TopicL, #art5TopicL, #art6TopicL {
  color: #919191;
  width: 50%;
  margin: 0% 0% 0% 0%;
  text-decoration: none;
  font-family: Garamond,Baskerville,Baskerville Old Face,Hoefler Text,Times New Roman,serif;
  font-size: .7vw;
  display: inline;
}

#art1TitleL, #art2TitleL, #art3TitleL, #art4TitleL, #art5TitleL, #art6TitleL {
  color: #000000;
  width: 50%;
  margin: 0% 10% 0% 0%;
  text-decoration: none;
  font-family: Georgia,Times,Times New Roman,serif;
  font-size: 1.2vw;
  font-style: bold;
}

#art1AuthorL, #art2AuthorL, #art3AuthorL, #art4AuthorL, #art5AuthorL, #art6AuthorL {
  color: #919191;
  margin: 0% 0% 0% 0%;
  width: 40%;
  text-decoration: none;
  font-family: Garamond,Baskerville,Baskerville Old Face,Hoefler Text,Times New Roman,serif;
  font-size: .9vw;
}

#art1SubtitleL, #art2SubtitleL, #art3SubtitleL, #art4SubtitleL, #art5SubtitleL, #art6SubtitleL {
  color: #000000;
  width: 50%;
  margin: 5% 4% 5% 0%;
  font-family: Garamond,Baskerville,Baskerville Old Face,Hoefler Text,Times New Roman,serif;
  font-size: .9vw;
}


#blackBox1L, #blackBox2L, #blackBox3L, #blackBox4L, #blackBox5L, #blackBox6L {
  margin: 0% 3% 5% 3%;
  width: 30%;
  height: 8.4vw;
  background:#000000;
  display: inline-block;
  float: right;
}

#art1L, #art2L, #art3L, #art4L, #art5L, #art6L {
  width: auto;
  height: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#scrollBox {
    margin: 10% 0% 4% 0%;
}

#fiveB, #oneB, #oneF, #fiveF{
 margin: 0% 1% 0% 1%;
 display: inline;
 font-family: Agency FB;
 font-size: 1vw;
 text-decoration: none;
 color: #000000;
}

#fiveB:hover, #oneB:hover, #oneF:hover, #fiveF:hover{
  color: var(--backround);
}

#fiveB{
    margin: 0% 0% 0% 10%;
}

#pageInfo {
  text-decoration: none;
  font-family: Agency FB;
  font-size: 1vw;
  display: inline;
}

#artBox1L:hover {
  color: var(--backround);
}


#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%;
}



#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%;
}