:root {
  --vw--tiny: 320px;
  --vw--small: 480px;
  --vw--med: 960px;
  --vw--large: 1280px;
  --vw--xlarge: 1920px;
  
  --gray-blue--h: 213;
  --gray-blue--s: 24%;    --gray-blue--ds: 12%;
  --gray-blue--l: 15%;
  
  --gray-blue: 
    var(--gray-blue--h)
    var(--gray-blue--s)
    var(--gray-blue--l)
  ;
}

html, body { height: 100%; }

body {
  background: hsl(197, 41%, 6%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1.5%;
}

.iframe--container { 
  background: 
    linear-gradient(transparent, transparent) padding-box,
    linear-gradient(
      -45deg, 
      hsl(197, 41%, 12%),
      hsl(192, 37%, 24%)
    ) border-box
  ;
  border: 2px solid transparent;
  clip-path: inset(0% 0% round 12px);
  display: flex; 
  box-shadow:
    3.1px 3.1px 6.8px rgba(0, 0, 0, 0.019),
    7.8px 7.8px 17.2px rgba(0, 0, 0, 0.027),
    15.9px 15.9px 35.1px rgba(0, 0, 0, 0.033),
    32.9px 32.9px 72.3px rgba(0, 0, 0, 0.041),
    90px 90px 198px rgba(0, 0, 0, 0.06)
  ;
  margin: 0;
  padding: 0; 
  // resize: both; 
  overflow: hidden;
  min-height: 600px;
  min-width: var(--vw--tiny);
  
  &:hover iframe {
    animation-play-state: paused;
  }
  
  iframe { 
    animation-name: resizePreview;
    animation-delay: 1s;
    animation-fill-mode: both;
    animation-duration: 8s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    
    border: 0; 
    clip-path: inset(0% 0% round 10px);
    flex-grow: 1; 
    margin: 0; 
    padding: 0;
  }
}

@keyframes resizePreview {
  from { height: 600px; width: var(--vw--tiny); }
  to { height: 1200px; width: var(--vw--xlarge); }
}