.Headings{
    color:white;
        display: flex;
    
        flex-direction: space-around;
    
        flex-wrap:wrap;
    
        justify-content: space-around;
    
    
        
        
    
        
    
                                                /* I followed a tutorial to get a hover-pulsing effect for my sub-page directories, The credit should go to w3schools.com */
    }
    @-webkit-keyframes hvr-pulse-grow {
        to {
          -webkit-transform: scale(1.1);
          transform: scale(1.1);
        }
      }
      @keyframes hvr-pulse-grow {
        to {
          -webkit-transform: scale(1.1);
          transform: scale(1.1);
        }
      }
      .hvr-pulse-grow {
        display: inline-block;
        vertical-align: middle;
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        color:white;
      }
      .hvr-pulse-grow:hover, .hvr-pulse-grow:focus, .hvr-pulse-grow:active {
        -webkit-animation-name: hvr-pulse-grow;
        animation-name: hvr-pulse-grow;
        -webkit-animation-duration: 0.3s;
        animation-duration: 0.3s;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
        animation-direction: alternate;
      }
    








body{

    background-color: black;

    color: white;

    text-align: center;
}

.MainHeading{

    display: flex;

    justify-content: center;

    
}

.IntroP{

    display: flex;

    justify-content: center;
}



.Smart_Photo{

    display: flex;

    float: right;

    padding:5px;

}

.frame-border {

    border:3px groove tomato;

    border-width: 5px;

    border-radius: 10px;
}


.SmartP{


  display: grid;

  

  

  justify-items: center;

  

}

img{
    width:auto;
    height:auto;
    max-height: 50%;
    max-width: 50%;
}