body, html{
   margin:0;
   padding:0;
   height:100%;
   width: 100%;
}

body{
   background-image:url(../images/camelliatiled.jpg);
   background-position:top;
   background-size:100%;
   background-repeat:none;
   font-family: 'Philosopher', sans-serif;
   font-variant-caps: small-caps;
   text-align:center;
   color:white;
   display:flex;
   flex-direction:column;
}

header h1{
   margin-top:0;
}

h1{
   font-size:3em;
}

header{

   background-color:#4b1549;
   background-size:162px;
   text-align:center;
}

.navhead{
   display:flex;
   max-width:800px;
   align-items:center;
   justify-content:space-between;
   margin:0 auto;
   padding:10px 0;
   height:175px;
   flex-wrap:wrap;
}

.navhead li a{
   padding:10px; 
}
   
.navhead h1{
   margin:0;
}

  .navhead, .buttons {
    list-style:none;
 }

 /*#mandala {
    position:relative;
    width:457px;
    
 }*/

 .center{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 457px;
 }

 .keywords{
   color:rgba(255, 255, 255, 0.5)
 }


 .designerartistmusician{
   font-size:.5em;
   display:block;
   color:#71973e;
 }

 .stephanie-is{
   max-width:1300px;
   margin: 0 auto;
   display:flex;
   flex-wrap:wrap;
   justify-content:space-evenly;
   align-items: center;
 }

 .stephanie-is div{
   font-size:3em;
   max-width:400px;
   text-shadow: black 0px 0px 30px;
 }

 .stephanie-is img{
   width:100%;
   max-width:297px;
   max-height:217px;
   height:auto;
 }

 .links a {
   padding: 0 10px;
 }

 footer{
   background-color:#4b1549;
   background-size:30px;
   padding:1em 0 1em 0;
   flex-shrink:0;
 
 }
 
 .footercontainer{
   max-width:700px;
   margin: 0 auto;
   display:flex;
   flex-wrap:wrap;
   justify-content:space-evenly;
 }

 .footercontainer > *{
   padding:0 10px;
 }


 #content{
   flex: 1 0 auto;
 }

 a:visited{
   color:white;
 }
 a:active{
   color:white;
 }

 a:hover{
   color:white;
   font-weight:bolder;
   font-size:1.2em;
 }

 a:any-link{
   text-decoration:none;
   color:white;
 }


 .grid {
   display: grid;
   grid-template-rows: 170px 170px 170px;
   grid-template-columns: 170px 170px 170px;
   background-image: url(../images/mandala-nav.png);
   background-size:cover;
  
}

 
nav.mandala {
 display: flex;
 justify-content: center;
}



.circle {

 /* display: flex;
 align-items: center;
 justify-content: center; */
 color:white;
 border:0;
 padding:44px;
}

.circle a{
   border-radius:50%;
   border: 4px solid white;
   background-color:#364c22;
   width:100%;
   height:100%;
   /* line-height:calc(100% - 10px); */
   vertical-align:middle;
   display:inline-block;
   display: flex;
   align-items: center;
   justify-content: center;
}

@media only screen and (max-width: 600px) {
   nav.mandala {
      transform: scale(0.7);
     }
 }