/* CSS Document */

:root {
  --container1-width: 20vw;
  --container1-height: calc(var(--container1-width)*1.07);
  --left-container1-margin: 40%;
  --top-container1-margin: 30px;
  --containers-background: #000000;
  --binary-spacing: calc(var(--container1-width)*0.03);
}

.periodicContent {
	background-position: center;
    background-repeat: no-repeat;
	background-color: var(--DarkBlue);
    background-size: 75%;
	margin: 0 -10px;
	z-index: 1;
	min-height: 400px;
}

#container {
  position: relative;
  width: var(--container1-width);
  height: var(--container1-height);
  background: var(--containers-background);  
  margin-left: var(--left-container1-margin);
  margin-top: var(--top-container1-margin);
  border: white solid 2px;
  border-radius: 10px;
  box-shadow: 10px 10px 20px var(--containers-background);
}



#myCanvas {
  display: block;
  position: absolute;
  width: var(--container1-width);
  height: var(--container1-height);
  margin: 0 0;
  z-index: 30;
}

.sevenSegment {
  display: block;
  position: absolute;
  width: calc(var(--container1-width)/2.3);
  margin-left: calc(var(--container1-width)*0.21);
  margin-top: calc(var(--container1-width)*0.185);
  padding: 10px;
  transform: skew(-5deg,0deg);
  z-index: 60;
}

#segmentA,
#segmentB,
#segmentC,
#segmentD,
#segmentE,
#segmentF,
#segmentG{
  fill: white;
  opacity: 0;
}

#title {
  display: block;
  position: relative;
  width: 90%;
  background: var(--containers-background);
  padding: 5px;
  text-align: center;
  border-top: white solid 1px;
  font-family: made_tommy_softbold, sans-serif;
  font-size: 2vw;
  color: white;
  left: 5%;
  margin-top: 20px;
}


#binaryA,
#binaryB,
#binaryC,
#binaryD,
#binaryE,
#binaryF,
#binaryG {
  display: block;
  position: absolute;
  background: #111111;
  font-family: made_tommy_softregular, sans-serif;
  font-size: calc(var(--container1-width)*0.07);
  text-align: center;
  color: lightgreen;
  width: calc(var(--container1-width)*0.08);
  height: calc(var(--container1-width)*0.08);
  border-radius: 3px;
  /*border: 1px solid #51e4ff;*/
  box-shadow: 1px 1px 8px #51e4ff;
  z-index: 90;
  margin-left: calc(var(--container1-width)*0.85);
  padding-top: calc(var(--container1-width)*0.005);;
}

#binaryA {
  margin-top: calc(var(--container1-height)/12);
}

#binaryB {
  margin-top: calc((var(--container1-height)/12)*2 + var(--binary-spacing));
}

#binaryC {
  margin-top: calc((var(--container1-height)/12)*3 + var(--binary-spacing)*2);
}

#binaryD {
  margin-top: calc((var(--container1-height)/12)*4 + var(--binary-spacing)*3);
}

#binaryE {
  margin-top: calc((var(--container1-height)/12)*5 + var(--binary-spacing)*4);
}

#binaryF {
  margin-top: calc((var(--container1-height)/12)*6 + var(--binary-spacing)*5);
}

#binaryG {
  margin-top: calc((var(--container1-height)/12)*7 + var(--binary-spacing)*6);
}


@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : landscape)  {
  
	:root {--container1-width: 40vw;}
  #title {
    font-size: 3vw;
  }
  #container {
    margin: 30px auto;
  }
	.sevenSegment {
  width: calc(var(--container1-width)/3);
  margin-left: calc(var(--container1-width)*0.23);
  margin-top: calc(var(--container1-width)*0.21);
}
}

@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : portrait)
	
	{
  
	:root {--container1-width: 70vw;}
  #title {
    font-size: 3vw;
  }
  #container {
    margin: 30px auto;
  }
	.sevenSegment {
  width: calc(var(--container1-width)/3);
  margin-left: calc(var(--container1-width)*0.23);
  margin-top: calc(var(--container1-width)*0.21);
}
}