/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

    /**  YOURSPACE PAGE - made by Nyar @ https://fear.garden  **/
 
            /** general **/
            body, html {
                margin: 0;
                padding: 0;
            }
            body {
                background: black;
                color: #000;
            }
            body, table {font: 14px sans-serif;}
            a {color: #3f1117;}
            h1, h2, h3 {background: #090909;}
            h1, h2, h3, th {
                box-sizing: border-box;
                color: #000;
                margin: 0;
                padding: 2px 4px;
            }
            h1, h2 {
                font-size: 16px;
                color: white;
                width: 100%;
            }
            h3 {
                display: inline-block;
                font-size: 15px;
                color: white;
                margin: 2px 3px; 
                padding: 2px 4px;
            }
            img, iframe {max-width: 100%;}
            table {width: 100%;}
            th {
                background: #353535;
                color: white;
                text-align: left;
                width: auto;
            }
 
            /** class **/
            .box {
                background-image: url('https://i.pinimg.com/736x/64/04/5d/64045d6bcf9769c8a89f62eb4b99deb0.jpg');
                border: #353535 2px solid;
                margin: 10px 0;
                padding: 3px;
            }
            .center {text-align: center;}
            .container, .footer, .header {
                background:BLACK;
                box-sizing: border-box;
                border-left: #982827 2px solid;
                border-right: #982827 2px solid;
                margin: 0 auto;
                width: 850px;
            }
            .container {
                height: 100%;
                padding: 0 1em 1em;
            }
            .columns {
                display: grid;
                grid-column-gap: 1em;
                grid-template-columns: 292px auto;
                width: 100%;
            }
            .curve {border-radius: 7px;}
            .footer, .header {
                background: #000;
                box-sizing: border-box;
                font-family: monospace;
                color: white;
            }
            .footer {
                border-top: #902827 2px solid;
                padding: 10px 30px 10px;
            }
            .header {
                border-bottom: #490206 2px solid;
                padding: 0 30px 10px;
            }
            .header span {
                padding: 0 15px;
            }
            .header .title {
                color: red;
                font-size: 200% ;
                font-family: fantasy;
                text-align: left;
                text-decoration: none;
            }
            .profimg {
                float: left;
                padding: 5px 5px 0 0;
            }
 
            /** id **/
            #contact a {
                font-weight: bold;
                text-decoration: none;
            }
            #contact a::before {
                content: url('https://placehold.co/16');
                padding: 0 1em 0 0;
            }
            #interests td, #details td {width: 70%;}
            #url span {font: 12px monospace;}
 
            /** Small screens **/
            @media (max-width: 865px) {
                .container, .navbar, .footer, .header {width: 100%;}
                .columns {grid-template-columns: 100%;}
                .box {margin: 1em 0;}
                .box:last-child {margin: 0;};
            }