@font-face{font-family:'VT323';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/VT323.ttf') format('truetype')}
body{
                font-family: "VT323", monospace;
                margin: 0;
                background-color: #08031A;
                background-repeat: no-repeat;
                background-attachment: fixed; 
                background-size: 100% 100%;
                background-image: url("/assets/yearner-dream-background.webp");
            }
*{
                box-sizing: border-box;
            }
.row{
              display: table;
               border: solid;
               padding: 5px;
               border-width: 94px 10px 36px 10px;
                border-image-slice: 94 14 36 10;
                border-image-width: 94px 10px 36px 10px;
                border-image-outset:0px 0px 0px 0px;
                border-image-repeat:stretch repeat;
                border-image-source: url("/images/bigwindowmacosmail.png");
                background-color: #efefef;
            }
.row::after{
              content: "";
              clear: both;
              display: table;
            }
[class*="col-"]{
              float: left;
              padding: 5px;
            }
.col-5{width: 40%;}
.col-6{width: 50%;}
.col-7{width: 60%;}
.inline-flex{
              display:inline-flex;
            }
#container{
               max-width: 1000px;
               color: #565656;
               font-size: 18px; 
               margin: 0 auto;
               padding: 10px;
          }
.player2{
                background-color: #efefef;
                padding: 0px;
                border: solid;
                border-width: 23px 6px 22px 7px;
                border-image-slice: 46 12 44 14;
                border-image-width: 23px 6px 22px 7px;
                border-image-outset:0px 0px 0px 0px;
                border-image-repeat:stretch stretch;
                border-image-source: url("/images/macplayerframe2.png");
            }
.pdialogue{
                background-color: white;
                padding: 5px;
                border: solid;
                border-width: 40px 15px 15px 15px;
                border-image-slice: 80 37 34 37;
                border-image-width: 40px 15px 15px 15px;
                border-image-outset:0px 0px 0px 0px;
                border-image-repeat:round round;
                border-image-source: url("/images/mac%20window%20have%20u.png");
            }
.plainbox{
              border-style: inset;
              border-color: #565656;
              border-width: 2px;
              background-color: white;
              padding: 5px;
            }
.bannerbox{
            background-color: #cecece;
            border-width: 2px;
            border-color: #565656;
            color: #333333;
            position: relative;
            width: 100%;
            height: 31px;
            border-style: outset;
            padding:5px;
             }
.buttonss{
           display: block;
           margin-left: auto;
           margin-right: auto;
           text-align: center;
              }
.ml{
              margin-left: 5px;
            }
@media only screen and (max-width: 800px){[class*="col-"]{
                    width: 100%;
                  }
#container{
                  padding: 10px;
                }
.row{
                border: solid;
                border-width: 40px 10px 40px 10px;
                border-image-slice: 82 20 94 14;
                border-image-width: 40px 10px 40px 10px;
                border-image-outset:0px 0px 0px 0px;
                border-image-repeat:stretch repeat;
                border-image-source: url("/images/mac%20window%20options.png");
                background-color: #efefef;
                width: 100%;
            }
.inline-flex{
              display:block;
            }
.ml{
              margin-left: 0px;
              margin-top: 5px;
            }
.buttonss{
              width: 100%;
            }
}

.col-7{width:70%;padding:30px}