@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");
* {
  font-family: Lato;
  font-weight: 900;
}
body {
  margin: 0px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1980' height='1080' preserveAspectRatio='none' viewBox='0 0 1980 1080'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1018%26quot%3b)' fill='none'%3e%3crect width='1980' height='1080' x='0' y='0' fill='url(%23SvgjsLinearGradient1019)'%3e%3c/rect%3e%3cpath d='M1264.9773895308613 812.3384985274586L1245.1952446344799 529.4406465223927 962.2973926294142 549.222791418774 982.0795375257954 832.12064342384z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M572.4264277913253 353.9515918597441L292.5493961093231 358.8368636196702 577.3116995512514 633.8286235417463z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M1575.8030210043225 974.94497498657L1483.339712397427 720.9041224610603 1229.2988598719173 813.3674310679559 1321.7621684788128 1067.4082835934655z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M1073.906426270973 840.9087890083124L995.8063938333197 1132.3820781384122 1287.2796829634194 1210.4821105760655 1365.3797154010729 919.0088214459657z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M2036.8345719241172 377.4706834921492L2163.463077682872 117.8437716815273 1777.2076601134954 250.84217773339407z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M1031.0229687301967 349.8718010772003L850.0166473643438 181.0806757172608 681.2255220044043 362.08699708311366 862.2318433702571 530.8781224430531z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M1449.09%2c55.11C1481.429%2c56.075%2c1512.489%2c37.679%2c1526.84%2c8.683C1539.946%2c-17.797%2c1527.985%2c-47.658%2c1512.369%2c-72.74C1497.874%2c-96.022%2c1476.433%2c-114.068%2c1449.09%2c-116.198C1417.391%2c-118.668%2c1382.061%2c-111.618%2c1366.069%2c-84.138C1350.013%2c-56.549%2c1362.635%2c-23.147%2c1378.982%2c4.271C1394.826%2c30.846%2c1418.164%2c54.187%2c1449.09%2c55.11' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M492.489%2c645.485C525.22%2c645.369%2c552.586%2c623.603%2c569.206%2c595.405C586.128%2c566.695%2c593.682%2c531.17%2c576.803%2c502.434C560.096%2c473.991%2c525.474%2c465.143%2c492.489%2c464.796C458.731%2c464.441%2c422.252%2c471.581%2c405.05%2c500.63C387.607%2c530.087%2c397.133%2c566.645%2c414.824%2c595.953C431.831%2c624.128%2c459.579%2c645.602%2c492.489%2c645.485' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1881.66%2c933.721C1917.196%2c934.593%2c1944.845%2c907.393%2c1963.498%2c877.133C1983.387%2c844.87%2c1998.729%2c806.026%2c1981.038%2c772.507C1962.454%2c737.295%2c1921.444%2c720.505%2c1881.66%2c722.072C1844.474%2c723.537%2c1811.542%2c746.511%2c1794.976%2c779.836C1780.003%2c809.957%2c1789.984%2c843.974%2c1806.493%2c873.281C1823.405%2c903.304%2c1847.211%2c932.876%2c1881.66%2c933.721' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M1765.3273039286028 352.1759186103561L1742.706325923873 90.74763764933621 1552.5389037764223 219.01718351376084z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M767.5303852997026 648.462876077877L767.5303852997026 799.3736852144639 993.896599004583 723.9182806461704z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M1607.9171437144387 636.4909569585955L1581.495727835239 887.873937029885 1832.8787079065287 914.2953529090846 1859.3001237857281 662.9123728377951z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1099.239894402842 404.3181407785674L958.6201999897171 506.4843290448206 1060.7863882559702 647.1040234579456 1201.4060826690952 544.9378351916924z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1519.078451936833 516.9185341406305L1272.8651670325141 521.2162030148252 1277.1628359067086 767.4294879191441 1523.3761208110277 763.1318190449496z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1146.567740216629 823.9278990386854L978.8088689279889 574.7031336973778 859.5819181293369 808.6991998741579z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1400.67 182.2 a218.05 218.05 0 1 0 436.1 0 a218.05 218.05 0 1 0 -436.1 0z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1018'%3e%3crect width='1980' height='1080' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='11.36%25' y1='-20.83%25' x2='88.64%25' y2='120.83%25' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1019'%3e%3cstop stop-color='rgba(14%2c 42%2c 71%2c 1)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(52%2c 58%2c 92%2c 1)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");
}
.header {
  margin: 0px;
  text-align: center;
  font-size: 40px;
  color: white;
  background-color: rgba(255, 255, 255, 0.072);
}
.hd{
  font-size: 30px;
}
.mainbar {
  margin-top: 20px;
  padding: 0px;
  /* background-color: rgba(255, 255, 255); */
  display: flex;
  justify-content: space-evenly;
}
.rf {
  width: 20vw;
  max-width: 200px;
  display: flex;
  justify-content: space-between;
}
.btn {
  padding: 10px;
  border-radius: 40px;
  background-color: rgb(8, 220, 188);
  cursor: pointer;
}
.btn:hover {
  color: white;
  background-color: rgb(0, 90, 76);
}
#main {
  display: grid;
  justify-content: center;
  align-content: center;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-columns: 200px 200px 200px;
}
.box {
  box-sizing: padding-box;
  border: 10px solid whitesmoke;
  cursor: pointer;
  height: 100px;
  width: 100px;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.072);
  margin: 5vh;
  transition: all 0.3s ease-in-out;
  /* border: 5px white solid; */
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
    rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
    rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
