@import url("https://fonts.cdnfonts.com/css/roboto-condensed");
@import url("https://fonts.cdnfonts.com/css/roboto");
@import url("https://fonts.cdnfonts.com/css/roboto-flex");
/* @import url("https://fonts.cdnfonts.com/css/dm-sans?styles=50588"); */
html {
  font-family: "Roboto Flex", "Roboto", "Roboto Condensed", "rationale",
    "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  background-color: white;
}

body {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.dark-mode {
  background-color: rgb(255, 255, 255, 0.1);
}

html {
  background-color: white;
}

h1 h2 h3 h4 h5 h6 {
  width: 39vh;
}

:root {
  color-scheme: only light;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: light;
  }
}

/* Chrome */
@media (forced-colors: active) {
  :root {
    color-scheme: light;
  }
}

#display_body {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#display {
  position: absolute;
  top: 20%;
  bottom: auto;
  left: 0;
  right: 0;
  margin: auto;
  width: 300px;
  height: 300px;
  background-color: white;
}

#logo_div {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#logo {
  /*position: absolute;*/
  /*width: 60%;*/
  max-height: 20vh;
  max-width: 25vh;
  /*top: 45%;*/
  /*bottom: auto;*/
  /*left: 0;*/
  /*right: 0;*/
  /*z-index: 100;*/
  cursor: pointer;
  margin: auto;
}

#fridge {
  position: absolute;
  width: 5%;
  top: 97%;
  bottom: auto;
  left: 25%;
  right: auto;
  z-index: 99;
  rotate: 17deg;
}

#tv {
  position: absolute;
  width: 10%;
  top: 97%;
  bottom: auto;
  left: 25%;
  right: auto;
  z-index: 98;
  rotate: 17deg;
}

#tumble_dryer {
  position: absolute;
  width: 10%;
  top: 97%;
  bottom: auto;
  left: 25%;
  right: auto;
  z-index: 97;
  rotate: 17deg;
}

#bicycle {
  position: absolute;
  width: 10%;
  top: 97%;
  bottom: auto;
  left: 25%;
  right: auto;
  z-index: 96;
  rotate: 17deg;
}

#car {
  position: absolute;
  width: 10%;
  top: 97%;
  bottom: auto;
  left: 25%;
  right: auto;
  z-index: 95;
  rotate: 17deg;
}

#hifi {
  position: absolute;
  width: 10%;
  top: 97%;
  bottom: auto;
  left: 25%;
  right: auto;
  z-index: 94;
  rotate: 17deg;
}

#text_banner {
  /*color: rgb(0, 100, 70);*/
  color: rgb(0, 89, 75);
  max-width: 70%;
  min-height: 4vh;
  width: 52vh;
  font-size: 3.5vh;
  text-align: center;
  margin-top: 1vh;
  scroll-behavior: auto;
}

#country_body {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  min-width: 100vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
}

#country_div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

#country_selection {
  border: none;
  background-color: white;
  width: 27vh;
  font-size: 3vh;
  color: rgb(0, 100, 70);
  text-align: center;
}

#country_button {
  color: rgb(0, 100, 70);
  width: 27vh;
  border: none;
  background-color: white;
  font-size: 3vh;
  text-align: center;
}

.moving_graphic {
  width: 7vh;
  height: auto;
  position: absolute;
  top: 20vh;
  bottom: auto;
  left: 0;
  right: auto;
  margin: 0;
  /*z-index:0;*/
}