/* CSS files add styling rules to your content */

/*any difference in code for optimal desktop/large screen experience */
@media only screen and (min-width: 640px) {
    body{
        margin-top: 2em;
        color: #fffbf5;
    }
    br.hide{
        display:none;
    }
    header{
    margin-top:5em;
    }
figure.enlarged img{
    max-height: 95%;
  }
  
  img.enlarged{
      max-height:95%;
  }
  .gallery figure img{
     min-height: 15em;
    margin: 1em;
  }
  a.mobilehome{
      display:none;
  }
  #statement.enlarged{
      max-width:20em;
  }
}
   
   /* special desktop add ons */
   
   @media only screen and (max-width: 640px) {
       a.home{
      display:none;
  }}
       
/* all other code is for small screens bc mobile first etc  
largely working with ems instead of px */    
   
body {
  margin-left: auto;
  margin-right: auto;
  width: 95vw;
  font-family: helvetica, arial, sans-serif;
}


h1 {
  transform: rotate(-7deg);
  font-style: italic;
  color: hotpink;
}

h2 {
   transform: rotate(-7deg);
  font-style: italic;
  color: hotpink;
}

h3 {
  font-style: italic;
  color: hotpink;
}

h4 {
  font-style: italic;
  color: #ae9c1c;
}
h5 {
  font-style: italic;
  color: #ae9c1c;
}
p{
  color: #ae9c1c;
  font-size: larger;
}

.name h1{
  padding-bottom:1em;
  font-size: 1.5em;
}

/* basic link styling **********************/
a{
  font-style: italic;
  font-weight: bolder;
  color: hotpink;
  text-decoration: none;
}
a:hover{
  color: pink;
}

/* header styling *********************/
header{
  text-align: center;
}
header p{
  margin:  2em 15vw;
  font-size: 1em;
  line-height: 1.3em;
}
 


/* statement styling **********************/ 
#statement{
  display: inline-block;
  color: #ae9c1c;
  text-align:left;
  width: 12em;
  height: 12em;
  font-size: 9px;
  border: 3px dashed hotpink;
  border-radius: 12em;
  background-color: transparent;
  overflow: hidden;
  transform: translateY(10px);
}
#statement.enlarged{
  font-size: .6em;
  height: auto;
  width: 80%;
  line-height: 1.5em;
  z-index: 100;
  border: dashed hotpink 4px;
  border-radius: 40px;
  background-color: white;
  padding: 2em;
}
#statement.enlarged:hover {
  cursor: url('close.png'), pointer;
}
#statement:hover {
  cursor: help;
}

/* footer styling **********************/
footer{
  margin: 2em 2em;
  text-align: center;
  padding-top: 4em;
  border: 3px dashed hotpink;
}

ul.admiration{
    margin:3em auto;
}

footer.corner{
  
  border-radius: 50px;
  max-width: 90%;
  min-width: 50%;
}


/* site signature ***********************/
.signature{
  
  text-align: right;
}


/* list styling ************************/
ul{
  text-align: left;
  
}
li{
  margin-left: auto;
  margin-right: auto;
  width: 60vw;
  line-height: 2em;
}

/* floating text box *******************/
p.describe-box {
  display: inline-block;
  margin: 2vw;
  border: dashed 5px black;
  border-radius: 1.5em;
  padding: 1.5em;
  width: 8em;
  
}

/* triangular home button **************************/
a.home{
   
   vertical-align: text-bottom;
   padding: 8em;
   padding-bottom: 1em;
   color: white;
    /*border-radius: 8em; */
    position: fixed;
    top: -4.5em;
    left: -8.5em; 
    margin: auto;
    z-index: 100;
    background-color: hotpink;
    transform: rotate(-45deg);
}
a.home:hover{
  background-color: lightpink;
}

/* main page  *************************/
.main{
  text-align: center;
  margin: 0 auto;
}
.main img{
    height: 9em;
    margin: 1em;
}

.main a img{
  height: 11em;
  animation: hop .5s ease-out infinite;
  animation-direction: alternate;
}
@keyframes hop {
        from {transform: translateY(0); }
        to {transform: translateY(-6px);} 
      }
    

