@import "compass/css3";

body {
  margin : 0;
  overflow : hidden;
  font-family : 'Sarabun';
  background-color : #003a5d;
  background-image : url('../media/universe.svg');
  height : 100vh;
  width : 100vw;
  position : relative;
}


/*
.item {
  background-color : #0077b3;
  float : left;
  border : 1px solid #000;
  border-radius : 50px;
  margin : 10px;
  position : absolute;
}
*/

.circle-container {
  position: relative;
  width: 30em;
  height: 30em;
  border-radius: 50%;
  padding: 0;
  list-style: none;
  margin: auto;
  border: solid 5px #ffffff2f;
}
.circle-container > * {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -5em;
  width: 10em;
  height: 6em;
}
.circle-container > *:nth-of-type(1) {
  transform: rotate(0deg) translate(15em) rotate(0deg);
}
.circle-container > *:nth-of-type(2) {
  transform: rotate(60deg) translate(15em) rotate(-60deg);
}
.circle-container > *:nth-of-type(3) {
  transform: rotate(120deg) translate(15em) rotate(-120deg);
}
.circle-container > *:nth-of-type(4) {
  transform: rotate(180deg) translate(15em) rotate(-180deg);
}
.circle-container > *:nth-of-type(5) {
  transform: rotate(240deg) translate(15em) rotate(-240deg);
}
.circle-container > *:nth-of-type(6) {
  transform: rotate(300deg) translate(15em) rotate(-300deg);
}

.circle-container img {
  display: block;
  max-width: 100%;
  border-radius: 50%;
  filter: grayscale(100%);
  border: solid 5px #003b5d;
  transition: .15s;
}
.circle-container > *:nth-of-type(1) img:hover {
    border: solid 5px #77387d;
}
.circle-container > *:nth-of-type(2) img:hover {
    border: solid 5px #df712d;
}
.circle-container > *:nth-of-type(3) img:hover {
    border: solid 5px #002a8d;
}
.circle-container > *:nth-of-type(4) img:hover {
    border: solid 5px #008037;
}
.circle-container > *:nth-of-type(5) img:hover {
    border: solid 5px #9b1010;
}
.circle-container > *:nth-of-type(6) img:hover {
    border: solid 5px #6c32df;
}

.white:hover{
  border: solid 5px #fff;
}

.circle-container img:hover {
  filter: grayscale(0);
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

#graph {
  position : absolute;
  top : calc(50% - 245px);
  left : calc(50% - 245px);
}

#const {
  display : block;
}

#role {
  position: absolute;
  top: calc(50% - 100px);
  left: calc(50% - 102px);
  z-index : 2;
}

#imgRole {
  width : 200px;
  border-radius : 50%;
  border : 5px solid transparent;
}

#imgRole:hover{
  border : 5px solid #fff;
  padding : 0px;
}

#imgRole:hover + #title {
  visibility : visible;
}

#title {
  position : absolute;
  visibility : hidden;
  color : #fff;
  font-size : 64px;
  top : -160%;
  width : 500px;
  text-align : center;
  left : calc(50% - 250px);
  font-family : 'Caveat Brush', cursive;
}

.tooltiptext {
  visibility: hidden;
  width: 200px;
  height : auto;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  left: 105%;
  display : inline-block;
}

.list {
  padding : 0;
}

.tool1 {
  background-color: #77387daa;
  top : 25%;
  left : 110%;
}
.tool2 {
  background-color: #df712daa;
  top : 25%;
  left : 110%;
}
.tool3 {
  background-color: #002a8daa;
  top : 25%;
  left : -130%;
}
.tool4 {
  background-color: #008037aa;
  top : 25%;
  left : -130%;
}
.tool5 {
  background-color: #9b1010aa;
  top : -75%;
  left : -130%;
}
.tool6 {
  background-color: #6c32dfaa;
  top : -75%;
  left : 110%;
}



/*#prop1 {
  top : 33%;
  left : 33%;
}

#prop2 {
  top : 33%;
  left : 55%;
}

#prop3 {
  top : 40%;
  left : 40%;
}

#prop4 {
  top : 40%;
  left : 60%;
}
*/

.boxed {
  width : calc(100vw * 0.7);
  text-align : center;
  margin : 50px calc(100vw*0.3*0.5);
  background-color : #fff5;
  border-radius : 15px;
}

.list {
  color : #fff;
  list-style : none;
  padding-left : 50px;
  font-size : 30px;
  list-style-position : inside;
}

.list > li{
  margin-top : 25px;
}

.list > li > img{
  margin-bottom : -15px;
  margin-right : 15px;
}