@font-face {
    font-family: "Transrobotics";
    src: url("https://files.catbox.moe/ms9ddb.ttf");
    }
    
            body {
                margin: 0;
     width: 1068px;
            margin-left:auto;
            margin-right:auto;
            image-rendering:pixelated;
    
            }

            
                 html {
    background-image:url(https://roboticoperatingbuddy.neocities.org/bgs/bg.png);
            }
    
            header {
                background-color: #333;
                color: white;
                padding: 1px;
                text-align: center;
    border: 1px solid black;
    border-bottom:none;
    background:url(https://roboticoperatingbuddy.neocities.org/bgs/nameeee.png);
    background-size:103%;
    height:143px;
    overflow:hidden;
           z-index: 1000;
        position: relative;
        border-radius: 50px 50px 0px 0px;
    box-shadow:0px 0px 5px rgba(0,0,0,0.7);
            }
    
            .container {
                display: flex;
            }
    
            .sidebar {
                padding: 10px;
    border-right:none;
    text-align:center;
    padding-top: 0px;
            z-index: 1000;
            background: rgb(70,67,62);
            background-color: #46433E;
    opacity: 1;
    background-image:  linear-gradient(#21201C 0.7px, transparent 0.7px), linear-gradient(to right, #21201C 0.7px, #46433E 0.7px);
    background-size: 14px 14px;
    border:1px solid black;
            }
    
            .main-content {
                flex-grow: 1;
                padding: 20px;
    border:1px solid #757575;
    width:490px;
    background:#F1EEE9;
            z-index: 1000;
    background:white;
            }
    
    

    
            .rightsidebar {
                background-color: #f0f0f0;
                padding: 10px;
    border:1px solid #7b7b7b;
    box-shadow: inset 0px 0px 5px #7b7b7b;
    border-left:none;
    text-align:center;
    padding-top: 0px;background-color: #F1EEE9;
    opacity: 1;
    background: linear-gradient(180deg, #f2f2f2 0%, #e3e3e3 100%);
            z-index: 1000;
    background-color: #dddddd;
    opacity: 1;
    background-image:  repeating-linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%, #cccccc), repeating-linear-gradient(45deg, #cccccc 25%, #dddddd 25%, #dddddd 75%, #cccccc 75%, #cccccc);
    background-position: 0 0, 11px 11px;
    background-size: 22px 22px;    background-position: 0 0, 10px 10px;
        background-size: 20px 20px;
            }
    
    p {
     font-family: "MS UI Gothic", Tahoma;
         text-align: justify;
      text-justify: inter-word;
    }
    
    
    .scrollbox p {
     font-family: "MS UI Gothic", Tahoma;
    font-size: 12px;
        line-height: 12px; 
         text-align: justify;
      text-justify: inter-word;
      margin-top:2px;
    }
    
    h2 {
     font-family: Trebuchet MS;
    font-size: 17px;
        line-height: 2px; 
        font-family: "transrobotics", sans-serif;
        color: white;
        font-weight: lighter;
        filter: drop-shadow(1px 1px 0 grey) drop-shadow(-1px 1px 0 grey) drop-shadow(0 -1px 0 grey) drop-shadow(1px 0 grey);
        text-shadow: 2px 1px 0px rgba(0,0,0,0.5);
    }
    
    h3 {
     font-family: Trebuchet MS;
    font-size: 13px;
        line-height: 2px; 
        font-family: "transrobotics", sans-serif;
        color: white;
        font-weight: lighter;
        filter: drop-shadow(1px 1px 0 grey) drop-shadow(-1px 1px 0 grey) drop-shadow(0 -1px 0 grey) drop-shadow(1px 0 grey);
        text-shadow: 2px 1px 0px rgba(0,0,0,0.5);
    }
    h4 {
     font-family: Trebuchet MS;
    font-size: 10px;
        line-height: 2px; 
        font-family: "transrobotics", sans-serif;
        color: white;
        font-weight: lighter;
        filter: drop-shadow(1px 1px 0 grey) drop-shadow(-1px 1px 0 grey) drop-shadow(0 -1px 0 grey) drop-shadow(1px 0 grey);
        text-shadow: 2px 1px 0px rgba(0,0,0,0.5);
    }
    
    
    
    .blackshad {
        filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black);
        text-shadow: 2px 1px 0px rgba(0,0,0,0.5);
    }
    .blueshad {
        filter: drop-shadow(1px 1px 0 #0e1d41) drop-shadow(-1px 1px 0 #0e1d41) drop-shadow(0 -1px 0 #0e1d41) drop-shadow(1px 0 #0e1d41);
    
    }
    
    
    .navbit {
        box-shadow: inset 0px 1px 0px 0px #ffffff;
    background: rgb(47,99,147);
    background: linear-gradient(0deg, rgba(183,183,183,0.7) 0%, rgba(207,207,207,0.7) 100%);
        border-radius: 3px;
        border: 1px solid black;  
        font-size: 10px;
        font-weight: bold;
        padding: 3px;
        text-decoration: none;
        margin-bottom: 5px;
        text-align:center;
    box-shadow:0px 0px 0px grey;
        font-family: "transrobotics", sans-serif;
    
    
    }
    
    
    .myButton {
        box-shadow: inset 0px 1px 0px 0px #ffffff;
    background: linear-gradient(180deg, rgba(70,67,62,1) 0%, rgba(32,30,27,1) 100%);
        background-color: #f9f9f9;
        border-radius: 6px;
        border: 1px solid black;
        display: inline-block;
        cursor: pointer;
        color: #F1EEE9;
        font-family: Trebuchet MS;
        font-size: 11px;
        font-weight: bold;
        padding: 3px;
        text-decoration: none;
        text-shadow: 0px 1px 0px black;
        margin-bottom: 5px;
        width:137px;
        text-align:center;
    box-shadow:-1px 1px 0px #4e4949;
    
        
    }
    .myButton:hover {
        background: linear-gradient(0deg, rgba(70,67,62,1) 0%, rgba(32,30,27,1) 100%);
    box-shadow:-2px 2px 0px #4e4949;
    letter-spacing:0.3px;
    }
    .myButton:active {
        position:relative;
        top:1px;
    }
    
    
    
    
    .box {
                border:2px solid black;
                background: rgb(33,32,28);
    background: linear-gradient(0deg, rgba(33,32,28,1) 0%, rgba(0,0,0,1) 100%);
                padding:10px;
                margin:auto;
                border-radius:3px;
                text-align:center;
            }
    
    
    .scrollbox {
        background: linear-gradient(0deg, rgba(218,218,218,1) 0%, rgba(255,255,255,1) 38%);
        box-shadow: 2px 2px 5px -4px rgba(0,0,0,0.72), inset 0 0 1px 2px #ffffff;
        border: #949494 solid 1px;
        box-sizing: border-box;
        border-radius: 4px;
        font-size: 11px;
        margin: 0 auto;
        overflow-y: scroll;
       height: 318px;
        padding: 5px;
        color:grey;
         font-family: "MS UI Gothic", Tahoma;
        line-height: 10px; 
    }
    
    .graphic_details_widget textarea.code {
        height: 20px;
        width:10px;
        max-width:20px;
        box-sizing: border-box;
        border: 1px solid #ccc;
        box-shadow: inset 0 0 3px #99a;
        padding: 10px;
        margin:auto;
        font-size:10px;
    }
    
    textarea {
        max-height: 30px;
        max-width: 120px;
        box-sizing: border-box;
        border: 1px solid grey;
        padding: 10px;
        margin: auto;
        font-size: 10px;
    }
    
    
    .feature{
        background: linear-gradient(180deg, rgba(70, 67, 62, 1) 0%, rgba(32, 30, 27, 1) 100%);
        border: #000000 solid 1px;
        box-sizing: border-box;
        border-radius: 4px;
        padding: 5px;
        color: grey;
        font-family: "MS UI Gothic", Tahoma;
        text-align: center;
        transition: .3s;
        box-shadow: 2px 2px 1px #afafaf8c, inset 0 0 1px 1px #6b6b6b;
        margin:5px;
    }
    
    .feature:hover{
     transition: .3s;
        transform: scale(1.001) scaleX(1.02);
    }
    
    .blog {
        border: solid 1px #787878;
        overflow: auto;
        box-shadow: 0px 0px 3px grey;
        padding: 5px;
        border-radius: 2px;
        background-image:url(https://roboticoperatingbuddy.neocities.org/bgs/dsbg.jpg);
        box-shadow: 2px 2px 1px #afafaf8c, inset 0 0 1px 1px #ffffff;
    }
    
    #blog2 {
        border: solid 1px black;
        background-image: url(https://roboticoperatingbuddy.neocities.org/bgs/dsbg3.png);
        overflow: auto;
        box-shadow: inset 0px 0px 3px black;
        padding: 7px;
        border-radius: 4px;
        text-align: center;
    }
    
    
    
    
    .about{  
       background: linear-gradient(180deg, rgba(70, 67, 62, 1) 0%, rgba(32, 30, 27, 1) 100%);
  box-shadow: 2px 2px 5px -4px rgba(0, 0, 0, 0.72);
  border: black solid 1px;
  box-sizing: border-box;
  border-radius: 4px;
  font-size: 11px;
  margin: 0 auto;
  overflow-y: scroll;
  height: 194px;
  padding: 5px;
  color: #F1EEE9;
  font-family: "MS UI Gothic", Tahoma;
  line-height: 14px;
  box-shadow: 0 2px 1px #afafaf8c, inset 0 0 1px 1px #838383;
    
    }
    
    .title {
    background: linear-gradient(0deg, rgba(183,183,183,1) 0%, rgba(207,207,207,1) 100%);
    border-radius:2px;
    color:white;
    padding:1px;
    text-align:center;
    border:1px solid #777777;
    border-radius: 10px 10px 0px 0px;
    box-shadow: 0 2px 1px #afafaf8c, inset 0 0 1px 1px #f3f3f3;
    }
    
    h1 {
    text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000;
    }
    
    
    
    
               #scroll {
        width: 334px;
        height: 250px;
        font-size: 2em;
        overflow-y: scroll;
        float: left;
        background-image: url("https://zanarkand.neocities.org/backgrounds/red1.jpg");
        border: 5px groove rgb(153, 153, 153);
        background-color: rgb(255, 255, 255);
      }
    
      ::-webkit-scrollbar {
        width: 16px;
        height: 10px;
      }
    
      ::-webkit-scrollbar-thumb {
        background-color: #fff;
        background-image: url(https://i.imgur.com/Qtm9Z60.png);
        border-top: 1px solid #bdbdbd;
        border-left: 1px solid #bdbdbd;
        border-right: 1px solid black;
        border-bottom: 1px solid black;
      }
    
      ::-webkit-scrollbar-track {
        background-color: #fff;
        background-image: url(https://i.imgur.com/IGXGYKz.png);
      }
    
      ::-webkit-scrollbar-button:vertical:increment {
        background-image: url(https://i.imgur.com/WhC8iy3.png);
        width: 14px;
        height: 16px;
        border-top: 1px solid #bdbdbd;
        border-left: 1px solid #bdbdbd;
        border-right: 1px solid black;
        border-bottom: 1px solid black;
      }
    
      ::-webkit-scrollbar-button:vertical:decrement {
        background-image: url(https://i.imgur.com/fQ18mrR.png);
        border-top: 1px solid #bdbdbd;
        border-left: 1px solid #bdbdbd;
        border-right: 1px solid black;
        border-bottom: 1px solid black;
        width: 14px;
        height: 16px;
      }
      
      ::selection {
    color: white;
    background: rgb(150,150,150);
    }   
    
    a {
    transition:.3s;
    }  
    
    p a:hover {
    box-shadow: inset 0 50px 0 0 #bbb;
    color:white;
    text-decoration:none;
    transition:.3s;
    letter-spacing:0.3px;
    }  
    
    #inner2 a:hover, .about a:hover {
    box-shadow: inset 0 50px 0 0 #3653a9;
    color:white;
    text-decoration:none;
    transition:.3s;
    letter-spacing:0.3px;
    }  
    
        #musicplayer {
            background: linear-gradient(180deg, rgba(70, 67, 62, 1) 0%, rgba(32, 30, 27, 1) 100%);
            border: #000000 solid 1px;
            width: 150px;
            border-radius: 3px;
            margin-top: 10px;
            box-shadow: 2px 2px 5px -4px rgba(0, 0, 0, 0.72);
            
        }
    
        .songtitle {
            padding: 5px;
            border-bottom: 1px solid grey;
            display: block;
            font-family: "MS UI Gothic", Tahoma;
            font-size: 11px;
            color: #e3e3e3;
            font-weight: bold;
        }
    
        .controls {
            font-size: 12px !important;
            background-color: rgba(0, 0, 0, 0);
            text-align: center;
            width: 100%;
        }
    
        .controls td {
            padding: 8px 5px 0px 5px;
        }
    
        .seeking {
            background-color: rgba(0, 0, 0, 0);
            display: flex;
            justify-content: space-evenly;
            padding: 5px;
            color: #e3e3e3;
            font-size: 9px;
        }
    
        .current-time {
            padding-right: 5px;
        }
    
        .total-duration {
            padding-left: 5px;
        }
    
        i.fas:hover {
            cursor: help;
        }
    
        i.fas.fa-pause,
        i.fas.fa-play,
        i.fas.fa-forward,
        i.fas.fa-backward {
            color: #e3e3e3;
        }
    
        input[type=range] {
            -webkit-appearance: none;
            width: 100%;
            background-color: rgba(0, 0, 0, 0);
        }
    
        input[type=range]:focus {
            outline: none;
        }
    
        input[type=range]::-webkit-slider-runnable-track {
            width: 100%;
            height: 2px;
            cursor: help;
            background: #e3e3e3;
        }
    
        input[type=range]::-webkit-slider-thumb {
            height: 10px;
            width: 10px;
            border-radius: 5px;
            background: #e3e3e3;
            cursor: help;
            -webkit-appearance: none;
            margin-top: -4.5px;
        }
    
        input[type=range]::-moz-range-track {
            width: 100%;
            height: 2px;
            cursor: help;
            background: #e3e3e3;
        }
    
        input[type=range]::-moz-range-thumb {
            height: 10px;
            width: 10px;
            border-radius: 5px;
            background: #e3e3e3;
            cursor: help;
            border: none;
        }
    
        .fa, .fas {
            font-weight: 900;
        }
    
        .fa, .far, .fas {
            font-family: "Font Awesome 5 Free";
        }
    
        .fa, .fab, .fad, .fal, .far, .fas {
            -moz-osx-font-smoothing: grayscale;
            -webkit-font-smoothing: antialiased;
            display: inline-block;
            font-style: normal;
            font-variant: normal;
            text-rendering: auto;
            line-height: 1;
        }
    
        .pause {
            width: 5px;
            height: 5px;
            border-style: solid;
            border-width: 37px;
            border-color: #e3e3e3;
            border-style: double;
            border-width: 0px 37px 0px 37px;
        }
    
        .album-art {
            text-align: center;
            margin-top: 10px;
        }
    
        #album-art {
            width: 100px;
            height: 100px;
            border-radius: 5px;
            margin-bottom: 10px;
        }
        
        #musicplayer {
            display:flex;
        align-items: center;
        background: linear-gradient(180deg, rgba(70, 67, 62, 1) 0%, rgba(32, 30, 27, 1) 100%);
        border: #000000 solid 1px;
        border-radius: 3px;
        margin-top: 10px;
        padding: 5px;
        box-shadow: 0 2px 1px #afafaf8c, inset 0 0 1px 1px #838383;
    }
    
    .album-art {
        margin-right: 10px;
    }
    
    #album-art {
        width: 50px;
        height: 50px;
        border-radius: 5px;
    }
    
    .song-info {
        display: flex;
        flex-direction: column;
        flex: 1;
    }
    
    #marquee1 img {
        width:75px;
        height:28px;
        margin-top:3px;
    }
    #marquee2 img {
        width:89px;
        margin-top:3px;
    }
    
    footer {
        background-color: #333;
        color: grey;
        padding: 10px;
        text-align: left;
        background: linear-gradient(180deg, rgba(204,204,204,1) 0%, rgba(237,237,237,1) 19%, rgba(204,204,204,1) 40%, rgba(224,224,224,1) 100%);
        border: solid 1px grey;
            z-index: 1;
    
    box-shadow:0px 0px 5px rgba(0,0,0,0.5);
    
    }
    
    .sidething {
        background-color: #333;
        color: grey;
        padding: 10px;
        text-align: left;
        background: linear-gradient(180deg, rgba(204,204,204,1) 0%, rgba(237,237,237,1) 19%, rgba(204,204,204,1) 40%, rgba(224,224,224,1) 100%);
        border: solid 1px grey;
            z-index: 1;
    
    box-shadow:0px 0px 5px rgba(0,0,0,0.5);
    
    }
        
    
    
    .left {
    background: url(https://file.garden/ZDrtGB-J4RNQd5ky/neocitieseng/floating%20img/right) no-repeat;
        background-size: 100%!important;
        position: fixed;
        left: 0px;
        top: 170px;
        height: 800px;
        width: 200px;
        z-index: -3;
        opacity: 100;
        filter: saturate(0) drop-shadow(-2px -1px 1px rgba(0,0,0,0.5));
    }
    
    
    .right {
    background: url(https://file.garden/ZDrtGB-J4RNQd5ky/neocitieseng/floating%20img/left) no-repeat;
        background-size: 100%!important;
        position: fixed;
        right: -40px;
        top: 0px;
        height: 800px;
        width: 200px;
        z-index: -3;
        opacity: 100;
        filter: saturate(0) drop-shadow(2px 1px 1px rgba(0,0,0,0.5));
    }
    
    
    .footer {
    color: grey;
        text-align: center;
        background: linear-gradient(180deg, rgba(204, 204, 204, 1) 0%, rgba(237, 237, 237, 1) 19%, rgba(204, 204, 204, 1) 40%, rgba(224, 224, 224, 1) 100%);
        border: solid 1px grey;
        border-radius: 0px 0px 10px 0px;
        font-size: 11px;
        font-family: "MS UI Gothic", Tahoma;
        padding: 6px;
        box-shadow: 0px 0px 3px grey;
    }
    
    
    #statuscafe {
        padding: .5em;
        background-color: white;
        border: 1px solid grey;
    border-radius:3px;
    }
    #statuscafe-username {
        margin-bottom: .5em;
    }
    #statuscafe-content {
        margin: 0 1em 0.5em 1em;
    }
    
    
    .inner {
        background: linear-gradient(0deg, rgba(218, 218, 218, 1) 0%, rgba(255, 255, 255, 1) 38%);
        color: #767676;
        padding: 5px;
        text-align: center;
        border: 1px solid #b5b5b5;
        border-radius: 3px;
        box-shadow: inset 0px 0px 3px rgb(185 185 185), inset 0 0 1px 2px #ffffff;
        font-size: 12px;
        line-height: 1.2;
    }
    
    
    #inner2 {
        background: linear-gradient(180deg, rgba(70,67,62,1) 0%, rgba(32,30,27,1) 100%);
        color: white;
        padding: 5px;
        text-align: center;
        border: 1px solid black;
        border-radius: 3px;
        box-shadow: inset 0px 0px 5px rgb(33, 33, 33), inset 0 0 1px 1px #252525;
        height: 202px;
        overflow-y:scroll;
    }
    #inner2 a {
        filter: drop-shadow(1px 1px 0 black);
        color: grey;
        font-weight: bolder;
    }
    
    .about a {
    color:#3c6dff;
    }
    
    
    .song {
    background:transparent;}
    
    .song img {
    width:47px;
      transition:.3s;
      filter:saturate(0.8);}
    
    
    .song img:hover {
      transform: scale(1.2); 
      transition:.3s;
    }
    
    
    a img:hover {
    transform:rotate(2deg) scale(1.05);
    transition:.3s;
    }
     a img {
    transition:.3s;
    }
    
    #featured{
    transition:.3s;
    border-radius:3px;
    border:1px solid black;}
    
    #featured:hover{
     transition: .3s;
        transform: scale(1.01);
    }
    
    
    
    .lastart {
    background: url(https://roboticoperatingbuddy.neocities.org//bgs/dibujo.png);
    box-shadow: inset 0px 0px 6px rgb(163, 163, 163);
    padding: 5px;
    padding: 10px;
    background-size: 131%;
  background-position: -20px -8px;
        background-repeat: no-repeat;
        height: 229px;
        border-radius: 5px;
        margin: 2px;
        font-size: 12px;
        color: #515050;
        border: 1px solid #939292;
        width: 300px;
    }

    .lastart p{
        filter: drop-shadow(1px 0px 0 white) drop-shadow(-1px 1px 0 white) drop-shadow(0 -1px 0 white) drop-shadow(1px 0 white) drop-shadow(0px 1px 0 grey);
    }

.artin{
width:150px;
overflow:hidden;}
    
    #cbox{
    border-radius:3px;
    box-shadow:0px 0px 3px rgba(0,0,0,0.3);
     border: #949494 solid 1px;
    background: white;}
    
    
    
    .scrollcbox{
    background-color: #f7f7f7;
    opacity: 0.8;
    background-image:  linear-gradient(#cfcfcf 0.9px, transparent 0.9px), linear-gradient(to right, #cfcfcf 0.9px, #f7f7f7 0.9px);
    background-size: 18px 18px;
    overflow:hidden;
        border: #949494 solid 1px;
        box-sizing: border-box;
        border-radius: 4px;
        font-size: 11px;
        margin-right: 5px;
        padding: 5px;
        color:grey;
         font-family: "MS UI Gothic", Tahoma;
        line-height: 10px; 
        box-shadow: 2px 2px 1px #afafaf8c, inset 0 0 1px 1px #f3f3f3;
    }

.marq{
    background: linear-gradient(0deg, rgba(183,183,183,1) 0%, rgba(207,207,207,1) 100%);
z-index:1000;
border:2px solid grey;
border-bottom:1px solid grey;
box-shadow: 0 2px 1px #afafaf8c, inset 0 0 1px 1px #f3f3f3;
font-family: "MS UI Gothic", Tahoma;
color:white;
font-weight:bolder;
font-size:11px;
padding:2px;
}

.marq marquee{
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 0 0;
}

.todo{
    background-image: url(https://roboticoperatingbuddy.neocities.org/bgs/paper.png);
    background-size: 200%;
    height: 112px;
    padding: 10px;
    border: 1px solid #000000;
    border-radius: 3px;
    font-size: 12px;
    font-family: "MS UI Gothic", Tahoma;
    color: grey;
    text-align: left;
    box-shadow: 1px 2px 0px rgb(0 0 0);
    line-height: 1;
}

.todo:hover{
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-animation: swinging 2s cubic-bezier(0.25, 0.25, 0.25, 0.5) forwards;
    animation: swinging 2s cubic-bezier(0.25, 0.25, 0.25, 0.5) forwards;
}
.todo2{
    background-color: #eeeeee;
    opacity: 1;
    background-size: 10px 10px;
    background-image: repeating-linear-gradient(45deg, #e3e3e3 0, #e3e3e3 1px, #eeeeee 0, #eeeeee 50%);
    height: 250px;
    padding: 10px;
    border: 1px solid #525252;
    border-radius: 3px;
    font-size: 12px;
    font-family: "MS UI Gothic", Tahoma;
    color: grey;
    text-align: center;
    box-shadow: 1px 2px 0px rgb(96, 96, 96);
}


.todo2 img{
    width: 128px;
    border: 1px solid #363636;
    border-radius: 3px;
}

.todo2 img:hover{
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-animation: swinging 2s cubic-bezier(0.25, 0.25, 0.25, 0.5) forwards;
    animation: swinging 2s cubic-bezier(0.25, 0.25, 0.25, 0.5) forwards;
}

.todo2 a{
    font-size:10px;
    color:grey;
    transition:.3s;
}

.todo2 a:hover{
    letter-spacing:0.3px;

}

@keyframes swinging {
    0% {
      transform: rotate(0deg);
    }
    25% {
      transform: rotate(3deg);
    }
    75% {
      transform: rotate(-1deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }
  


#guestb{
    width: 285px;
    border: 1px solid rgb(101, 101, 101);
    image-rendering: pixelated;
    border-radius: 5px;
    box-shadow: 1px 1px 0px grey;
}

#guestb:hover{
    box-shadow: 3px 3px 0px grey;
}

ul{
    padding-inline-start: 20px;
}

#shrinebut{
    image-rendering: pixelated;
    margin: 5px;
    display: flex;
    justify-content: space-evenly;
}

#shrinebut a img{
    transition:.3s;
}
#shrinebut a img:hover{
    transform: scale(1.1);
    translate: 0px -4px;
    box-shadow: 0px 2px #3f3f3f;}

.parent {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    }


    
    .div1 { grid-area: 1 / 1 / 2 / 2; }
    .div2 { grid-area: 1 / 2 / 2 / 3; }

    
.contact {
    border: solid 1px #b39555;
    padding: 5px;
    border-radius: 2px;
    background: rgb(244, 229, 157);
    background: linear-gradient(180deg, rgba(244, 229, 157, 1) 0%, rgba(243, 227, 144, 1) 100%);
    box-shadow: 2px 2px 1px #afafaf8c, inset 0 0 1px 1px #ffffff;
    overflow-y: hidden;
    height: 98px;
    margin: 5px;
    text-align: center;
    color: #706b5d;
}

.contact a {
color:#706b5d;
text-decoration:none;
font-weight:bolder;}

.contitle{
    padding: 2px;
    background: rgb(122, 177, 198);
    background: linear-gradient(180deg, rgba(122, 177, 198, 1) 0%, rgba(84, 123, 136, 1) 100%);
    border-radius: 10px;
    box-shadow: 0px 2px 0px #3a5c65;
    filter: drop-shadow(0px 0px 1px grey);
    margin: 0px;
}

.contitle h2{
filter: drop-shadow(1px 1px 0 #3a5c65) drop-shadow(-1px 1px 0 #3a5c65) drop-shadow(0 -1px 0 #3a5c65) drop-shadow(1px 0 #3a5c65);
text-shadow:none;
font-size: 13px;
}

.conbutton{
    background: rgb(254, 253, 240);
    background: linear-gradient(180deg, rgba(254, 253, 240, 1) 0%, rgba(205, 200, 180, 1) 81%);
    padding: 1px;
    margin: 5px;
    border-radius: 15px;
    box-shadow: 0px 2px 0px #978b62;
    filter: drop-shadow(0px 0px 2px #a59d76);
    transition: .3s;
    font-size: 11px;
    font-family: "MS UI Gothic", Tahoma;
}

.conbutton:hover{
transform:scale(1.05);}

#guy{
    width: 31px;
    position: relative;
    bottom: 36px;
    LEFT: 85px;}

    /* set correct box model */
* {
    box-sizing:border-box;
}

/* flexbox container */
.holy-grail-flexbox {
    display:flex;
    flex-wrap:wrap;
}

/* columns (mobile) */
.holy-grail-flexbox > * {
    width:100%;
}

/* tablet breakpoint */
@media (min-width:768px) {
    .holy-grail-flexbox > .left-sidebar,
    .holy-grail-flexbox > .right-sidebar {
        width:50%;
    }
}

/* desktop breakpoint */
@media (min-width:1024px) {
    .holy-grail-flexbox > .header {
        order:-2; /* header first */

    }
    .holy-grail-flexbox > .left-sidebar {
        /* left sidebar second (first in second row) */
        order:-1; 
    }
    .holy-grail-flexbox > .main-content {
        width:400px;
    }
    .holy-grail-flexbox > .left-sidebar,
    .holy-grail-flexbox > .right-sidebar {
        width:205px;
        display:flex;
    }
}

#addmy{
    margin-top:5px;height: 165px;overflow-y: visible;
}
#miniban{
    width: 306px;
}

