* {margin:0;padding:0;}
body {
    display:grid;
    font-family:Arial;
    max-width: 1200px;
    margin: auto;
    grid-template-columns: 50% 50%
}
.status {color:#888;}
img {
    display:block;
    width:100%;
    max-width:640px;
    position:relative;
    right:0;
}
#webcam{
    display:grid;
}
.cam {
    margin:0;
    padding:0;
}
img.tiny {
}
ul {padding-left:2em;}
#bucket {display:none;}
#gd {
    border: 1px solid black; 
    width:200px, 
    height:200px; 
    font-size:200%;
    text-weight:bold;
}
.links{
    position:relative;
    clear:both;
    padding-top:1em;
}
@media screen and (min-width:0px) {
    body {
        grid-template-columns: 100%;
    }
    #webcam {
        grid-column-start:1;
        grid-row-start:2;
        grid-template-columns: auto auto;
        grid-template-rows: 150px auto auto;
    }
    #gd {
        grid-row: 1;
        grid-column: 1/ span 2
        
    }
}

@media screen and (min-width:500px) {
    body {
        grid-template-columns: 50% auto;
    }
    .lr {
        grid-column: 1 / span 2;
    }
    #gd {grid-row:auto;}
    #webcam {
        grid-column-start:2;
        grid-row-start:1;
        grid-template-rows: auto;
    }
}