/*overall site design*/
html {
    background-color:#A3D1C6;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.content {
    max-width: 700px;
    margin: auto;
}

.button button {
    background-color:  #b6ab8d;
    border-color: #e6e0c6;
    border-radius: 5px;
}

.enter1, .enter2, .enter3 {
    background-color:  #6CB7A2;
    border-color: #469777;
    border-radius: 5px;
}

h1, h2, h3, p, button, .enter1, .enter2, .enter3 {
  color: #f6f9f8;
  margin: 0; /*set this because sites get automatic margins*/
}

h2 {
    text-align: left;
}

.bottom-header p {
    color: #6CB7A2;
}

.hidden {
    color:  #6CB7A2;
}

.bar {                                               /*header*/
    background-color: #469777;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding-top: 15px;
    padding-bottom: 10px;
    overflow: hidden;
    /*margin-bottom: 15px;*/
}

.logo {
    float: left;
    margin-top: 8px;
    margin-left: 10px;
}

.button {
    float: right;
    margin-top: 35px;
    margin-right: 10px;
}

.top-header {                                  /*post top banner layout*/                        
    background-color: #6CB7A2;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding-top: 2px;
    margin-top: 25px;
}

.bottom-header {
    background-color: #6CB7A2;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px; 
}

.top-title {
    margin-top: 3px;
    padding-left: 4px;
}

.profile-content {                                /*bio layout*/
    background-color: #e6e0c6;
    padding-top: 20px;
    padding-bottom: 20px;
    overflow: hidden;
}

.profile-content p {
    color: black;
}

.pfp {
    float: left;
    margin-left: 36px;
}

.pfp img {
    border: 4px solid #6CB7A2;
    border-radius: 10px;
}

.bio {
    float: right;
    line-height: 0.8; /*for br*/
    margin-top: 30px;
    margin-right: 31px;
}

.resident-content {                           /*residents*/
    background-color: #e6e0c6;
    padding-top: 20px;
    padding-bottom: 5px;
}

.pfps {
    display: grid;
    grid-template-columns: repeat(3, 200px);
    grid-template-rows: repeat(2, 125px);
    grid-gap: 5px; 
    margin-top: 10px;
    margin-left: 90px;
}
.pfps img {
    border: 4px solid #6CB7A2;
    border-radius: 10px; 
}

.post-content {                               /*post*/
    background-color: #e6e0c6;
    padding-top: 20px;
    padding-bottom: 20px;
}

.photo {                                         /*image*/
    margin-bottom: 15px;
    margin-left: 30px;
}

.photo img {
    border: 4px solid #6CB7A2;
    border-radius: 10px; 
}

figure {                                          /*caption and photo*/
    margin: 0;
    width: fit-content;
}

figure figcaption {
    text-align: center;
}



.back {                                         /*form*/
    background-color: #f9f1e5;
    border-radius: 10px;
    width: 630px;
    margin-left: 36px;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 5px;
    padding-right: 5px;
}

.groupc textarea {
  width: 100%;
  min-height: 80px;
  border: 4px solid #6CB7A2;
  border-radius: 10px;
}


.group {
  display: grid;
  grid-template-rows: auto;
  gap: 1.25rem;
  margin: 10px;
}

.groupa form {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.groupa button {
  padding: 0.5rem 0.75rem;
}

.groupb form,
.groupc form {
  display: grid;
  grid-template-columns: 1fr 140px;
  column-gap: 1.25rem;
  align-items: center;
  
}

.groupb .left,
.groupc .left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
}

.groupb form {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1rem;
  align-items: start;
}

.groupb label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
}

.groupb input[type="radio"] {
  margin: 0;
}

.groupb .right,
.groupc .right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.groupb .left {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.groupb .right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.groupb input[type="submit"],
.groupc button {
  justify-self: end;
}


footer {                                     /*footer*/
    background-color: #469777;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    text-align: center;
    margin-top: 60px;
    padding-top: 4px;
    padding-bottom: 4px;
    margin-bottom: 0;
}