.box:hover,
.box:focus {
  transform: rotate(45deg) scale(1.05);
}

/* incorrect */
.wrong {
  background-image: url("../images/wrong.png");
  background-size: cover;
  height: 100px;
  width: 100px;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0);
  margin: 5vh;
}
.verdict {
  height: 50px;
  width: 250px;
  text-align: center;
  vertical-align: middle;
  line-height: 50px;
  color: aliceblue;
  font-size: 40px;
  text-shadow: 2px 2px black;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 20px;
  border: 5px solid white;
  background-color: #487346;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='87' height='87' viewBox='0 0 200 200'%3E%3Cg %3E%3Cpolygon fill='%234c8e43' points='100 57.1 64 93.1 71.5 100.6 100 72.1'/%3E%3Cpolygon fill='%236aac5f' points='100 57.1 100 72.1 128.6 100.6 136.1 93.1'/%3E%3Cpolygon fill='%234c8e43' points='100 163.2 100 178.2 170.7 107.5 170.8 92.4'/%3E%3Cpolygon fill='%236aac5f' points='100 163.2 29.2 92.5 29.2 107.5 100 178.2'/%3E%3Cpath fill='%2389CC7C' d='M100 21.8L29.2 92.5l70.7 70.7l70.7-70.7L100 21.8z M100 127.9L64.6 92.5L100 57.1l35.4 35.4L100 127.9z'/%3E%3Cpolygon fill='%23768c3a' points='0 157.1 0 172.1 28.6 200.6 36.1 193.1'/%3E%3Cpolygon fill='%2396ac58' points='70.7 200 70.8 192.4 63.2 200'/%3E%3Cpolygon fill='%23B6CC76' points='27.8 200 63.2 200 70.7 192.5 0 121.8 0 157.2 35.3 192.5'/%3E%3Cpolygon fill='%2396ac58' points='200 157.1 164 193.1 171.5 200.6 200 172.1'/%3E%3Cpolygon fill='%23768c3a' points='136.7 200 129.2 192.5 129.2 200'/%3E%3Cpolygon fill='%23B6CC76' points='172.1 200 164.6 192.5 200 157.1 200 157.2 200 121.8 200 121.8 129.2 192.5 136.7 200'/%3E%3Cpolygon fill='%23768c3a' points='129.2 0 129.2 7.5 200 78.2 200 63.2 136.7 0'/%3E%3Cpolygon fill='%23B6CC76' points='200 27.8 200 27.9 172.1 0 136.7 0 200 63.2 200 63.2'/%3E%3Cpolygon fill='%2396ac58' points='63.2 0 0 63.2 0 78.2 70.7 7.5 70.7 0'/%3E%3Cpolygon fill='%23B6CC76' points='0 63.2 63.2 0 27.8 0 0 27.8'/%3E%3C/g%3E%3C/svg%3E");
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset,
    rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset,
    rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px,
    rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px,
    rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

#snackbar {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 30px;
}

#snackbar.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s;
  animation: fadein 0.5s;
}

@-webkit-keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 30px;
    opacity: 1;
  }
}

@keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 30px;
    opacity: 1;
  }
}
/*small screen*/
@media screen and (max-width: 600px) {
  #main {
    grid-template-columns: 1fr 1fr;
    grid-template-columns: 150px 150px;
    zoom: 0.7;
  }
}