html {
  padding:0px;
  overscroll-behavior: none;
}
body {
  margin: 0; /* override default margin */
  height: 100%;
}

#device {
  position: fixed;
  background-color:#d0d0d0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100svh; /* total viewheight minus browser chrome */
  width: 100%;
  overscroll-behavior: contain;
  align-items:center;
}

#search {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  position: absolute;
  top: 24px;
  width: 88%;
  height: 48px;
  background-color: white;
  border: 2px solid black;
  border-radius:48px;
}

#search_submit {
  width: 32px;
  height: 32px;
  margin-right: 16px;
  background-color: blue;
}

#appbar {
  display:flex;
  flex-direction:row;
  gap:24px;
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 128px;
  border-radius: 0% 0% 0px 0px;
  background-color: white;
  align-items:center;
  justify-content:center;
}

#home {
  background-color: blue;
  width:32px;
  height:32px;
}
#log {
  background-color: yellow;
  width:32px;
  height:32px;
}

#profile {
  background-color: green;
  width:32px;
  height:32px;
}

#disc {
  display:flex;
  justify-content: center;
  align-items: center;
  background: conic-gradient(from 180deg at 50% 50%, #444E5A 0deg, #516983 28.8deg, #818E62 74.61deg, #79A799 108.84deg, #6691BC 140.35deg, #444E5A 179.1deg, #818E62 235deg, #89A380 258.75deg, #6691BC 316.42deg, #516983 340.98deg, #444E5A 359.78deg, #444E5A 360deg);
  mix-blend-mode: normal;
  opacity: 0.6;
  transform: rotate(90deg);
  border-radius:50%;
  width:300px;
  height:300px;
  outline: 2px solid white;
  margin-top:30px;
  animation-name: spin;
  animation-duration: 5000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
#disc_hole {
  background-color:#d0d0d0;
  width:50px;
  height:50px;
  border-radius:50%;
  outline: 8px solid white;
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

/*big screen style*/
@media (min-width:36em) {
  html {
    padding-left: 16px;
    padding-top: 16px;
    background-color:#555;
  }
  #device {
    height: 812px;
    width: 375px;
    outline: 3px solid #E4CDDD;
    border-radius: 40px;
  }
  #appbar {
    border-radius: 0% 0% 40px 40px;
  }
}