/* use "." before a selector to select a class */
/* use "#" before a selector to select an id */ 


/*    Smooth SCROLL  */
html {
    scroll-behavior: smooth;
  }

  body{
    background-color:rgb(194, 179, 167);
  }

    a{
        color:black;
    }
    
        /* Link Styling*/
    /* unvisited link */
    a:link {
        color: rgb(94, 51, 65);
              text-decoration: none;
      }
      /* visited link */
      a:visited {
        color: rgb(94, 51, 65);
         opacity:0.8;
               text-decoration: none;
      }
      /* mouse over link */
      a:hover {
        color: hotpink;
            transition:.15s;
             opacity:1;
                   text-decoration: none;
                   cursor:e-resize;
      }
      /* selected link */
      a:active {
        color: black;
              text-decoration: none;
      }
    
  
    /*
.dark-mode{
  /*
  background: transparent;
      border: none ;
    font-family:Garamond;
    cursor:pointer;
    
      background-color:rgb(94, 51, 65);
      color: color: rgb(194, 179, 167);
}

#dark-mode{
  background: transparent;
      border: none ;
    font-family:Garamond;
    cursor:pointer;
      color:rgb(94, 51, 65);
}

#dark-mode:hover{
    color:hotpink;
}

*/


/* **********   chime     ********** */
#secret{
       background: transparent;
  color: rgb(194, 179, 167);
    border: none ;
    font-size: 40px;
}

#secret:hover{
  background: transparent;
  color:rgb(94, 51, 65);
  cursor:no-drop;
}

#secret:active{
  background: transparent;
  color:hotpink;
  
}

/* **********   Name and About     ********** */
.namebar{
    position: fixed;
    float:left;
    top:230px;
    left:50px;
}

#namebutton{
  background: transparent;
      color: rgb(94, 51, 65);
      border: none ;
    font-size: 1.8em;
    font-family:Garamond;
    transition:.15s;
    cursor:help;
    text-decoration: overline;
}

#namebutton:hover{
  color:hotpink;
}

.nametext {
      color: rgb(94, 51, 65);
    font-size: 1.5em;
}

#abouttext{
  width: 300px;
  height:fit-content;
  display: none;
  position:absolute;
}


/* **********   Nav bar Right     ********** */
.nav{
   text-align: right;
   position:fixed;
   top:25%;
   line-height: 1.7;
   right:50px;
   white-space: nowrap;
}

.navlink{
}

.navsublink{
    font-style: italic;
    font-size: smaller;
    text-align: justify;
    text-indent: 20px;
    direction:rtl;
}


/* **********   Container Styles     ********** */
#container {
    width: 600px;
    margin:auto;
    text-align: justify;
    background-color: rgb(194, 179, 167);;
    padding-left: 20px;
    padding-right: 20px;
}

/*      ************        Container Fade In       ************         */
#container{
opacity: 0;
            animation: fadeIn 8s forwards;
        }
        @keyframes fadeIn {
            to {
                opacity: 1;
            }

}


.titletext {
    color: rgb(94, 51, 65);
    font-size: 30px;
    padding-top: 20px;
}

.captiontext {
    color: rgb(94, 51, 65);
    text-align: center;
    font-style: italic;
    padding-bottom: 100px;
}

.bodytext {
    color: rgb(94, 51, 65);
    padding-top: 0px;
    padding-bottom: 80px;
}

.abouttext {
    color: rgb(94, 51, 65);
    padding-top: 10px;
    padding-bottom: 10px;
}

.image {
    width: 600px;
    display: block;
    margin:auto;
    
}