/* Entire Document */

/* Use border-box in all elements. */
*
{
    box-sizing: border-box;
}

/* Interactive Media query. */

@media only screen and (max-width: 480px) {
  /* For mobile phones: */
  {
    width: 100%;
}

}
/* Add margin, padding, and border to the `body`. */

body {
    background: rgb(226, 226, 226);
    font-size: 18px;
    font-family: Arial, Black;
    margin: 2rem;
    padding: 2rem;
    border: 2px solid #3388ff;
}

/* Main heading */

/* Separate sections with margins to utilize collapsing margins. Also, use borders to space them apart. */

main section, footer section {
    margin: 4rem 0;
    border-top: 2px solid #3388ff;
}

/* Adjust form elements to capture same look and feel. */

form input, form textarea,form select {
    padding: 0.1rem 0.2rem;
    color: #303030;
    border: 2px ridge #828282;
    background-color: #ffffff;
}

form fieldset {
    border: none;
}

form button {
    padding: 0.5rem 1rem;
    color: #303030;
    border: 2px solid #828282;
    background-color: #ffffff;
}

/* Remove outlines from form elements, ensuring a cleaner look. */

form input,form textarea {
    outline: none;
}

/* Make the profile picture rounded, and add a border. */

header img {
    border: 2px ridge #828282;
    border-radius: 50%;
    
}

/* === HELPERS === */

.border-dotted
{
  border: 2px dotted #3388ff;
}


h1 {
    text-align: center;
    text-shadow: 3px 3px 5px rgba(97, 99, 97, 0.7);
    
}


/* Other heading */
h2 {
    color: rgb(53, 53, 53);
    text-transform: uppercase;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/* Apply padding below headers to provide spacing and ensure content doesn't feel cramped. */

h1, h2, h3 {
  padding-bottom: 1rem;
}

/* Apply Flexbox to headers. */

header section .image
{
  display: block;

  /* Fits the image into the container div. */
  width: 100%;
  height: 100%;

  border-radius: 50%; /* Rounds the image. */

  object-fit: cover; /* Preserves the original aspect ratio. */
  object-position: 100% 20%; /* Makes the face visible moving the image down. */

}


header section .name
{
  align-self: center; /* Positions itself to the center of y-axis. */
}

header section .contact
{
    display: flex;
    flex-direction:column;
    justify-content:center;  
    align-items:end;
}

main section .projects
{
  align-self: center; /* Positions itself to the center of y-axis. */
  justify-content:center;
}   
    
main section .dimage
{
  align-self: center; /* Positions itself to the center of y-axis. */
}

main section .dimage
{
    display: flex;
    flex-direction:column;
    justify-content:center;  
    align-items:center;   
}

/* Animated Link */

.link:hover
{
  
  font-size: 125%;
  
}