/* body formatting */
* { box-sizing: border-box;}

body { background-image: url(Clampy/clampy-background.png);
       background-repeat: no-repeat;
       background-attachment: fixed;
       background-size: cover;
       background-position: center;
       color: #ccc8c8;
       font-family: Verdana, Arial, sans-serif; 
       margin: 0;
       padding: 0; }


nav { padding-top: 0;
      padding-right: 0;
      padding-bottom: 0;
      display: flex;
      position: fixed;
      top: 0;
      justify-content: space-evenly;
      border: 2px solid #e756b7; 
      font-weight: bold; 
      float: left;
      width: 100%;
      height: 50px;
      font-size: 1em; 
      text-align: left; 
      background-color:#ebd988;
      font-family:'Times New Roman', Times, serif;
      z-index: 999;}

nav a:link { color: #e756b7; }
nav a:visited { color: #e756b7; }
nav a:hover { color: #A52A2A; }
nav a { text-decoration: none; }


nav ul { list-style-type: none; 
         padding-left: 1em;
         display: flex; 
         flex-direction: row;
         gap: 20px; }


.center-img { display: flex;
              justify-content: center; 
              align-items: center; 
              padding-top: .5em;
              padding-right: .5em;
              padding-left: .5em;
              padding-bottom: .5em;}


img { max-width: 100%;
      height: auto;
      display: block;
      object-fit: cover; }

.lower-img { padding-top: 50px; }

.clampy-img { position: relative; }

.clampy-img-background { display: block; 
                          width: 100%;  
                          max-height: 90vh; }

.main-clampy-img { position: absolute; 
                   top: 0;
                   padding-top: 18em;
                   padding-right: 4em;}

.disappear-1 { animation: hideShow 13040ms linear infinite; }

@keyframes hideShow {
  0%, 12% { opacity: 0; }  /* Hidden for first part */
  13%, 24% { opacity: 1; } /* Visible for first door open */
  25%, 100% { opacity: 0; }  /* Hidden for rest */ }

.disappear-2 { animation: hideShow2 13040ms linear infinite; }

@keyframes hideShow2 {
  0%, 36% { opacity: 0; }  /* Hidden for first part */
  37%, 50% { opacity: 1; }  /* Visible for rest */
  51%, 100% { opacity: 0; } /* Hidden for rest */ }

.disappear-3 { animation: hideShow3 13040ms linear infinite; }

@keyframes hideShow3 {
  0%, 62% { opacity: 0; }  /* Hidden for first part */
  63%, 75% { opacity: 1; }  /* Visible for rest */
  76%, 100% { opacity: 0; } /* Hidden for rest */ }

.disappear-4 { animation: hideShow4 13040ms linear infinite; }

@keyframes hideShow4 {
  0%, 87% { opacity: 0; }  /* Hidden for first part */
  88%, 99% { opacity: 1; }  /* Visible for rest */
  100%, 100% { opacity: 0; } /* Hidden for rest */ }

.bottom { position: fixed;
          bottom: 0;
          left: 0;
          width: 100%;
          background-color: #ebd988;
          text-align: center;
          padding: 10px; 
          font-family:'Times New Roman', Times, serif; 
          font-weight: bold; }

.bottom a { color: #e756b7;
            text-decoration: none; }