html, body{
  padding: 0;
  margin: 0;
  background-color: white;
  font-family: 'Inter', sans-serif;
}

.alerts{
  width: 100%;
  position: fixed;
  display: flex;
  flex-direction: column;
  z-index: 51;
}

.alert#blue {
  position: relative;
  width: 100%;
  height: 40px;
  flex-direction: row;
  display: none;
  justify-content: center;
  align-items: center;
  background-color: #2196F3;
}

.alert#blue h2#cookies{
  width: 90%;
  font-size: clamp(0.1rem, 0.3vw + 0.5rem, 1rem);
  color: white;
  padding-left: clamp(1%, 1vw + 0.5rem, 3vw);
}

.closebtn {
  width: 2%;
  color: white;
  font-weight: bold;
  font-size: 25px;
  text-align: center;
  cursor: pointer;
  transition: 0.3s;
  margin-left: auto;
  margin-right: clamp(1vw, 0.5vw + 1rem, 5vw);
  float: right;
}

.closebtn:hover {
  color: black;
}

.active{
  display: inline;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-duration: 300ms;
  z-index: 10;
}

.inactive{
  opacity: 1;
  animation-name: fadeOutOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-duration: 300ms;
  display: none;
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes fadeOutOpacity {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

a{
  color: green;
}

.container-frame{
  width: 100%;
  height: auto;
}

.title{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.lang{
  padding-left: 1%;
}

h3#lang{
  font-size: 1rem;
}

div#hglooweb{
  width: clamp(6rem, 5vw + 7rem, 12rem);
  border-style: none;
  aspect-ratio: 2/1;
  background-image: url(https://ik.imagekit.io/wi13omdv75/logos/hglooweb_logo.png?updatedAt=1657511725991&ik-s=7364f291eb6e7cea80ba990384585106284b4a14);
  background-size: 100% auto;
  background-repeat: no-repeat;
}

h1#hglooweb{
  font-size: clamp(0.5rem, 1vw + 1.5rem, 4rem);
}

/* reviews */
.content-frame{
  display: flex;
  flex-direction: row;
}

.intro{
  width: 25%;
}

.intro h2{
  margin: 3%;
  text-align: justify;
}

.reviews{
  margin: 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

a#tokopedia{
  color: green;
  font-size: 1rem;
}

.barang{
  flex: 30%;
  max-width: 30%;
  margin-bottom: 1%;
  padding: 1.5%;
  border-width: 0.1rem;
  border-color: green;
  border-style: solid;
}

.barang-container{
  width: 100%;
  display: flex;
  flex-direction: column;
}

.info{
  width: 100%;
  margin-bottom: 0;
  margin-top: 0.5rem;
}

.info-container{
  width: 100%;
  display: flex;
  flex-direction: column;
  /* padding: 0 0 0 1%; */
}

h2.info#link{
  margin-top: 2%;
}

h2.info#date{
  margin-bottom: 2%;
  font-size: 1rem;
  font-weight: 400;
}

h2.info#title{
  font-size: 1.5rem;
  font-weight: 800;
}

h2.info#spec{
  font-size: 1rem;
  font-weight: 400;
}

h2.info#conclusion{
  margin-top: 5%;
  margin-bottom: 5%;
  font-size: 1.2rem;
  font-weight: 500;
  text-align: justify;
}

h2.info#advan{
  font-size: 1.1rem;
  font-weight: 500;
}

h2.info#score{
  margin-top: 6%;
  font-size: 1.2rem;
}

.gambar{
  width: 100%;
  aspect-ratio: 1/1;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.gambar#satu{
  background-image: url(https://ik.imagekit.io/wi13omdv75/reviews/20220711_150231.jpg?updatedAt=1661149695644);
}

.gambar#dua{
  background-image: url(https://ik.imagekit.io/wi13omdv75/reviews/20220822_142157.jpg?updatedAt=1661152983656);
}

.gambar#tiga{
  background-image: url(https://ik.imagekit.io/wi13omdv75/reviews/20220822_142915.jpg?updatedAt=1661153470511);
}

.gambar#empat{
  background-image: url(https://ik.imagekit.io/wi13omdv75/reviews/20220822_144731.jpg?updatedAt=1661154499476);
}

.gambar#lima{
  background-image: url(https://ik.imagekit.io/wi13omdv75/reviews/20220822_145802.jpg?updatedAt=1661155124602);
}

/* 
@media screen and (max-width: 395px) 
@media screen and (min-width: 395px) and (max-width: 480px)
@media screen and (min-width: 480px) and (max-width: 600px)
@media screen and (min-width: 600px) and (max-width: 660px)
@media screen and (min-width: 660px) and (max-width: 768px)
@media screen and (min-width: 768px) and (max-width: 880px)
@media screen and (min-width: 880px) and (max-width: 992px)
@media screen and (min-width: 992px) and (max-width: 1200px)
@media screen and (min-width: 1200px) and (max-width: 1382px)
*/

@media screen and (max-width: 660px){
  .barang{
    flex: 100%;
    max-width: 100%;
  }
}

@media screen and (min-width: 660px) and (max-width: 992px){
  .barang{
    flex: 46.5%;
    max-width: 46.5%;
  }
}