@import url('https://fonts.googleapis.com/css?family=Quicksand');

body            {color:#fff; margin:0px; padding:0px; font-family: 'Quicksand', Helvetica, sans-serif;}
a               {color: #fff; text-decoration: none;}
.main           {width: 100%; min-height: 100%; background-image:url(../images/bg-fractal.jpg); background-position: center; background-repeat: no-repeat; background-size: cover;}
.container      {width: 700px; margin:auto; padding: 40px 20px;}
.head           {margin: 0px 0px 60px 0px;}
.logo           {background: #7f1a1a; margin:auto; background-image:url(../images/tc80.png); width: 80px; height:80px; border: 3px solid #fff; border-radius: 43px;}
.logo::before   {background: #7f1a1a; margin:auto; background-image:url(../images/me-coffee80.png); width: 80px; height:80px; border: 3px solid #fff; border-radius: 43px;
                content: ''; position: absolute; left: -3px; top: 0; right:0; bottom: 0; opacity: 0; transition: opacity 0.9s ease-out;}
.logo:hover::before {opacity: 1;}
p               {font-size: 24px; line-height: 28px; margin:10px; padding: 10px; background: #000; opacity: .75;}
p.bigger        {font-size: 38px; line-height: 44px;}
p.biggest       {font-size: 60px; line-height: 68px;}

.socicon i            {margin: 0px 12px;}
.socicon i:hover      {text-shadow: 0px 2px 0px #595959;}

#style-controls                             {width: 224px; display: block; height: 20px; margin: auto; position: relative; top: -50px;}
#style-controls ul			                    {list-style-type:none;}
#style-controls ul li			                  {float: left; margin: 0px 10px 0px 0px;}
#style-controls ul li a                     {opacity: .4; background: none; display:block; height: 16px; width: 16px; border-radius: 5px;}
#style-controls ul li a:hover,
#style-controls ul li.selected a				    {opacity: .6; height: 22px;}

#style-controls ul li a.fractal             {background-color: #5386df;}
#style-controls ul li a.raindrops           {background-color: #4DB9CF;}
#style-controls ul li a.windmill            {background-color: #BFAD89;}
#style-controls ul li a.snowboard	          {background-color: #2C56AC;}
#style-controls ul li a.rocks               {background-color: #76955E;}
#style-controls ul li a.venice              {background-color: #7f6e62;}

body.fractal .main    {background-image:url(../images/bg-fractal.jpg);}
body.raindrops .main  {background-image:url(../images/bg-raindrops.jpg);}
body.windmill .main   {background-image:url(../images/bg-windmill.jpg);}
body.rocks .main      {background-image:url(../images/bg-rocks.jpg);}
body.snowboard .main  {background-image:url(../images/bg-snowboard.jpg);}
body.venice .main     {background-image:url(../images/bg-venice.jpg);}

@media (max-width: 767px) {
  .container      {width: 90%;}
  .socicon i      {margin: 0px 5px;}
}