body
{
    background-image: url("/?originalUrl=https%3A%2F%2Faidamd.github.io%2Fimg%2F1.jpg");
    background-repeat: repeat;
    line-height: 150%;
}

div{
border-radius: 25px;
border-radius: 25px;
}

div#main
{
    font-family: Comfortaa;
    background-color: gold;
}

#top
{
    height: 20%;
    color: black;
}

h2.right
{
    color: #a78436;
}

div#right
{
    float: left;
    width: 40%;
    margin: .6%;
    padding: 5%;
    padding-top: 3%;
    border: 30px solid black;
    background-color: white;
    box-shadow: inset 0px 0px 0px 20px #a78436;
}

div#left
{
    float: left;
    width: 25%;
    margin: .6%;
    margin-left: 9%;
    color: #a78436;
    background-color: black;
}


a.left
{
    color: #a78436;
}

div.left_div
{
    float: none;
    text-align: center;
    max-width: 100%;
    margin: 10px;
}

img#me
{
    width: 70%;
    margin: 5%;
    border: black;
}
img#my_name
{
    width: 20%;
    border: black;
    top-margin: 20%;
}

div#name
{
    font-size: 20;
}

a
{
    color: #5ba4b4;
}

li
{
    margin-top:4%;
}

ul
{
    margin-left:-10px;
}
div#new
{
    background-color: white;
    padding: 25px;
    color: black;
    box-shadow: inset 0px 0px 0px 15px #5ba4b4;
    text-align: left;
}

span.time
{
    color: #5ba4b4;
    font-weight: bold;
}

@media screen and (max-width: 800px) {
  div#left, div#right {
    width: 80%; /* The width is 100%, when the viewport is 800px or smaller */
  }