* {
    padding:0;
    margin:0;
  }
  
  body {
    font-family: "Montserrat", sans-serif;
  }
  
  .container {
    height:100vh;
    display: flex;
  }
  
  section {
    height:100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex:1;
    transition: all .5s;
  }
  
  section:hover {
    flex:2;
  }
  
  section h1 {
    background:rgba(0,0,0,0.6);
    color:white;
    padding: 12px 32px;
  }
  
  .pera{
    background:url('img/pera.jpeg') rgb(120, 100, 190);
    background-position: center;
    background-size: cover;
    background-blend-mode: multiply;
    font-family: "Lavishly Yours", serif;
    font-weight: 300;
    font-size: 2em;
    font-style: normal;

  }
  
  .hurtta{
    background:url('img/hurtta.jpg') rgb(247, 64, 247);
    background-position: center;
    background-size: cover;
    background-blend-mode: multiply;
    font-family: "Bangers", serif;
    font-weight: 400;
    font-size: 2em;
    font-style: normal;
  }
  
  
  .rasa{
    background:url('img/rasa.jpg') rgb(155, 151, 151);
    background-position: center;
    background-size: cover;
    background-blend-mode: multiply;
    font-family: "Lexend Zetta", serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-size: 2em;
    font-style: normal;
  }
  


  // <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900

.lexend-zetta-<uniquifier> {
  font-family: "Lexend Zetta", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}



.lavishly-yours-regular {
    font-family: "Lavishly Yours", serif;
    font-weight: 400;
    font-style: normal;
  }

  
  .bangers-regular {
    font-family: "Bangers", serif;
    font-weight: 400;
    font-style: normal;
  }

  #pera {

  }

  a {
    text-decoration: none;
    color: white;
  }