/************************************************************************
GENERAL
 ***********************************************************************/

body{background:black; color: white; font-family:"Teletext"; -webkit-font-smoothing: antialiased; margin: 0;}
html, body, .wrapper  {margin:0;width:100vw;height:100% ; position:fixed}
/* https://stackoverflow.com/questions/47659664/flexbox-with-fixed-header-and-footer-and-scrollable-content */
/*https://developers.google.com/web/updates/2016/12/url-bar-resizing*/

ul{padding: 0; list-style-type: none}
a{color: white; text-decoration: none}
.wrapper {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: column nowrap;
    flex-direction: column;
    flex-flow: column nowrap;
    text-align: center;
}

#sendSMS {
    display: none;
}

main{
    position: relative;
    padding-left: 5vw;
    padding-right: 5vw;
    /*padding-top: 10vw;
    padding-bottom: 7vw;*/
    overflow-y:auto;
    /*height: 77vh;*/
    flex:1;
}

.red                        {background: #f10026}
.green                      {background: green}
.yellow                     {background: yellow;}
.yellow a                   {color: black}
.blue                       {background: blue}
.pink                       {background: deeppink}
.redTxt                        {color: #f10026}
.greenTxt                      {color: green}
.yellowTxt                     {color: yellow;}
.blueTxt                       {color: blue}
.pinkTxt                       {color: deeppink}




/*        label                                       {color: yellow; font-size: 2.5vw; padding: 4px;} */
input[type="text"],input[type="password"]   {color: yellow; background: black; border: 3px solid yellow; font-size: 2.5vw;-webkit-appearance: none; font-family:"Teletext";}

input[type="button"]                        {
    clear: both; background: yellow; border: 0; font-size: 4vw; margin-left: 4px;
    font-family:"Teletext"; padding: 10px 20px; -webkit-appearance: none;font-weight: 400;
}

textarea                                    {
    margin-top: 10px; background: rgba(255,255,0,0.2); width: 95%; border: 3px solid yellow;
    color: white; height: 175px;-webkit-appearance: none;font-family:"Teletext";font-size: 5vw }

/*        textarea,
        textarea:focus
        {font-size: 2.5vw !important}
  */

input[type="file"]                          {border: 3px solid yellow; margin-top: 10px; padding: 5px;-webkit-appearance: none; font-family:"Teletext";}

/*        select                                      {
            border: 3px solid yellow; background: black; -webkit-appearance: none; padding: 6px 10px 7px; font-size: 2vw;
            font-family:"Teletext"; color: yellow; border-radius: 0;-webkit-appearance: none;-webkit-border-radius: 0px;
            text-align: left;
        }

  */

h1{font-size: 5vw;margin: 0 0 40px;font-weight: normal;}

.noscroll{overflow: hidden}

/************************************************************************
 HEADER
 ***********************************************************************/
/*.wrapper{justify-content: center}*/

header
{   display: flex;
    display: -webkit-flex;  /* added */
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    background: black;
    z-index: 1;
    top:0px;
}

header>div {padding: 10px 10px 10px 10px; }
@media only screen
and (orientation: portrait) {
    header.topbalk {
        padding: 15px 0px 0px 0px;
    }
}
.topbar             {font-size: 2.5vw; padding: 5px 0;}
/* .page                {order: 1; flex: 1 auto; text-align: left}
.timestamp            {order: 2; flex: 3 auto;}
.datestamp            {order: 3; flex: 1 auto; text-align: right}
*/
.col1                 { order: 1;
    flex: 4 auto;
    display: flex;
    display: -webkit-flex;  /* added */

    flex-direction: column;
    align-items: flex-start;
}
.col2                 { order: 2; flex: 0.5 auto;}

.col3                 { order: 3; flex: 1 auto;}


.stamp              {border: 1px solid white}
.stamp h1           {background: white; margin: 0; text-align: center; border: 0px solid black}
.stamp h2           {color: white; margin: 0; text-align: center;font-size:3.6vw; font-weight: 100; padding: 3px}
.logo               {color:white; float: left; font-size: 7vw; letter-spacing: 1px; line-height: 0.7; margin-bottom: 7px}

.info               { text-align: left ; color: white; font-size: 3.6vw; letter-spacing: 1px;}
.info2               { text-align: center ; color: white; font-size: 2vw}
.info span          {color: aqua}
/*.menu li            {float: left; padding: 1px 0}*/
.menu a             {color: #f10026; font-size: 2vw;}





/************************************************************************
 CONTENT
 ***********************************************************************/


main div.message:nth-child(even)                     {color: white}
main div.message:nth-child(odd)                      {color:yellow; }
main div.message:nth-child(even) a                   {color: white;
    text-decoration:underline}
main div.message:nth-child(odd) a                   {color:yellow;
    text-decoration:underline}

main div.mod                   {color:#00FFFF; }
main div.loop{
    color: #00FF00;
    text-decoration:underline;
    cursor: pointer;
}
main div.vip {
    background-color: darkgray;
    padding: 30px 0px 30px 15px;
}
main div.vip::before{
    content: "[VIP]";
}

.message                                { flex: 0 0 auto;
    font-size: 5vw;
    line-height: 0.75;
    margin: 10px 0 10px 0;
    text-align: left}

.message span::before                   {content: "<"}
.message span::after                    {content: "> "}
.message span a                         {cursor: pointer}

.infoList ul{
    display: flex;
    display: -webkit-flex;  /* added */
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    padding: 4px 5px 0px 5px;
    margin: 3px;


}
.infoList li{
    flex: 1 auto;
    justify-content: space-between;
    margin: 5px;
    color: white;


}
.infoList li a{
    display: block;
    padding: 5px 0px 5px 0px;
    font-size: 4vw;
    background-color: blue;
    color: white;
}

main div.nickPhoto:nth-child(even){
    color: white
}
main div.nickPhoto:nth-child(odd){
    color: yellow
}
.nickPhoto{
    width:1em;
    height:1em;
    border: solid 2px;
    transform: translate(-0.1em, 0.2em);
}

.photo{
    width:60vmin;
}


/************************************************************************
 FOOTER
 ***********************************************************************/


footer{
    width: 100%;
    z-index: 2;
    bottom: 0 !important;
    /*position:fixed;*/
    background: black;
    justify-content: center;
    display: block;
    margin-bottom: 0px;
}

footer ul{
    display: flex;
    display: -webkit-flex;  /* added */
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    padding: 4px 0px 0px 0px;
    margin: 0;
}
.footer li{flex: 1 auto}
.footer li a{
    display: block;
    padding: 5px 0px 15px 0px;
    font-size: 4vw;
}

.blur{
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    -ms-filter: blur(4px);
    -o-filter: blur(4px);
    filter: blur(4px);
}

.popup{
    display: none;
    position: absolute;
    top: 25vh;
    left: 25vw;
    padding:1em;
    background-color: black;
}

.ageCheck{
    width:70%;
    height:60%;
    margin-left:-18px;
    position:absolute;
    overflow: auto;
    top:20%;
    left:15%;
    padding:15px;
    text-align: center;

    background-color: black;
    border: 3px solid white ;

    font-family: 'Teletext';
    font-size:3vw;
    color:white;
}

.ageCheck div{
    padding:20px;
}

.button {
    display: inline;
    margin:10%;
    padding: 5px;
    background-color: grey;
    border: 10px solid grey;
}