body  {
  background-color: #27445C;
}

* {
  font-family: "Lucida Console", "Courier New", monospace;
}
.logo {
  width: 50px;
  height: 50px;
  padding: 10px;
}


.nav_bar {
  display: flex;
  justify-content: space-between;
  gap: 10;
  align-items: center;
  box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
}


body {
  display: grid;
  grid-template-rows: auto auto auto;
}


.coding_languange {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  color: white;
  margin: 50px;
}

.introduction {
  color: white;
  display: grid;
  grid-template-areas: 
  "intro pfp"
  "intro_paragraph pfp"
  "intro_buttons pfp";
  grid-template-columns: 2fr 1fr;
  margin: 50px;
}
  
.intro {
  grid-area: intro;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
}

.intro_paragraph {
  grid-area: intro_paragraph;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px;
  font-size: 20px;
}

.pfp {
  grid-area: pfp;        
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 40px;
}

.intro_buttons {
  grid-area: intro_buttons;
  display: flex;
  align-items:center;
  justify-content: center;
}

.intro_buttons button {
  height:40px;
  padding: 10px;
  margin: 10px;
}

.nav-bar-buttons {
  display: flex;
}

.nav-button {
  padding: 5px;
  margin: 5px;
}


.footer {
  display: flex;
  justify-content: space-between;
  gap: 10;
  align-items: center;
  box-shadow: 0px -10px 10px rgba(0,0,0,0.1);
  color: white;
}

.footer p {
  margin-left: 20px;
}

.footer h2 {
  margin: 10px;
}

.card {
  border-style: solid;
  padding: 10px;
  justify-content: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1);
}
.projects {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-template-rows: auto auto auto;
  color: white;
  gap: 10px;
  margin: 50px;
}