.extra p {
        color: #edf3ffff;
    }
    .extra h1 {
         color: #67c7ea;
    }
    .extra h2 {
        color: #67c7ea;
    }
    .extra h3 {
        color: #67c7ea;
    }
    .extra h4 {
        color: #67c7ea;
    }
    .extra h5 {
        color: #67c7ea;
    }
    .extra h6 {
        color: #67c7ea;
    }

    .extra {
        min-height: 100vh;
        background-image: url(../img/background/background1.jpg);
    }
    .extra .body {
        background: rgba( 31, 31, 31, 0.55 );
        box-shadow: 5px 6px 6px rgba(103, 199, 234, 0.37 );
        backdrop-filter: blur( 4.5px );
        -webkit-backdrop-filter: blur( 5.0px );
        border-radius: 15px;
        border: 1px solid rgba(103, 199, 234, 0.18 );
        margin-top: 12rem;
        padding-bottom: 2rem;
        text-align: center;
        margin-bottom: 4rem;
    }
    .extra .mainBody {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
        overflow: hidden;
        position: relative;
    }
    .extra .body .title {
        padding: 4rem 0;
    }
    .extra .body .description {
        padding: 1rem 4rem;
        text-align: justify;
        color: #f1f1f1;
    }
    .extra .body .imgBg {
    margin-top: -13rem;
    }
    .extra .body .porter {
        position: absolute;
        width:110px;
        left: 50%;
        bottom:0%;
    }
    .extra .body .mountain {
        position: absolute;
        width:32%;
        height:45%;
        left: 0%;
        bottom:0%;
    }
    .extra .body .city {
        position: absolute;
        width:20%;
        height:30%;
        left: 32%;
        bottom:0%;
    }
    .extra .body .beach {
        position: absolute;
        width:22%;
        height:20%;
        left: 52%;
        bottom:0%;
    }
    .extra .body .island {
        position: absolute;
        width:26%;
        height:20%;
        left: 74%;
        bottom:0%;
    }
    .extra .body .sky1 {
        position: absolute;
        width:32%;
        height:55%;
        left: 0%;
        bottom:45%;
    }
    .extra .body .sky2 {
        position: absolute;
        width:20%;
        height:70%;
        left: 32%;
        bottom:30%;
    }
    .extra .body .sky3 {
        position: absolute;
        width:48%;
        height:80%;
        left: 52%;
        bottom:20%;
    }
    .extra .body .rowContent {
        padding: 4rem;
    }

    .extra .photoBody  {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-family: sans-serif;
        padding-top: 2rem;
        margin-top: 2rem;
    }
    .extra .photoBody .grid-container {
      columns: 5 200px;
      column-gap: 1.5rem;
      width: 90%;
      margin: 0 auto;
    }
    .extra .photoBody .grid-container div {
      width: 150px;
      margin: 0 1.5rem 1.5rem 0;
      display: inline-block;
      width: 100%;
      border: solid 2px black;
      padding: 5px;
      box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
      border-radius: 5px;
      transition: all 0.4s ease-in-out;
    }
    .extra .photoBody .grid-container div:hover img {
      filter: grayscale(0);
    }
    .extra .photoBody .grid-container div:hover {
      border-color: #67c7ea;
      transform: scale(1.05);
      margin-top: 12px;
    }
    .extra .photoBody .grid-container div:hover p{
      color: #67c7ea;
    }

    .extra .photoBody .grid-container div img {
      width: 100%;
      filter: grayscale(100%);
      border-radius: 5px;
      transition: all 0.25s ease-in-out;
    }
    .extra .photoBody .grid-container div p {
      margin: 5px 0;
      padding: 0;
      text-align: center;
      font-style: italic;
    }


    .extra .relaxBody a {
        margin-top: 2rem;
    }
    .extra .relaxBody a {
        text-decoration: none;
        color: inherit;
    }
    .extra .body .relaxTitle {
        padding-bottom: 1rem;
    }
    .extra .body .relaxDescription {
        text-align: center;
    }
    .extra .body .pongBox {
        background-image: url(../img/extra/video_pong.gif);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 480px;
        height:247px;
        box-shadow: 5px 6px 6px rgba(103, 199, 234, 0.37 );
        border-radius: 15px;
        border: 1px solid rgba(103, 199, 234, 0.18 );
        margin-right: auto;
        margin-left: auto;
        position: relative;
    }
    .extra .body .pongBox h3{
        margin-right: auto;
        margin-left: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }

    @media (max-width: 767.98px) {
        .extra .relaxBody {
            display: none;
        }
    }