html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/*Roullete animations, styles, places :*/

.links {
  position: absolute;
  bottom: 14vw;
  left: 55vw;
}

.actions {
  position: absolute;
  bottom: 24vw;
  left: 55vw;
}

.mode-icons {
  /*display: flex;
  justify-content: center;
  align-items: center;*/
  /*display: block;
  max-width: 150px;
  margin: 0 auto;
  flex-direction: column;
  width: 300px;
  height: 300px;*/
  */
}

#modeC {
  /*padding: 1vw;
  display: flex;
  justify-content: center;
  align-items: center;
  display: block;
  max-width: 150px;
  margin: 0 auto;
  flex-direction: column;
  width: 300px;
  height: 300px;*/
}

.col-sm-4 {}

#rouletteGraph {
  position: relative;
  /* left: 0vw; */
  width: 30vw;
  height: 30vw;
  align-items: center;
}

.picturesRound {
  position: absolute;
  vertical-align: middle;
  border-style: none;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  top: 5vw;
  left: 5vw;
}

.row img {
  /* vertical-align: middle; */
  /* border-style: none; */
  width: 7vw;
  margin: 2vw;
}

.row h2 {
  font-size: 2vw;
  width: -2vw;
  margin: 0.9vw;
}

.row {
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  width: 49vw;
  position: relative;
  /* height: 53vw; */
  margin: 24px;
}

#roulettePlaceholder {
  /* position: relative; */
  display: flex;
  justify-content: center;
}

.wheel {
  position: absolute;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  border-style: none;
  /* width: 60vw; */
  /* height: 60vw; */
  border-radius: 50%;
}

.answers {
  position: absolute;
  top: 28vw;
  left: 11.5vw;
  text-align: center;
  font-family: 'Cabin Sketch', cursive;
  font-weight: 300;
  font-size: 3vw;
  /* display: block; */
  max-width: 273px;
  margin: 0 auto;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  color: black;
  margin-left: auto;
}

.icon {
  position: absolute;
  width: 90%;
  height: 90%;
  /* width: 60vw; */
  /* height: 60vw; */
  /* margin: -60px 0 0 -60px; */
}

/* wheel-static*/

.wheelStatic {
  /* margin: -60px 0 0 -60px; */
  width: 20vw;
  height: 20vw;
}

/*wheel-Animations*/

.wheelSpin {
  position: absolute;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  border-style: none;
  /*margin: -60px 0 0 -60px;*/
  -webkit-animation: spin 1s linear infinite;
  -moz-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

button {
  /*margin: 2%;
  padding: 5% 5%;
  font-size: 1.2rem;
  font-weight: bolder;*/
}

h1 {
  font-weight: bolder;
  font-size: 3rem;
  width: 100%;
  min-height: 2em;
  top: 30%;
  left: 30%;
}

.link-logo {}

/*Start Screen etc*/

.logo {
  /*width: 50%;
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;*/
  display: block;
  max-width: 300px;
  margin: 0 auto;
  width: 90%;
}

#quote {
  height: 20vw
}

.quote {
  font-family: 'Cabin Sketch', cursive;
  font-weight: 300;
  font-size: 25px;
  /* display: block; */
  max-width: 300px;
  margin: 0 auto;
  width: 90%;
  align-items: center;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
  flex-wrap: wrap;
  position: relative;
  /*top: 10vh;*/
}

.quote2 {
  font-family: 'Cabin Sketch', cursive;
  font-weight: 300;
  font-size: 25px;
  /* display: block; */
  max-width: 300px;
  margin: 0 auto;
  width: 90%;
  align-items: center;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
  flex-wrap: wrap;
  position: relative;
  top: 10vh;
}

#pick {
  position: relative;
}

#start-button {
  /* display: block; */
  max-width: 300px;
  margin: 0 auto;
  width: 90%;
  align-items: center;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
  flex-wrap: wrap;
  /*top: 18vh;*/
  /* left: 7vw; */
  position: relative;
}

#container {
  height: 96vh;
  /*box-shadow: 0em 0em 1em #DCDCDC;
  margin: 1em;
  background-color: #7bf7ab;
  animation: fadeIn 1s;*/
}

/*responsive?*/

#modes {
  align-items: center;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
  flex-wrap: wrap;
  position: relative;
  /*top: 15vh;*/
}

/*header, main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;}*/

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff;
  display: flex;
  overflow: hidden;
}

main {
  display: flex;
  /* height: 100%; */
  overflow: hidden;
  justify-content: center;
  /* align-items: center; */
  flex-direction: column;
}

#div-high {
  display: flex;
  flex-direction: column;
  animation: fadein 1s;
}

#div-mid {
  /*display: flex;
  flex-direction: column;
  animation: fadein 1s;*/
}

.div-low {
  position: relative;
  display: flex;
  /* flex-direction: row; */
  justify-content: center;
  /* animation: fadein 1s; */
  margin: 4% 0 0 5%;
  /* top: 25vh; */
  /* left: 25vw; */
}

}

#back-button {
  display: flex;
  flex-direction: column;
  animation: fadein 1s;
  top: -30vw;
  /*display: block;
  max-width: 300px;
  margin: 0 auto;
  width: 90%;*/
}

.container-fluid {
  /*display: block;*/
  /*max-width: 500px;*/
  /*margin: 0 auto;*/
  /*width: 10%;*/
}

/* Heart Icon
--------------------------------------------- */

#footer {
  /* max-width: 300px; */
  /* margin: 0 auto; */
  /* position: relative; */
  /* left: 0; */
  /* top: 66vh; */
  /* width: 90%; */
  margin-top: 3vw;
  display: flex;
  justify-content: center;
  /* text-align: center; */
  /* position: fixed; */
  /* bottom: 0; */
}

.site-footer .icon {
  font-size: 20px;
}

.site-footer .love .icon {
  font-size: 12px;
  margin-left: 2px;
  margin-right: 2px;
}

/*bootstrap*/

.selector-for-some-widget {
  box-sizing: content-box;
}

/*popup*/

/*TRASH---------------*/

/*#input {
  position: absolute;
  top: 80%;
  left: 55%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  font-size: 30px
}*/

/*@media  (min-width: ) {

}*/