body {
  font-size: 2.5vw;
}

input {
  font-size: 2.5vw;
}

#user_info input {
  width: 15vw;
}

#summary input {
  width: 15vw;
}

#profile_detail input {
  width: 50vw;
}

#profile {
  display: grid;
  grid-template-columns: 1fr 3.5fr;
}

#profile_info {
  display: grid;
  grid-template-rows: 1fr 1fr;

  height: 15vw;
}

#profile_pic {
  width: 15vw;
  height: 15vw;
}

#id {
  font-size: 5vw;
  font-weight: bold;
}

button {
  height: 80%;
  width: 95%;

  font-size: 2vw;
  background: white;
  border: 1px solid grey;
  border-radius: 3px;  
}

.highlight_pic {
  width: 10vw;
  height: 10vw;

  margin-left: auto;
  margin-right: auto;
}

.highlight {
  text-align: center;
}

#highlight_area {
  display: grid;
  grid-template-columns: 12vw 12vw 1fr;
}

#stat_bar{ 
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;

  border-top: 1px solid grey;
  border-bottom: 1px solid grey;

  margin-top: 5px;
  margin-bottom: 5px;
}

.stat {
  text-align: center;
  font-weight: bold;
}


.thumbnail_grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.thumbnail {
  width: 100%;
}

.circle_pic {
  border: solid white 1px;
  border-radius: 50%;

  width: 100%;
  height: 100%;
  object-fit: cover;
}

i {
  color: rgb(137, 13, 151);
}

#top {
  display: grid;
  grid-template-columns: 4fr 6fr 4fr;
  
  height: 10vw;
  min-height: 10vw;

  border-bottom: 0.1px solid grey;
  margin-bottom: 3vw;
}

#top img {
  margin-left: auto;
  margin-right: auto;

  height: 70%;
  object-fit: contain;

  padding-top: 2vw;
}

#top input {
  height: 60%;
  width: 95%;

  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;

  text-align: center;
  background: rgb(250, 250, 250);

  border: solid gray 1px;
  border-radius: 3px;

  font-size: 2vw;
  font-weight: 100;
}

#top i {
  font-size: 5vw;
}

#top div {
  text-align: center;
  padding-top: 3vw;
}

#sub_icons {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;

  text-align: center;
  font-size: 5vw;

  height: 8vw;
}

.selected {
  border-bottom: solid rgb(137, 13, 151) 3px;
}

#top {
  text-align: center;
}