/*geral*/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
}

body {
    background-color: #222527;
    font-size: 17px;
    color: white;
    font-family: 'Helvetica', sans-serif;
    overflow: hidden;
     }

.page {
    display: flex;
    flex-wrap: wrap;
    padding-top: 20px;
  }

  html {
    scroll-behavior: smooth;
  }
    

  /*resumo filme*/
  .desc {
      margin-left: 50vh;
      color: rgba(212, 191, 0, 0.7);
      transition-property: all;
      transition-duration: 900ms;
      transition-timing-function: linear;
      transition-delay: 100ms;
      animation-iteration-count: infinite;
      text-align: center;
      display: grid;
      grid-template-columns: 2fr;
      grid-template-rows: 1fr;
      grid-template-areas: 'a';
      max-width: 50%;
      font-size: 25px;
      margin-top: 50px;
      
     }
  
  .desc:hover {
    color: rgb(236, 236, 236);
    font-size: 30px;
  }
  
  h1 {
    font-size: 100px;
    margin-left: 45vh;
    color: transparent;
    -webkit-text-stroke: rgb(255, 255, 255) 1px;
    transform: translateX(4rem);
    animation: up 2s linear forwards; 
    border-radius: 10px;
    animation: cor 6s linear infinite;
      animation-iteration-count: infinite;
  }
  h1:hover {
    color: rgb(111, 243, 243); 
    -webkit-text-stroke: transparent;
  }
  h1:active {
    color: brown;
  }
  
  .a {
  grid-area: a;
  display: grid;

  
  }
  
  /*imagens*/
  .container {
    display: grid;
    grid-gap: 2px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas:
    'c d e'
    'f g h';
   margin-right: auto;
  padding: 20vh;
   margin-top: 200px;
  
  }
  
  .c {
      grid-area: c;
      transition: transform 1s;
  }
  
  .c:hover {
    transform: scale(1.5);
  
  }
  
  .d {
    grid-area: d;
    transition: transform 1s;
  }
  
  .d:hover {
    transform: scale(1.5);
  }
  
  .e {
    grid-area: e;
    transition: transform 1s;
  }
  
  .e:hover {
    transform: scale(1.5);
  }
  
  .f {
    grid-area: f;
    transition: transform 1s;
  }
  
  .f:hover {
    transform: scale(1.5);
  }
  
  .g {
    grid-area: g;
    transition: transform 1s;
  }
  
  .g:hover {
    transform: scale(1.5);
  }
  
  .h {
    grid-area: h;
  transition: transform 1s;
  }
  
  .h:hover {
    transform: scale(1.5);
  }
  



  
  
  .container1 {
    display: grid;
    grid-gap: 1px;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
    'bio port'
  }
  
  
  .port {
    grid-area: port;
    margin-right: 20vh;
    animation-name: del;
    animation-duration: 5s;
    animation-delay: 2s;
    float: right;
    margin-top: 20vh;
  }
  
  .bio {
    margin-top: 250px;
    grid-area: bio;
    max-width: 400px;
    text-align: right;
    font-size: 25px;
    clear: left;
    color: rgb(255, 255, 255, 0.7);
    margin-left: 200px;
  }