body {
    background: White;
    color: Red;
    font-family: Helvetica, sans-serif;
    font-weight: normal;
    font-size: 24px;
    margin: 0;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: optimizeLegibility !important;
}

p {
    margin: 0;
}

span {
    font-size: 4vw;
    font-family: Arial;
    font-weight: 100;
}

img, video, audio, iframe {
    text-align: center;
    max-width: 100%;
    width: 100%;
}

#main_container {

}

.img_content {
    text-align: center;
    width: 600px;
    max-width: 100%;
    margin: 0 auto;
}

.txt_container {
    margin: -20px auto 480px;
    width: 600px;
}

.top {
    position: fixed;
    font-size: 9vw;
    text-align: justify;
    text-align-last: justify;
    height: 1.15em;
    line-height: 1.15;
    width: 96%;
    margin: 1% 2% 2% 2%;
    z-index: -9;
}

.top:after {
    content: "";
    display: inline-block;
    width: 100%;
}

.dot1 {
    position: fixed;
    text-align: center;
    top: 27%;
    width: 100%;
    margin: 0 auto;
    font-family: Times;
    font-size: 2vw;
    pointer-events: none;
    z-index: -9;
}

.ad1 {
    position: fixed;
    text-align: center;
    top: 28%;
    width: 100%;
    margin: 0 auto;
    font-family: Courier;
    font-size: 1.6vw;
    color: Black;
    z-index: -9;
}

.mid {
    position: fixed;
    font-size: 9vw;
    text-align: justify;
    text-align-last: justify;
    height: 1.15em;
    line-height: 1.15;
    width: 96%;
    margin: 0 2% 0 2%;
    top: 50%;
    transform: translate(0%, -50%);
    z-index: -9;
}

.mid:after {
    content: "";
    display: inline-block;
    width: 100%;
}

.dot2 {
    position: fixed;
    text-align: center;
    top: 69%;
    width: 100%;
    margin: 0 auto;
    font-family: Times;
    font-size: 2vw;
    pointer-events: none;
    z-index: -9;
}

.ad2 {
    position: fixed;
    text-align: center;
    top: 70%;
    width: 100%;
    margin: 0 auto;
    font-family: Courier;
    font-size: 1.6vw;
    color: Black;
    z-index: -9;
}

.bottom {
    position: fixed;
    bottom: 4px;
    z-index: 999;
    width: 96%;
    margin: 0 2% 2% 2%;
}

.bottom1 {
    left: 0px;
    width: 30vw;
    float: left;
    pointer-events: none;
}

.bottom2 {
    right: 0px;
    width: 32vw;
    float: right;
    pointer-events: none;
}

.key {
    position: fixed;
    width: 180px;
    top: 50%;
    transform: translate(0%, -50%);
    left: 24%;
    pointer-events: none;
}

.info {
    position: fixed;
    bottom: 4%;
    text-align: center;
    width: 100%;
    z-index: 99999;
}

.info a {
    color: Red;
    text-decoration: none;

    -o-transition:.4s;
    -ms-transition:.4s;
    -moz-transition:.4s;
    -webkit-transition:.4s;
    transition:.4s;
}

.info a:hover {
    background-color: Red;
    text-decoration: none;
}

#about {
    padding: 1% 3% 12% 1%;
    background-color: White;
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

#about a {
    color: Red;
    text-decoration: none;

    -o-transition:.4s;
    -ms-transition:.4s;
    -moz-transition:.4s;
    -webkit-transition:.4s;
    transition:.4s;
}

#about a:hover {
    background-color: Red;
    text-decoration: none;
}

hr {
    color: Red;
    background-color: Red;
    border: none;
    height: 1.34em;
}

@media only screen
and (max-device-width: 900px)
and (-webkit-min-device-pixel-ratio: 1)
{
    body { font-size: 48px; -webkit-text-size-adjust: 100%; }
    #about { padding: 3% 3% 18% 3%;
    -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1; }
    .dot1, .dot2 { font-size: 32px; }
    .dot1 { top: 25%; }
    .dot2 { top: 72%; }
    .ad1, .ad2 { font-size: 42px; }
    .ad1 { top: 23%; }
    .ad2 { top: 70%; }
    .key { width: 240px; }
}

::-moz-selection { color: transparent; }
::selection { color: transparent; }
::-moz-selection { background: Red; }
::selection { background: Red; }