:root {
	--blue: #4285f4;
	--red: #ea4335;
	--green: #34a853;
	--yellow: #fbbc05;
  }
  
  * {
	box-sizing: border-box;
  }
  
  body {
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
  }
  
  .loading-box {
	position: relative;
	width: 500px;
	height: 500px;
  }
  
  .dot {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--red);
	width: 30px;
	height: 30px;
	border-radius: 50%;
  }
  
  .line {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border-left-style: solid;
	border-top-style: solid;
	border-top-color: transparent;
	border-left-width: 20px;
	border-top-width: 20px;
  }
  
  .line1 {
	transform: rotate(120deg) rotateX(66deg) rotate(0deg);
	animation: line-spin1 1s linear infinite;
	border-left-color: var(--blue);
  }
  
  .line2 {
	transform: rotate(240deg) rotateX(66deg) rotate(0deg);
	animation: line-spin2 1s linear infinite;
	border-left-color: var(--yellow);
  }
  
  .line3 {
	transform: rotate(1turn) rotateX(66deg) rotate(0deg);
	animation: line-spin3 1s linear infinite;
	border-left-color: var(--green);
  }
  
  @keyframes line-spin1 {
	100% {
	  transform: rotateZ(120deg) rotateX(66deg) rotateZ(360deg);
	}
  }
  
  @keyframes line-spin2 {
	100% {
	  transform: rotateZ(240deg) rotateX(66deg) rotateZ(360deg);
	}
  }
  
  @keyframes line-spin3 {
	100% {
	  transform: rotateZ(360deg) rotateX(66deg) rotateZ(360deg);
	}
  }