/* --------------------
 *     Piyon's CSS
 * -------------------- */
body { 
  font-family:"Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif
}

#content {
  background-color: #fdfdfd;
}
a {
  color:#fff;
  text-decoration: none;
}
a:link {
  color:#fff;
  text-decoration: none;
}
a:visited {
  color:#fff;
  text-decoration: none;
}
a:hover {
  color:#DED7CF;
  text-decoration: none;
}
a:active {
  color:#fff;
  text-decoration: none;
}

.ok {
  padding: 10px;
  margin: 10px auto;
  color: #fff;
  line-height: 1.1;
}

.ok h2 {
 font-size: 50px;
 margin: 5px;
}

.ok p {
 text-indent: 0.5em;
 font-size: 18px;
}

/* ---------------------
 *    flat color code
 * --------------------- */
.twitter {
  background-color: #00ADEF;
}
.kakidashi {
  background-color: #393A4E;
}
.kuroyanagi {
  background-color: #A1B91D;
}
.spammuseum {
  background-color: #F15C22;
}
.feely{
  background-color: #168CC9;
}
.words3 {
  background-color: #894891;
}
.urekuyashii {
  background-color: #1A243F;
}
.uwork {
  background-color: #333333;
}
.catcher {
  background-color: #E2AE00;
}

/* ---------------------
 *      Media Size
 * --------------------- */
@media screen and ( min-width: 320px ) {
.ok {
    width: 90%;
}

.ok h2 {
    font-size: 30px;
    margin: 5px;
}

.ok p {
    text-indent: 0.5em;
    font-size: 18px;
} }


@media screen and ( min-width: 500px ) {
.ok {
  width: 90%;
}

.ok h1 {
  font-size: 50px;
  margin: 5px;
}

.ok p {
  text-indent: 0.5em;
  font-size: 22px;
} }

@media screen and ( min-width: 650px ) {
.ok {
  width: 80%;
}

.ok h1 {
  font-size: 60px;
  margin: 5px;
}

.ok p {
  text-indent: 0.5em;
  font-size: 24px;
} }

@media screen and ( min-width: 650px ) {
.ok {
  width: 80%;
}

.ok h2 {
  font-size: 60px;
  margin: 5px;
}

.ok p {
  text-indent: 0.5em;
  font-size: 26px;
} }

@media screen and ( min-width: 960px ) {
.ok {
  width: 55%;
}

.ok h2 {
  font-size: 60px;
  margin: 5px;
}

.ok p {
  text-indent: 0.5em;
  font-size: 26px;
} }