/* phones */
            @media only screen and (max-width: 750px) {

                  body {
    width:385px;
  }

  .parent{
    display:block;
  }
  #miniban{
    width:343px;
  }
.about{
    height:133px;
}
#featured{
    width:300px;
}
#inner2{
    height:159px;
}
.lastart{
    background-size: 116%;
  background-position: -24px -8px;
  width:341px;
}
#cbox{
    width:350px;
}
.contact{
    height:106px;
}
#guestb{
    width:326px;
}
.myButton{
    width:166px;
}
.todo, .todo2, #deco, #shrinebut, #guy, #puter, #break{
    display:none;
}
#addmy{
    height:120px;
    text-align:center;
}
#musicplayer{
    width:364px;
}
}
/* tablets */

  @media only screen and (min-width: 750px) and (max-width: 1020px) {

  body {
    width:750px;
  }

  .parent{
    display:block;
  }
.about{
    height:133px;
    font-size:13px;
}
#featured{
    width:600px;
}
#inner2{
height: 132px;
    font-size: 14px;
}
.lastart{
background-size: 77%;
    background-position: 164px -26px;
    width: 705px;
}
#cbox{
    width:690px;
    height: 300px;
}
.contact{
    height:134px;
}
#guestb{
width: 705px;
    image-rendering: auto;
}
.myButton{
    width: 328px;
    font-size: 13px;
}
.todo, .todo2, #deco, #shrinebut, #guy, #puter, #break, #miniban, .sidething{
    display:none;
}
#addmy{
height: 140px;
    text-align:center;
}
#musicplayer{
    width:352px;
}
.inner{
    font-size:13px;
}

h2{
    font-size: 20px;
}
h3{
    font-size:17px;
}

h4{
    font-size: 13px;
  line-height: 6px;
}

.contitle h2 {
    font-size:16px;
}

.artin{
width: 259px;
    font-size: 14px;
}

.conbutton{
    font-size: 14px;
    padding: 2px;
  margin: 9px;
}

}