@charset "UTF-8";

/* reset */
*,
*::before,
*::after {
  margin:0;
  padding:0;
  box-sizing:border-box;
}
  ul {
  list-style:none;
}
/* styles */
body {
  font-size:100%;
  text-align:center;
  background:url(../images/logo_bg_alt.gif);
}
header,
main,
footer {
  width:906px;
  margin:auto;
}
@media screen and (max-width:767px) {
body {
background:url(../images/logo_bg_alt.gif);
background-size:50%;
}
header,
main,
footer {
  width:95%;
  margin:auto;
}
p {
  font-size:13px;
}
.brokenCounter img {
  width:40%;
}
button {
  margin:auto;
  height:68px;
}
.flex {
  display:block;
}
.timeLine,
section {
  width:100%:
}
section {
  margin:2rem 0;
}
}
@media screen and (min-width:768px) and (max-width:834px) {
.flex {
  display:flex;
  justify-content:space-between;
  width:95%;
  margin:2rem auto;
}
.timeLine,
section {
  width:330px;
}
}
@media screen and (min-width:835px) {
button {
  height:118px;
}
.flex {
  display:flex;
  justify-content:space-between;
  width:95%;
  margin:2rem auto;
}
.timeLine,
section {
  width:400px;
}
}
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
header
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
header {
  padding:2rem 0 1rem;
}
h1 {
  position:relative;
}
h1 img {
  width:80%;
  filter:drop-shadow(5px 5px 5px white);
}
h1::before,
h1::after {
  content:"";
  display:block;
  position:absolute;
  width:10%;
  height:85%;
}
h1::before {
  background:center/contain url(../images/logoMark.gif) no-repeat;
  animation-name:booze;
  animation-duration:3s;
  animation-iteration-count:infinite;
}
@keyframes booze {
  0% {transform:rotate(0);}
  40% {transform:rotate(10deg);}
  60% {transform:rotate(-10deg);}
  100%  {transform:rotate(0);}
}
h1::after {
  top:0;
  right:0;
  background:center/contain url(../images/noSmoking.gif) no-repeat;
  animation-name:noSmoke;
  animation-duration:3s;
  animation-iteration-count:infinite;
}
@keyframes noSmoke {
  0% {transform:scale(1);}
  40% {transform:scale(.9);}
  60% {transform:scale(1.1);}
  100%  {transform:scale(1);}
}
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
main
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* marquee */
div.marquee {
  width:100%;
  text-align:center;
  overflow:hidden;
  background:yellow;
}
.marquee p{
  margin:0;
  display:inline-block;
  padding-left:100%;
  white-space:nowrap;
  line-height:2;
  color:blue;
  animation:scrollSample01 20s linear infinite;
}
@keyframes scrollSample01{
  0% { transform: translateX(0)}
  100% { transform: translateX(-100%)}
}
/* main visual */
figure {
  margin-bottom:1rem;
}
figure img {
  width:100%;
  border:25px ridge rgba(225,255,255,.3);
}
/* brokenCounter */
.brokenCounter img {
  margin:0 .25rem;
  vertical-align:-47%;
}
.brokenCounter p:first-child {
  color:lime;
  font-weight:bolder;
  margin-bottom:.5rem;
}
.brokenCounter p:first-child span{
  color:yellow;
  margin:0 .5rem;
}
.brokenCounter p:nth-child(2) {
  color:red;
}
.brokenCounter p:nth-child(2) img {
  margin:0 .5rem;
}
.brokenCounter p:nth-child(3) {
  font-size:13px;
  line-height:3;
  color:#fff;
}
/* button */
button {
  width:95%;
  margin:1rem auto;
  background:center/contain url(../images/button.gif) no-repeat;
  cursor:pointer;
  animation:button 2s linear infinite;
}
@keyframes button {
  0% {background:center/contain url(../images/button.gif) no-repeat;}
  49% {background:center/contain url(../images/button.gif) no-repeat;}
  50% {background:center/contain url(../images/buttonHover.gif) no-repeat;}
  99% {background:center/contain url(../images/buttonHover.gif) no-repeat;}
  100% {background:center/contain url(../images/button.gif) no-repeat;}
}
button:hover {
  background:center/contain url(../images/buttonHover.gif) no-repeat;
}
/* newest tweet */
.newestTweet {
  width:95%;
  margin:1rem auto;
  padding:1rem;
  text-align:left;
  background:yellow;
  display:none;
}
.newestTweet p {
  padding:.5rem 0;
  font-size:1.2rem;
  font-weight:bolder;
  line-height:1.2;
  color:blue;
  border-bottom:5px dotted hotPink;
}
.newestTweet p img {
  width:1.75rem;
  vertical-align:-20%;
}
.newestTweet p:nth-child(3) {
  border:none;
}
p.timeline-LoadMore-endOfTimelineMessage.no-more-pane {
  display:none;
}
/* hiddenTimeline */
.hiddenTimeline {
  display:none;
}
/* Twitter TimeLine */
.timeLine,
section {
  border-radius:20px;
}
.timeLine {
  background:#fff;
  border:10px solid Lime;
}
section {
  background:cyan;
  padding:2rem;
}
h2 {
  font-size:16px;
  margin-bottom:1rem;
}
section ul {
  text-align:left;
  font-size:15px;
  margin:1rem 0;
}
section img {
  filter:drop-shadow(2px 2px 2px rgba(0,0,0,.5));
  margin-bottom:1rem;
}
section address {
  padding-top:1rem;
}
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
footer
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
footer {
  padding:1rem 0;
}
footer a {
  font-size:1.2rem;
  font-weight:bolder;
  color:yellow;
}
footer p {
  color:white;
}