smartLoft.css

.weight {
  font-size: 30px;
  }

.item:hover {
  transform: scale(1.1);
  transition: transform 0.2s ease;
  box-shadow: 1px 2px 4px 5px white;
  border-radius: 36px;
 }

.smart-loft {
  background-color: #4c4343;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

.smart-loft .overlap-wrapper {
  background-color: #4c4343;
  width: 1920px;
  height: 1080px;
}

.smart-loft .overlap {
  position: relative;
  width: 1824px;
  height: 1026px;
  top: 27px;
  left: 48px;
  background-color: #ffffff;
}

.smart-loft .screen {
  position: relative;
  height: 1026px;
  background-color: #000000;
  overflow: hidden;
}

.smart-loft .call-GLA {
  position: absolute;
  width: 302px;
  height: 87px;
  top: 890px;
  left: 68px;
}

.smart-loft .overlap-group {
  position: relative;
  width: 310px;
  height: 97px;
  top: -5px;
  left: -5px;
  background-color: #ffc000;
  border-radius: 18px;
  border: 5px solid;
  border-color: #ffdf7f;
  box-shadow: inset 0px 4px 4px #00000040, 0px 4px 4px #00000040;
}

.smart-loft .text-wrapper {
  position: absolute;
  width: 242px;
  height: 61px;
  top: 13px;
  left: 29px;
  font-family: "Roboto", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 40px;
  text-align: center;
  letter-spacing: 0.1px;
  line-height: 50px;
}

.smart-loft .group {
  position: absolute;
  width: 370px;
  height: 203px;
  top: 845px;
  left: 1380px;
}

.smart-loft .emergency-call {
  position: absolute;
  width: 113px;
  height: 113px;
  top: 0;
  left: 128px;
  border-radius: 38px;
  background: linear-gradient(180deg, rgb(255, 55.25, 115.18) 0%, rgb(224.19, 0, 0) 100%);
}

.smart-loft .vector {
  position: absolute;
  width: 59px;
  height: 59px;
  top: 27px;
  left: 27px;
}

.smart-loft .EMERGENCY-CALL {
  position: absolute;
  width: 368px;
  top: 129px;
  left: 0;
  font-family: "Roboto Flex", Helvetica;
  font-weight: 600;
  color: #ffffff;
  font-size: 40px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.smart-loft .smartloft-button {
  position: absolute;
  width: 160px;
  height: 160px;
  top: 51px;
  left: 446px;
  border-radius: 38px;
  background: linear-gradient(180deg, rgb(255, 198.9, 0) 0%, rgb(255, 153, 0) 100%);
}

.smart-loft .light-bulb {
  position: absolute;
  width: 84px;
  height: 93px;
  top: 34px;
  left: 38px;
}

.smart-loft .div {
  position: absolute;
  width: 328px;
  top: 90px;
  left: 734px;
  font-family: "Roboto", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 70px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.smart-loft .overlap-2 {
  position: absolute;
  width: 1477px;
  height: 562px;
  top: 259px;
  left: 173px;
  background-image: url(https://c.animaapp.com/acCMjFzj/img/rectangle-33.svg);
  background-size: 100% 100%;
}

.smart-loft .img {
  left: 854px;
  position: absolute;
  width: 118px;
  height: 118px;
  top: 410px;
}

.smart-loft .vector-2 {
  left: 1088px;
  position: absolute;
  width: 118px;
  height: 118px;
  top: 410px;
}

.smart-loft .overlap-3 {
  position: absolute;
  width: 427px;
  height: 72px;
  top: 73px;
  left: 107px;
}

.smart-loft .lights {
  position: absolute;
  width: 374px;
  height: 72px;
  top: 0;
  left: 0;
}

.smart-loft .text-wrapper-2 {
  position: absolute;
  width: 372px;
  height: 72px;
  top: 0;
  left: 0;
  font-family: "Roboto", Helvetica;
  font-weight: 500;
  color: #000000;
  font-size: 40px;
  letter-spacing: 0.1px;
  line-height: 20px;
}

.smart-loft .toggle {
  display: flex;
  width: 132px;
  height: 72px;
  align-items: center;
  justify-content: flex-end;
  padding: 6px;
  position: absolute;
  top: 0;
  left: 295px;
  background-color: #ffc000;
  border-radius: 36px;
  overflow: hidden;
}

.smart-loft .base-switch-icon {
  position: relative;
  width: 60px;
  height: 60px;
  background-color: var(--themebgsurface);
  border-radius: 2997px;
  overflow: hidden;
  box-shadow: var(--toggle);
}

.smart-loft .check {
  position: absolute;
  width: 42px;
  height: 42px;
  top: 9px;
  left: 9px;
}

.smart-loft .overlap-4 {
  position: absolute;
  width: 425px;
  height: 308px;
  top: 73px;
  left: 808px;
}

.smart-loft .div-wrapper {
  position: absolute;
  width: 374px;
  height: 72px;
  top: 0;
  left: 27px;
}

.smart-loft .text-wrapper-3 {
  position: absolute;
  width: 372px;
  height: 72px;
  top: 0;
  left: 0;
  font-family: "Roboto", Helvetica;
  font-weight: 500;
  color: #000000;
  font-size: 40px;
  text-align: center;
  letter-spacing: 0.1px;
  line-height: 20px;
}

.smart-loft .rectangle {
  width: 425px;
  height: 240px;
  top: 68px;
  left: 0;
  position: absolute;
  background-color: #fff9e6;
  border-radius: 18px;
  border: 5px solid;
  border-color: #bcb88a;
}

.smart-loft .text-wrapper-4 {
  position: absolute;
  width: 181px;
  height: 83px;
  top: 145px;
  left: 122px;
  font-family: "Roboto", Helvetica;
  font-weight: 500;
  color: #000000;
  font-size: 60px;
  text-align: center;
  letter-spacing: 0.1px;
  line-height: 20px;
}

.smart-loft .overlap-5 {
  position: absolute;
  width: 679px;
  height: 319px;
  top: 178px;
  left: 107px;
}

.smart-loft .lights-2 {
  position: absolute;
  width: 377px;
  height: 317px;
  top: 0;
  left: 0;
}

.smart-loft .text-wrapper-5 {
  position: absolute;
  width: 372px;
  height: 83px;
  top: 0;
  left: 3px;
  font-family: "Roboto", Helvetica;
  font-weight: 500;
  color: #000000;
  font-size: 40px;
  letter-spacing: 0.1px;
  line-height: 20px;
}

.smart-loft .lights-3 {
  position: absolute;
  width: 376px;
  height: 203px;
  top: 114px;
  left: 0;
}

.smart-loft .text-wrapper-6 {
  position: absolute;
  width: 372px;
  height: 83px;
  top: 0;
  left: 0;
  font-family: "Roboto", Helvetica;
  font-weight: 500;
  color: #000000;
  font-size: 40px;
  letter-spacing: 0.1px;
  line-height: 20px;
}

.smart-loft .text-wrapper-7 {
  position: absolute;
  width: 372px;
  height: 83px;
  top: 120px;
  left: 0;
  font-family: "Roboto", Helvetica;
  font-weight: 500;
  color: #000000;
  font-size: 40px;
  letter-spacing: 0.1px;
  line-height: 20px;
}

.smart-loft .rectangle-2 {
  width: 142px;
  height: 82px;
  top: 235px;
  left: 290px;
  position: absolute;
  background-color: #fff9e6;
  border-radius: 18px;
  border: 5px solid;
  border-color: #bcb88a;
}

.smart-loft .text-wrapper-8 {
  position: absolute;
  width: 372px;
  height: 83px;
  top: 236px;
  left: 307px;
  font-family: "Roboto", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 35px;
  letter-spacing: 0.1px;
  line-height: 20px;
}

.smart-loft .base-switch-icon-wrapper {
  top: 11px;
  display: flex;
  width: 132px;
  height: 72px;
  align-items: center;
  justify-content: flex-end;
  padding: 6px;
  position: absolute;
  left: 295px;
  background-color: #ffc000;
  border-radius: 36px;
  overflow: hidden;
}

.smart-loft .toggle-2 {
  top: 127px;
  display: flex;
  width: 132px;
  height: 72px;
  align-items: center;
  justify-content: flex-end;
  padding: 6px;
  position: absolute;
  left: 295px;
  background-color: #ffc000;
  border-radius: 36px;
  overflow: hidden;
}

:root {
  --themebgsurface: rgba(252, 252, 253, 1);
  --themefgdisabled: rgba(158, 172, 174, 1);
  --themeprimaryaccentdisabledlight: rgba(231, 234, 235, 1);
  --themeprimaryaccentdisableddark: rgba(97, 114, 117, 1);
  --toggle: 0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px rgba(16, 24, 40, 0.1);
}
.elementTitle {
  display:flex;
  align-items: center;
  margin: auto;
  
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: 'Roboto', sans-serif;
	background-image: radial-gradient(rgb(211, 210, 210), rgb(86, 84, 84));
} 

.on {
  background-image: radial-gradient(rgb(255, 255, 119), rgb(224, 224, 163));
  transition: background-image 1s linear ;
}

.off {
	background-image: radial-gradient(rgb(211, 210, 210), rgb(86, 84, 84));
	transition: background-image 1s linear ; 
}


*, *:before, *:after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	/* minFontSize + (maxFontSize - minFontSize) * (100vw - minVWidth)/(maxVWidth - minVWidth) */
	font-size: calc(64px + (80 - 64) * (100vw - 320px)/(960 - 320));
}
body, input {
	font-size: 1em;
	line-height: 1.5;
}

input {
	display: block;
	margin-bottom: 1.5em;
}
main {
	padding: 1.5em 0 0 0;
	text-align: center;	
}
.l {
	background-color: rgba(0,0,0,0.7);
	border-radius: 0.75em;
	box-shadow: 0.125em 0.125em 0 0.125em rgba(0,0,0,0.3) inset;
	color: #fdea7b;
	display: inline-flex;
	align-items: center;
	margin: auto;
	padding: 0.15em;
	width: 1.5em;
	height: 0.75em;
	transition: background-color 0.1s 0.3s ease-out, box-shadow 0.1s 0.3s ease-out;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.l:before, .l:after {
	content: "";
	display: block;
}
.l:before {
	background-color: #d7d7d7;
	border-radius: 50%;
	width: 0.6em;
	height: 0.6em;
	transition: background-color 0.1s 0.3s ease-out, transform 0.3s ease-out;
	z-index: 1;
}
.l:after {
	background:
		linear-gradient(transparent 50%, rgba(0,0,0,0.15) 0) 0 50% / 50% 100%,
		repeating-linear-gradient(90deg,#bbb 0,#bbb,#bbb 20%,#999 20%,#999 40%) 0 50% / 50% 100%,
		radial-gradient(circle at 50% 50%,#888 25%, transparent 26%);
	background-repeat: no-repeat;
	border: 0.25em solid transparent;
	border-left: 0.4em solid #d8d8d8;
	border-right: 0 solid transparent;
	transition: border-left-color 0.1s 0.3s ease-out, transform 0.3s ease-out;
	transform: translateX(-22.5%);
	transform-origin: 25% 50%;
	width: 0.6em;
	height: 0.5em;
}
/* Checked */
.l:checked {
	background-color: rgba(0,0,0,0.45);
	box-shadow: 0.125em 0.125em 0 0.125em rgba(0,0,0,0.1) inset;
}
.l:checked:before {
	background-color: currentColor;
	transform: translateX(125%)
}
.l:checked:after {
	border-left-color: currentColor;
	transform: translateX(-2.5%) rotateY(180deg);
}
/* Other States */
.l:focus {
	/* Usually an anti-A11Y practice but set to remove an annoyance just for this demo */
	outline: 0;
}
.background {
  max-width: 200px;
}
.topbox {
  margin: auto;
  margin-top: 25px;
  color: white;
  font-size: 80px;
  font-family: Roboto;
  /* width: 1920px; */
  display: flex;
  /* align-items: center;  */
  justify-content: space-around;
  
  
}
.glLogo {
  display: block;
  margin:auto;
  /* margin-top: 17px; */
}