@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;500;700&display=swap');
* {
    font-family: 'Exo 2', sans-serif;

}

body {
    background-color:#212333;

}

h1, h2, h3, h4, h5, h6{
  font-weight: 200;
  color: rgb(226, 226, 226);
}

.grid-container {
  
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 2.5fr;
    gap: 0px 0px;
    grid-template-areas:
      "pageLeft pageCenter pageRight";
  }
  .pageCenter {
    margin-top: 10vh;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 0.6fr 0.1fr 0.5fr 0.1fr;
    gap: 45px 0px;
    grid-template-areas:
      "pageTitle"
      "pageSeparator"
      "pageDescription"
      "pageButton";
    grid-area: pageCenter;
  }

.pageTitle {
    grid-area: pageTitle;
    text-align: center;
}




.pageSeparator {
    grid-area: pageSeparator;
    display: grid;
    place-items: center;
}

.pageSeparator .separator{
    background-color: #02D975;
    width: 70px;
    height: 5px;
    border-radius: 100px;
}

.pageDescription {
    grid-area: pageDescription;
    place-items: center;
    text-align: center;
    font-size: 1.2em;
    font-weight: 300;
    
}

.pageDescription h3 {
    margin: 0px;
    color: rgb(192, 192, 192);
}

.pageButton {
    
    grid-area: pageButton;
    display: grid;
    place-items: center;

}

.pageButton button {
    cursor: pointer;
    background-color: #02D975;
    color: #e9e9e9;
    font-size: 1.1em;
    border: 0;
    padding: 20px 50px;

    max-height: 70px;
    width: 250px;

    border-radius: 100px;
    box-shadow: 0px 8px 50px 5px #02d97542;
}

.pageButton button:hover {
    background-color: #0aaf62;
    color: #4a4c5a;
}

.pageButton button:active {
    background-color: #51eba3;
    color: #17181d;
}

.pageButton svg {
  
   float: left;

}


#circleTiny,
#circleMiddle,
#circleBig {
    fill: #02D975;
}


#circleBig {
    transition: all 0.7s ease;
}
#circleMiddle {
    transition: all 1.1s ease;
}
#circleTiny {
    transition: all 1.6s ease;
}

.pageButton:hover #circleTiny{
    transform: translateY(-40%);
    opacity: 0;
}

.pageButton:hover #circleMiddle{
    transform: translateY(-40%);
    opacity: 0;
}

.pageButton:hover #circleBig{
    transform: translateY(-40%);
    opacity: 0;
}


.pageLeft {
    grid-area: pageLeft;
    margin-top: 20vh;
    display: grid;
    place-items: center;
}

.pageRight {
    grid-area: pageRight;
    margin-top: 20vh;
    display: grid;
    place-items: center;
}



.container {
    display: flex;
  }
  .container > div {
    flex: 1; /*grow*/
  }


/* Landscape phones and down */
@media (max-width: 480px) {


    .pageLeft, .pageRight {
        display: none;
    }
 }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 
    

    .pageTitle h1 {
        margin: 0;
        font-weight: bold;
        font-size: 5em;
    }
    .pageTitle h2 {
        margin: 0;
        margin-top: -0.5em;
        font-weight: 700;
        font-size: 1.5em;
    }

    

    .pageLeft, .pageRight {
        display: none;
    }
 }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { 


    .pageLeft, .pageRight {
        display: none;
    }

    .pageTitle h1 {
        margin: 0;
        font-weight: bold;
        font-size: 7em;
    }
    .pageTitle h2 {
        margin: 0;
        margin-top: -0.5em;
        font-weight: 700;
        font-size: 2.5em;
    }

    
 }

/* Large desktop */
@media (min-width: 1000px) {
    .pageTitle h1 {
        margin: 0;
        font-weight: bold;
        font-size: 10em;
    }
    .pageTitle h2 {
        margin: 0;
        margin-top: -0.5em;
        font-weight: 700;
        font-size: 3.5em;
    }

    
 }