:root {
    --header-color: #FFD700;
    --font-color: #000000;
    --bg-color: #57B9FF;
 }

 /*picture adjustments*/
 .center {
   display: block;
   margin-left: auto;
   margin-right: auto;
   width: 20%;
}

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

/*social media icons*/
.socials {
   text-align: center;
 }
 
 .socials a {
   display: inline-block;  /* so that margin auto or padding applies correctly */
   margin: 0 5px;          /* spacing between icons */
 }

 .fa {
   padding: 20px;
   font-size: 50px;
   width: 30px;
   text-align: center;
   text-decoration: none;
   margin: 2px 5px;
   border-radius: 50%;
 }
 
/*navigation bar*/
.topnav-right{
   background-color: #f9f6f6;
   overflow:hidden;
}
.topnav-right a {
   float: right;
   color: #f1a8e3;
   text-align: center;
   padding: 16px 16px;
   text-decoration: none;
   font-size: 20px;
}
 /*text adjustment*/
 body {
   font-size: 20px;
    color: var(--font-color);
    background-color: var(--bg-color);
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
 }

 h1 {
   
    color: var(--header-color);
    text-align: center;
  }
       
 h2 {

    color: var(--header-color);
    text-align:center;
 }
 
 a:link {
    color: var(--font-color);  
 }   
 
 a:visited {
    color: var(--font-color);  
 }   
 
 a:active {
    color: purple;
 }