/* font things */

            .vt323-regular {
              font-family: "VT323", monospace;
              font-weight: 400;
              font-style: normal;
            }
            
            /* BODY */
            body {
                font-family: "VT323", monospace;
                margin: 0;
                min-height: 100vh;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #08031A;
                background-repeat: no-repeat;
                background-attachment: fixed;
                background-size: 100% 100%;
                background-image: url("/images/background4compresscolour.png");
            }
            
            /* Layout things */

            * {
                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-1 {width: 16.66%;}
            .col-2 {width: 25%;}
            .col-3 {width: 30%;}
            .col-4 {width: 33.33%;}
            .col-5 {width: 40%;}
            .col-6 {width: 50%;}
            .col-7 {width: 60%;}
            .col-8 {width: 66.66%;}
            .col-9 {width: 75%;}
            .col-10 {width: 83.33%;}
            .col-11 {width: 91.66%;}
            .col-12 {width: 100%;}
            .col-13 {width: 70%;}
            
            
            .inline-flex {
              display:inline-flex;
            }


          
           #container {
               max-width: 1000px;
               color: #565656;
               font-size: 18px; 
               margin: 0 auto;
               padding: 10px;
          }

            #header {
                margin-bottom: 10px;
                background-color: #acb2cc; 
            }


            #flex {
                display: flex;
                color: #565656;
                font-size: 20px;
            }

            /*  All the little divs with macos frames */
            
            .dialogue {
                background-color: white;
                padding: 5px;
                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");
            }
            
            .player {
                background-color: white;
                padding: 5px;
                margin: 5px;
                border: solid;
                border-width: 25px 10px 25px 10px;
                border-image-slice: 22 7 23 6;
                border-image-width: 25px 10px 25px 10px;
                border-image-outset:0px 0px 0px 0px;
                border-image-repeat:stretch repeat;
                border-image-source: url("/images/macos80%20player.png");
            }    
            
            .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");
            }
            
            
            /*regular little boxes*/
            
            .plainbox {
              border-style: inset;
              border-color: #565656;
              border-width: 2px;
              background-color: white;
              padding: 5px;
            }
            
            .inversebox {
            background-color: #cecece;
            border-width: 2px;
            border-color: #565656;
            border-style: inset;
            }
            /* this one is used on readings submission section */
            .extrabox {
                background-color: #efefef;
                padding:5px;
                border: 1px solid #565656;
                position: relative;
                text-align: left;
                margin-top: 5px;
                margin-bottom: 5px;
                line-height:1.5;
            }
            /* Banner with button gif */
          .bannerbox {
            background-color: #cecece;
            border-width: 2px;
            border-color: #565656;
            color: #333333;
            position: relative;
            width: 100%;
            height: 31px;
            border-style: outset;
            padding:5px;
             }
             
             /*position for Dream button */
            .toot {
              position:absolute;
              right: -2px;
              top: -2px;
              width: 88px;
            }

            
            /* MODALS MODALS */
                        button:hover {
                          opacity: 0.8;
                        }
                        
                        /* Extra styles for the cancel button */
                        .cancelbtn {
                          width: auto;
                          padding: 10px 18px;
                          background-color: #f44336;
                        }
                        
                        /* Center the image and position the close button */
                        .imgcontainer {
                          text-align: center;
                          margin: 0;
                          position: relative;
                        }
                        
                        .container {
                          padding: 16px;
                        }
                        
                        
                        /* The Modal (background) */
                        .modal {
                          display: none; /* Hidden by default */
                          position: fixed; /* Stay in place */
                          z-index: 1; /* Sit on top */
                          left: 0;
                          top: 0;
                          width: 100%; /* Full width */
                          height: 100%; /* Full height */
                          overflow: auto; /* Enable scroll if needed */
                          background-color: rgb(0,0,0); /* Fallback color */
                          background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
                          padding-top: 60px;
                        }
                        
                        /* Modal Content/Box */
                        .modal-content {
                          background-color: #fefefe;
                          box-sizing: border-box;
                          margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
                          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");
                          width: 40%; /* Could be more or less, depending on screen size */
                        }
                        
                        /* The Close Button (x) */
                        .close {
                          position: absolute;
                          right: -15px;
                          top: -48px;
                          color: #000;
                          font-size: 35px;
                          font-weight: bold;
                        }
                          .capcha {
                           display: table;
                           margin-left: auto;
                           margin-right: auto;
                           text-align: center;
                           border:1px solid #565656;
                           width: 80%;
                           padding: 0px;
                              }
                              
                          .hc {
                           display: inline-block;
                           margin-left: 0px;
                           margin-right: 0px;
                           text-align: center;
                           width: 50%;
                           height: auto;
                           float: left;
                          }
                          
                        .close:hover,
                        .close:focus {
                          color: red;
                          cursor: pointer;
                        }
                        
                        /* Add Zoom Animation */
                        .animate {
                          -webkit-animation: animatezoom 0.6s;
                          animation: animatezoom 0.6s
                        }
                        
                        @-webkit-keyframes animatezoom {
                          from {-webkit-transform: scale(0)} 
                          to {-webkit-transform: scale(1)}
                        }
                          
                        @keyframes animatezoom {
                          from {transform: scale(0)} 
                          to {transform: scale(1)}
                        }

            
            /* Little Closeable box */
            .notification {
                position: relative;
                background-color: white;
                padding:5px;
                border: 2px solid #cecece;
            }
            
            .closebtn {
                position: absolute;
                right: 3px;
                top: 0;
                color: #888;
                font-size: 25px;
                font-weight: bold;
                        }
                        
            .closebtn:hover {
               color: #000;
               }
               
             /*table styles here*/
               
              th {
                background-color: #dddddd;
                border-style: outset;
              }
              
              td {
                border-style: inset;
                background-color: white;
              }
              
             /*Table for posts*/
              
              #posts {
                border-collapse: collapse;
                width: 100%;
                font-size: 14px;
              }
              
              #posts td, #posts th {
                border: 1px solid #ddd;
                padding: 8px;
              }
              
              #posts td:nth-child(2){
                background-color: #f2f2f2;
                }
                
              #posts td:nth-child(1){
                background-color: #dddddd;
                text-align: center;
                }
                
                #posts th:nth-child(1){
                background-color: #dddddd;
                text-align: center;
                }
              
              #posts tr:hover {
                background-color: #ddd;
                }
              
              #posts th {
                padding-top: 12px;
                padding-bottom: 12px;
                text-align: left;
                background-color: #dddddd;
              }
            
            /*extra styles*/


          .responsive {
               width: 100%;
               height: auto;
           }
           
           .buttonss {
           display: block;
           margin-left: auto;
           margin-right: auto;
           text-align: center;
              }
           
           .center {
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 80%;
            }
            
            .hidden {
            margin-left: auto;
            margin-right: auto;
            display: none;
            }
            
            .nothidden {
            display: block;
            margin-left: auto;
            margin-right: auto;
            }
            
             .clearfix::after {
              content: "";
              clear: both;
              display: table;
              } 
              
              .ml {
              margin-left: 5px;
            }
              

            /* MEDIA QUERY FOR PHONE VIEW*/


            @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%;
            }
            
            .modal-content {
              width: 80%;
            }
            
            .extrabox {
                 font-size: 14px;
                }

            }