*,
html {
  margin:0;
  padding:0;
}
body {
  display: flex;
  justify-content: center;
  margin:5vh;
  height: 5vh;
  height:100vh;
}
.bg {
}
.bg2{
  display: grid;
  justify-content: center;
  align-items: center;
  height: 85vh;
  background-image: url('lime.jpg');
  background-size: cover;
  padding:2vh;
  width: 70vh;
}



.hello{
  display: flex;
}
.welcome{
  display: flex;
  justify-content:flex-start;
  background-color:greenyellow;
  font-size: 4vh;
  width:35vh;
  height: 20vh;
  margin-left: 3vh;
  margin-right:1vh;
  padding:0vh;
  border-radius: 4vh;
}
.sapaan {
  background:transparent;
  backdrop-filter: blur(20px);
  height:13vh;
  margin:1vh;
  margin-top:3vh;
}
.image {
  width: 20vh;
  height: 20vh;
  border-radius: 100vh;
  margin-right:2vh;
}
.content-akun {
  font-size:2vh;
  width:13vh;
  height:16vh;
  margin:1vh;
  background-image:url('greenyellow.jpg');
  background-size:cover;
  border:2px solid black;
  border-radius: 6px;
  color:white;
}
.sosial{
  margin: 1vh;
}
.akun-li {
  list-style-type: none;
  
}
.medsos {
  text-decoration-line:none;
  color:black;
  background-color: greenyellow;
}
.container-content {
  display: grid;
  justify-content: center;
  align-items: center;
  background:transparent;
  backdrop-filter: blur(50px);
  width:45vh;
  margin:5vh;
  border-radius: 10px;;
}
.datadiri{
  margin-top:1vh;
  margin-left:1vh;
  width:40vh;
  height: 20vh;
  font-size: 2vh;
}
.hoby{
  display:grid;
  justify-content: center;
  font-size: 4vh;
  padding:3vh;
}
.hobi {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size:2vh;
}
.label-nama{
  margin-bottom: 15vh;
  font-size:2vh;
  background-color:greenyellow;
}
.img1{
  transition: all 1.6s ease ;
  width:15vh;
  height:15vh;
  margin:1vh;
}
.img1:hover {
  transform: scale(1.2);
}
.img2{
  transition: all 1.6s ease ;
  width:15vh;
  height:15vh;
  margin:1vh;
}
.img2:hover {
  transform: scale(1.2);
}
.note{
  font-size:2vh;
}