/* Base colors */
:root {
  --foreground: #e5e5e5;
  --background: #262a33; 
  --cursor-bg: #f8f8f0;
  --cursor-border: #f8f8f0;
  --cursor-fg: #cfcfc2;
  --selection-bg: #5a5c62;
  --selection-fg: #ece7e7;
  --red: #f7768e;
  --orange: #ff9e64;
  --yellow: #e0af68;
  --green: #9ece6a;
  --cyan: #66d9ef;
  --blue: #7aa2f7;
}

body{
  font-family: 'Fira Code', monospace;
  line-height: 1.5;
  background-color: var(--background);
  color: var(--foreground);
}

main{
  max-width: 800px;
  margin: 0 auto;
  padding: 1em;
  overflow: auto;
}

h1{
  font-size: 2em;
  text-align: center;
  margin-bottom: 1em;
  color: var(--blue);
}

h2{
  color: var(--green);
  font-size: 1.5em;
  margin-top: 1em;
  text-align: center;
}

p{
  text-align: center;
  color:var(--red);
}

.about-container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.about-container img {
  max-width: 75%;
  height: auto;
  left: 50%
}

.gravatar iframe{
  border:0; margin:0; padding:0;
  overflow: visible;
  height: 450px;
  width: 350px;
   
}
.gravatar{
  display: flex;
  justify-content: center; /* Centers horizontally */

  align-items: center; 
    border:0; margin:0; padding:0;
    overflow: visible;

}