:root {
  --transition-fast: 0.2s ease-in-out;
  --transition-slow: 0.4s ease;
}


html { scroll-behavior: smooth; }

body {
    background: linear-gradient(90deg, rgb(233, 233, 233) 0%, rgb(211, 211, 211) 100%);
	margin: 3em;

    
}

#centerdiv {
    width: 19em;
    height: 30em;
    /*clip-path: polygon(0% 100%, 10% 0%, 90% 0%, 100% 100%);*/
/*
    background: #fff;
	background: linear-gradient(30deg, rgba(165, 203, 247, 0.137) 0%, rgb(102, 123, 208) 17%, rgb(199, 225, 247) 100%);
*/
background-image: url('../image/goldenretrieverTrim.png');    
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    
    margin: auto;

    -webkit-box-shadow: 2px 4px 6px 2px #777; 
    box-shadow: 2px 4px 6px 2px #777;
 
   transform:skewX(4deg) ;
    padding:3em;
    border-radius: 1em;
    border:0.2em solid #fff;
}


#div-to-display{
    position:absolute;
    top:7.7em;
    right:-15em;
    width:25em;
    height:7em;
    padding: 0.8em;
    z-index:99999;
    opacity:0;
    background: #fff;
    border-radius: 1em;
    border:0.2em solid #333;
    -webkit-box-shadow: 2px 4px 6px 2px #777; 
    box-shadow: 2px 4px 6px 2px #777;
   
}

h1.titleheader{
	margin-left: -0.5em;
	font-size: 27px;
	color:#fff; /*dff905*/
	font-weight:bold;
	text-shadow: 1px 1px 1px #f1e207, 2px 2px 4px #333; 
    transform:skewX(-14deg) ;	
}

footer {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    text-align: center;
    font-size:0.9em;
    padding: 5px;
    margin:0;
    color: #aaa;
    text-shadow: 1px 1px 1px #333;
    width:100%;
    z-index:999;
  }

  @media (max-width: 768px) and (orientation: portrait) {
  body {
    margin: 1em;
  }

  #centerdiv {
    padding: 1.5em;
    
  }

  h1.titleheader {
    font-size: 1.5em;
  }

  #div-to-display {
    position: relative;
    width: 100%;
    right: auto;
    top: auto;
    margin-top: 1em;
  }

  footer {
    position: absolute;
    font-size: 0.8em;
    bottom:0;
  }
}