/**********************************************************************
*  Body Contents                                                      *
**********************************************************************/
body
{
    font-family:'Noto Sans','Lato',Helvetica;
    background: linear-gradient( 109.6deg,  rgba(104,183,249,1) 31.3%, rgba(176,248,200,1) 100.2% ) no-repeat center center fixed;     
}
#usrinp
{
    font-family: 'Lato',Verdana, Arial, Helvetica, sans-serif;
}
img#gif {
    border: 2px solid rgb(60, 120, 148);
}
/**********************************************************************
*  Spacing Element                                                    *
**********************************************************************/
:root {--spacing-none: 0;--spacing-extra-small: .25rem;--spacing-small: .5rem;--spacing-medium: 1rem;--spacing-large: 2rem;--spacing-extra-large: 2.5rem;--spacing-extra-extra-large: 8rem;--spacing-extra-extra-extra-large: 16rem;}


/**********************************************************************
*  Class Elements                                                     *
**********************************************************************/
.container {text-align: center;}.imgsrc{cursor: pointer; padding: 4px; background-color: #cdeedf85;border-radius: 4px;text-decoration: none;color: black;}.header {font-size: 3rem;letter-spacing: .1em;}.input-wrapper {background: radial-gradient(circle at 100% 50%, transparent 20%, rgba(255,255,255,.3) 21%, rgba(255,255,255,.3) 34%, transparent 35%, transparent), radial-gradient(circle at 0% 50%, transparent 20%, rgba(255,255,255,.3) 21%, rgba(255,255,255,.3) 34%, transparent 35%, transparent) 0 -50px;background-color: rgba(0, 0, 0, 0);background-size: auto, auto;background-color: slategray;background-size: 75px 100px;padding: var(--spacing-large);border-radius: 4px;}.disp {display:flex;justify-content:center;}.inpbox {outline: none;color:black;height:55%;font-size: 1.25rem;padding: var(--spacing-small);width: 70%;}.btn {outline: none;border:1.75px solid black;color: black;cursor:pointer;font-size: 1.25rem;display: inline-block;width: 32%;overflow:hidden;text-align: center;text-decoration: none;transition: color 15s ease-in;padding-left: var(--spacing-small);padding-right: var(--spacing-small);padding-top: var(--spacing-small);padding-bottom: var(--spacing-small);background-color:mediumaquamarine;}.img-cont {cursor:default;background-color:rgb(208 226 221 / 81%);display: inline-block;border-radius: .5rem;border-width: .25rem;box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 );padding: var(--spacing-large);margin: var(--spacing-extra-large);}.info {text-align:left;}.zoom {-moz-osx-font-smoothing: grayscale;backface-visibility: hidden;transform: translateZ(0);transition: transform 0.25s ease-out;}


/**********************************************************************
*  Hover Elements                                                     *
**********************************************************************/
.zoom:hover,.zoom:focus 
{
  transform: scale(1.05);
}
.zoom:active 
{
    transform: scale(.90);
}
  
/**********************************************************************
*  Media Query                                               *
**********************************************************************/
@media only screen and (max-width: 400px) 
{
    .btn
    {
        font-size:0.8em;
        width:25%;
    }
}