/* Container to center and hold the web */
.web-container {
  width: 100%;
  height: 100vh;
  background-color: #111; /* Dark background so white web lines stand out */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.spiderlook-holder{
    width: 500px;
    height: 505px;
    float: left;
    overflow: hidden;
    padding: 3px 5px;
    margin: 5px 5px;
    margin-left: 25px;
    margin-left: 45px;
    /* margin: 2px 2px; */
    background-color: #111;
    border: 4px solid #101;
    border-radius: 7px 9px;
}
/* Main web wrapper */
.spider-web {
  position: relative;
  /* width: 400px;
  height: 400px; */

  /* width: 450px;
  height: 450px; */

  width: 500px;
  height: 505px;

  /* display: flex;
  justify-content: center;
  align-items: center; */

  /* background-color: rgb(189, 129, 40); */
  overflow: hidden;
}
.spider-web-bg {
  position: relative;
  /* width: 400px;
  height: 400px; */

  /* width: 450px;
  height: 450px; */

  width: 500px;
  height: 505px;

  display: flex;
  justify-content: center;
  align-items: center;

  /* background-color: rgb(189, 129, 40); */
  background-color: rgb(29, 7, 7);
  overflow: hidden;
}

.spider-web-fg {
  position: relative;
  /* width: 400px;
  height: 400px; */

  width: 450px;
  height: 450px;
  top: -450px;
  left: 0px; 
  /* display: flex;
  justify-content: center;
  align-items: center; */

  background-color: rgba(236, 209, 167, 0.123);
  overflow: hidden;
}

/* Spokes running from center outwards across the full web diameter */
.spoke {
  position: absolute;
  width: 545px;
  /* height: 1px; */
  height: 3px;
  background-color: rgba(255, 255, 255, 0.4);
  transform: rotate(var(--angle));
  transform-origin: center;
}
.spoke-1 {
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.4);
  transform: rotate(var(--angle));
  transform-origin: center;
}

/* Base style for concentric circles */
.ring {
  position: absolute;
  border-radius: 50%;
  /* border: 1px solid rgba(255, 255, 255, 0.5); */
  border: 3px solid rgba(255, 255, 255, 0.5);
  box-sizing: border-box;
}

/* Ring sizes moving from inside to outside */
.ring-1 {
    /* width: 70px; height: 70px; */
    width: 20px; height: 20px;
    background-color: white;
}

.ring-2 {
  /* width: 140px;height: 140px; */
  width: 130px;height: 100px;
}

.ring-3 {
  width: 210px; height: 210px;
}

.ring-4 {
  /* width: 280px; height: 280px; */
  width: 180px; height: 145px;
}

.ring-5 {
  width: 375px;
  height: 350px;
}

.ring-6 {
  width: 410px;
  height: 400px;
}

.ring-7 { width: 425px; height: 410px; }

.ring-8 { width: 430px; height: 420px; }
.ring-9 {  width: 440px; height: 440px; }
.ring-10 {  width: 550px; height: 550px;}

.spider-web-fg-item{
    /* height: auto;
    min-height: 15px;
    max-height: 25px; */

    /* height: 25px; */
    height: 30px;

    /* width: auto;
    min-width: 40px;
    max-width: 250px; */

    width: 40px;

    /* padding: 2px 2px; */
    padding: 4px 3px;
    background-color: bisque;

    border-radius: 11% 13%;
    margin: 3px 3px;
    border: 4px darkorchid solid ;
    box-sizing: border-box;
    overflow: hidden;

    /* position: relative;
    top: 5;
    left: 5; */
}

