/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}

/* For desktop */
@media only screen and (min-width: 768px) {
    .container { 
        background-color: rgba(0, 0, 0, 0.7);
        display: inline-block;
        width: 400px;
        height: 500px;
        margin: auto;
        position: relative;
        border: 3px double #000099;
        padding: 10px 20px 10px 20px;
        overflow: auto;
    }
      
    .center {
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

}

a, a:active, a:visited {
    color: #00ec00;
    text-decoration: none; 
}

a:hover {
    background: linear-gradient(45deg,#FF0000,#FF7F00,#FFFF00,#00FF00,#0000FF,#560094,#8B00FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 400% 400%;
    
    -webkit-animation: rainbowanim 7s ease infinite;
       -moz-animation: rainbowanim 7s ease infinite;
            animation: rainbowanim 7s ease infinite;
  }
  
  @-webkit-keyframes rainbowanim {
      0%{background-position:0% 50%}
      50%{background-position:100% 50%}
      100%{background-position:0% 50%}
  }
  @-moz-keyframes rainbowanim {
      0%{background-position:0% 50%}
      50%{background-position:100% 50%}
      100%{background-position:0% 50%}
  }
  @keyframes rainbowanim { 
      0%{background-position:0% 50%}
      50%{background-position:100% 50%}
      100%{background-position:0% 50%}
  }

h1 {
    color:  #00d7ff;
}

body {
    background-image: url(images/starbackground.gif);
    color:#f8f1df;
    text-align: center;
    font-size: 18px; 
}

textarea {
    height: 35px;
    resize: none;
  }


#imshake:hover {
    /* Start the shake animation and make the animation last for 0.5 seconds */
    animation: shake 0.5s;
  
    /* When the animation is finished, start again */
    animation-iteration-count: infinite;
}
  
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}