@font-face {
font-family: 'UltramagneticWeb';
src: url('fonts/Ultramagnetic.eot');
src: local('☺'), url('fonts/Ultramagnetic.woff') format('woff'), url('fonts/Ultramagnetic.ttf') format('truetype'), url('fonts/Ultramagnetic.svg') format('svg');
font-weight: normal;
font-style: normal;
}

#logoarea {
font-family: 'UltramagneticWeb';
font-weight: normal;

}
#logoarea.green {

color: hsl(171, 43%, 38%);
}
#logoarea.purple {

color: hsl(253, 43%, 38%);
}

#logoarea.blue {

color: hsl(207, 43%, 38%);
}
#logoarea.pink {

color: hsl(324, 43%, 38%);
}
#logoarea.yellow {

color: hsl(45, 43%, 38%);
}
#logoarea.orange {

color: hsl(18, 43%, 38%);
}
#logoarea.turquoise {

color:  hsl(185, 43%, 38%);
}

.darkbg #logoarea {
  color:  white;
}

#bgwrapper {
  position: relative;
  width: 180px;
  background: transparent;
  height:300px;
}
#bgwrapper.darkbg {
  background: #444;
}
#logowrapper {
width:166px;
position: absolute;
top: 6px;
left: 12px;
height:294px;
display: block;
text-decoration: none;
}
.logotitle {
font-size: 36px;
letter-spacing: 2px;
color: currentcolor;
}
.logoline {
width: 76px;
height:1px;
background-color: currentcolor;
}
.logotextwrapper {
position: relative;
}
.logotext {
position: absolute;
top: 0;
left:0;
font-size: 16px;
color: currentcolor;
line-height:1.3;
margin-top:10px;
text-transform: uppercase;

}

#svglogo {
position: relative;
top: 60px;
left: 5px;
width:100%;
height: auto;
}

#svglogo svg polygon {
  transition: fill 0.3s;
  }

   .purple #tri-1 {
 fill: hsl(253, 15%, 74%);
 }
  .purple #tri-2 {
 fill: hsl(253, 52%, 55%);
 }
 .purple #tri-3 {
 fill: hsl(253, 44%, 28%);
 }
 .purple #tri-4 {
 fill: hsl(253, 43%, 38%);
 }
   .purple #tri-5 {
 fill: hsl(253, 38%, 64%);
 }
   .purple #tri-6 {
 fill: hsl(253, 10%, 86%);
 }
 
   .pink #tri-1 {
 fill: hsl(324, 15%, 74%);
 }
  .pink #tri-2 {
 fill: hsl(324, 52%, 55%);
 }
 .pink #tri-3 {
 fill: hsl(324, 44%, 28%);
 }
 .pink #tri-4 {
 fill: hsl(324, 43%, 38%);
 }
   .pink #tri-5 {
 fill: hsl(324, 38%, 64%);
 }
   .pink #tri-6 {
 fill: hsl(324, 10%, 86%);
 }
 
   .blue #tri-1 {
 fill: hsl(207, 15%, 74%);
 }
  .blue #tri-2 {
 fill: hsl(207, 52%, 55%);
 }
 .blue #tri-3 {
 fill: hsl(207, 44%, 28%);
 }
 .blue #tri-4 {
 fill: hsl(207, 43%, 38%);
 }
   .blue #tri-5 {
 fill: hsl(207, 38%, 64%);
 }
   .blue #tri-6 {
 fill: hsl(207, 10%, 86%);
 }
 
 .yellow #tri-1 {
 fill: hsl(45, 15%, 74%);
 }
  .yellow #tri-2 {
 fill: hsl(45, 52%, 55%);
 }
 .yellow #tri-3 {
 fill: hsl(45, 44%, 28%);
 }
 .yellow #tri-4 {
 fill: hsl(45, 43%, 38%);
 }
   .yellow #tri-5 {
 fill: hsl(45, 38%, 64%);
 }
   .yellow #tri-6 {
 fill: hsl(45, 10%, 86%);
 }  
 
   .orange #tri-1 {
 fill: hsl(18, 15%, 74%);
 }
  .orange #tri-2 {
 fill: hsl(18, 52%, 55%);
 }
 .orange #tri-3 {
 fill: hsl(18, 44%, 28%);
 }
 .orange #tri-4 {
 fill: hsl(18, 43%, 38%);
 }
   .orange #tri-5 {
 fill: hsl(18, 38%, 64%);
 }
   .orange #tri-6 {
 fill: hsl(18, 10%, 86%);
 }
 
 .turquoise #tri-1 {
 fill: hsl(185, 15%, 74%);
 }
  .turquoise #tri-2 {
 fill: hsl(185, 52%, 55%);
 }
 .turquoise #tri-3 {
 fill: hsl(185, 44%, 28%);
 }
 .turquoise #tri-4 {
 fill: hsl(185, 43%, 38%);
 }
   .turquoise #tri-5 {
 fill: hsl(185, 38%, 64%);
 }
   .turquoise #tri-6 {
 fill: hsl(185, 10%, 86%);
 }
 
  .green #tri-1 {
 fill: hsl(171, 15%, 74%);
 }
  .green #tri-2 {
 fill: hsl(171, 52%, 55%);
 }
 .green #tri-3 {
 fill: hsl(171, 44%, 28%);
 }
 .green #tri-4 {
 fill: hsl(171, 43%, 38%);
 }
   .green #tri-5 {
 fill: hsl(171, 38%, 64%);
 }
   .green #tri-6 {
 fill: hsl(171, 10%, 86%);
 }