.spider-web-fg-item a{ 
    text-decoration: none; color: black;
    font-size: 16px; font-weight: 800;
    background-color: rgb(117, 82, 38); 
    background-color: rgb(117, 82, 38); 
    background-color: rgba(110, 122, 126, 0.336);
    padding: 1px 4px; 
    /* padding: 2px;  */
    /* margin: 2px auto; */
    margin: 2px 4px;
    margin-top: 4px;
    /* font-family: 'Times New Roman', Times, serif; */
    /* font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; */
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.spider-web-fg-item a:hover{ 
    background-color: blueviolet; 
    background-color: darkorchid; 
}
/* the spider web plain for the game --  */
/* 000 */
/* 222 */

.spiderlook-holder-in-side{
    width: 310px;
    height: 355px;
    float: left;
    overflow: hidden;
    padding: 3px 5px;
    margin: 5px 1px;
    margin-top: 21px;
    background-color: #111;
    border: 4px solid #101;
    border-radius: 7px 9px;
}

.spider-web-in-side{
  position: relative;

  width: 310px;
  height: 350px;

  /* display: flex;
  justify-content: center;
  align-items: center; */

  /* background-color: rgb(189, 129, 40); */
  overflow: hidden;
}
.clearfixo{ 
  clear: both;
  width: 100%;
  height: 1px; 
} 

.spider-web-in-side .spider-web-bg {


  width: 305px;
  height: 345px;

  display: flex;
  justify-content: center;
  align-items: center;

  /* background-color: rgb(189, 129, 40); */
  background-color: rgb(29, 7, 7);
  overflow: hidden;
}

.spider-web-in-side .spider-web-fg {
  position: relative;
  /* width: 400px;
  height: 400px; */

  width: 305px;
  height: 345px;
  top: -345px;
  left: 0px; 
  /* display: flex;
  justify-content: center;
  align-items: center; */

  background-color: rgba(236, 209, 167, 0.123);
  overflow: hidden;
}

/* Spokes running from center outwards across the full web diameter */
.spoke {
  position: absolute;
  width: 545px;
  /* height: 1px; */
  height: 3px;
  background-color: rgba(255, 255, 255, 0.4);
  transform: rotate(var(--angle));
  transform-origin: center;
}
.spoke-1 {
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.4);
  transform: rotate(var(--angle));
  transform-origin: center;
}

/* Base style for concentric circles */
.ring {
  position: absolute;
  border-radius: 50%;
  /* border: 1px solid rgba(255, 255, 255, 0.5); */
  border: 3px solid rgba(255, 255, 255, 0.5);
  box-sizing: border-box;
}

/* Ring sizes moving from inside to outside */
.ring-1 {
    /* width: 70px; height: 70px; */
    width: 20px; height: 20px;
    background-color: white;
}

.ring-2 {
  /* width: 140px;height: 140px; */
  width: 130px;height: 100px;
}

.ring-3 {
  width: 210px; height: 210px;
}

.ring-4 {
  /* width: 280px; height: 280px; */
  width: 180px; height: 145px;
}

.ring-5 {
  width: 375px;
  height: 350px;
}

.ring-6 {
  width: 410px;
  height: 400px;
}

.ring-7 { width: 425px; height: 410px; }

.ring-8 { width: 430px; height: 420px; }
.ring-9 {  width: 440px; height: 440px; }
.ring-10 {  width: 550px; height: 550px;}

.spider-web-fg-item{
    /* height: auto;
    min-height: 15px;
    max-height: 25px; */

    /* height: 25px; */
    height: 30px;

    /* width: auto;
    min-width: 40px;
    max-width: 250px; */

    width: 40px;

    /* padding: 2px 2px; */
    padding: 4px 3px;
    background-color: bisque;

    border-radius: 11% 13%;
    margin: 3px 3px;
    border: 4px darkorchid solid ;
    box-sizing: border-box;
    overflow: hidden;

    /* position: relative;
    top: 5;
    left: 5; */
}

.spider-web-fg-item a{ 
    text-decoration: none; color: black;
    font-size: 16px; font-weight: 800;
    background-color: rgb(117, 82, 38); 
    background-color: rgb(117, 82, 38); 
    background-color: rgba(110, 122, 126, 0.336);
    padding: 1px 4px; 
    /* padding: 2px;  */
    /* margin: 2px auto; */
    margin: 2px 4px;
    margin-top: 4px;
    /* font-family: 'Times New Roman', Times, serif; */
    /* font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; */
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.spider-web-fg-item a:hover{ 
    background-color: blueviolet; 
    background-color: darkorchid; 
}