.main img:hover{
    cursor: help;
}
.main img.bits.enlarged:hover {
  cursor: url('close.png'), pointer;
}


/* galley div styling ****************************/

.gallery {
  display: inline-block;
  max-width: 100vw;
  margin: 0 auto; /* HORIZONTAL CENTER */
  text-align: center;
}

/* gallery images small ***************************/

 .gallery figure img{
    height: 8em;
    margin: 1em;
}

/* enlarged images on click *************************/

img.bits.enlarged{
    height: auto;
    max-width: 95%;
    position: fixed;
    margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
    z-index: 100;
}

figure.enlarged img{
    height: auto;
    max-width: 95%;
    position: fixed;
    margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
    z-index: 100;
}


/* big pink captions styling ************************/
figure.enlarged figcaption{
    
    padding: 10em 3em 3em 5em;
    border-radius: 20em;
    position: fixed;
    top: -7em;
    left: -5em;
    margin: auto;
  vertical-align: text-bottom;
    z-index: 100;
    background-color: hotpink;
    transform: rotate(-20deg);
}
.gallery figure.enlarged:hover {
  cursor: url('close.png'), pointer;
}
.gallery figure:hover {
  cursor: help;
}

/* captions invisible on white background styling **********************/
/* (C) CAPTION */
.gallery figure { 
  margin: 0; 
  display: inline-block;
  text-align: center;
}
.gallery figcaption { 
  font-weight: bolder;
  font-size: 1em;
  padding: 5px;
  color: #fff;
  width: 8em;
  z-index: 100;
  text-align: center;
}





/* button styling *********************/
button{
  padding: 2em 4em;
  border-radius: 4em;
  margin: 1em;
  border: none;
  background-color: hotpink;
  color: white;
  font-weight: bolder;
  box-shadow: -6px 12px deeppink;
}
button:hover{
  background-color: hotpink;
  color: white;
  cursor: help;
  transform: translateY(8px);
  box-shadow: -6px 8px deeppink;
}

/*funny text rotate class ******************/
.tick {
  transform: rotate(10deg);
}

/* colorchanging class ********************/
.colorchange{
    animation-name: colorchange;
  animation-duration: 6s;
  animation-iteration-count: infinite;
}
  @keyframes colorchange {
  0%   {color:#ed7c5c; }
  25%  {color:#ffa600; }
  50%  {color:#ff696e; }
  75%  {color:#c29400; }
  90% {color:#ae9c1c; }
  100%   {color:#ed7c5c; }  
}


/* break line styling *********************/
.break{
  background: hotpink;
  text-align: center;
        width: 8em;
        height: 8px;
        margin-top: 8em;
        margin-bottom: 5em;
        border-radius: 5px;
        /* Here we declare our inline animation */
        animation: translate 3s ease-in-out infinite;
        animation-direction: alternate;
}
@keyframes translate {
        from {transform: translateX(11vw); }
        to {transform: translateX(55vw);} 
      }





/* nav bar styling even though not using nav bar ***************************/

#nav{
  position: fixed;
  right: 1vw;
  min-height: 100%;
  max-height: 100%;
  width: 90px;
  border: 0px #1D50AD dashed;
  font-style: oblique;
  font-weight: bolder;
  }
#nav ul {
    list-style-type: none;
    margin: 0;
    height: 100%;
}
#nav li{
  height: 45px;
  margin-top: 32%;
  }
#nav li p:hover{
-moz-transform: rotate(15deg) translateX(-5px);
-webkit-transform: rotate(15deg) translateX(-5px);
-o-transform: rotate(15deg) translateX(-5px);
-ms-transform: rotate(15deg) translateX(-5px);
transform: rotate(15deg) translateX(-5px);

}
#nav li p{
-moz-transform: rotate(5deg) translateX(10px);
-webkit-transform: rotate(5deg) translateX(10px);
-o-transform: rotate(5deg) translateX(10px);
-ms-transform: rotate(5deg) translateX(10px);
transform: rotate(5deg) translateX(10px);
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
height: inherit;
}

/*******end nav bar styling**************************************/