* {
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

/* Style the header */

.header{

    background-color: #f1f1f1;
    padding: 0px;
    text-align: center;
    font-size: 35px;
    text-shadow: 0 1px 0 #ccc,
    0 2px 0 #c9c9c9,
    0 3px 0 #bbb,
    0 4px 0 #b9b9b9,
    0 5px 0 #aaa,
    0 6px 1px rgba(0,0,0,.1),
    0 0 5px rgba(0,0,0,.1),
    0 1px 3px rgba(0,0,0,.3),
    0 3px 5px rgba(0,0,0,.2),
    0 5px 10px rgba(0,0,0,.25),
    0 10px 10px rgba(0,0,0,.2),
    0 20px 20px rgba(0,0,0,.15);
}

.menu {

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333333;
    }

    ul li {
        float: left;
    }

    ul li a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    ul li a:hover {
        background-color: #111111;
    }

}

/* Create three unequal columns that floats next to each other */
.column {
    float: left;
    padding: 00px;
   /* height: 300px; /* Should be removed. Only for demonstration */
}

/* Left and right column */
.column.side {
    width: 25%;
}
.column.left {
    width: 25%;
    padding-left: 10px;
    padding-right: 10px;
}

/* Middle column */
.column.middle {
    background-image: url('css/paper1.jpg');
    background-size: 100%;
    background-repeat: repeat-y;
    background-position: top left;
    width: 50%;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Style the footer */
.footer {
    background-color: #f1f1f1;
    padding: 10px;
    text-align: center;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other
@media (max-width: 600px) {
    .column.side, .column.middle {
        width: 100%;
    }
}
*/

@media (max-width: 600px) {
     .column.middle, .column.side, .column.left {
        width: 100%;
    }
    .column.left {
        display: none;
    }

}
/*
.author {
    color: black;
    font-size: 2.5em;
    text-shadow: 1px 1px 2px white,
    0 0 25px blue,
    0 0 5px red;
}
*/

.author{
	margin-top: 0px;
    /*background-color: #f1f1f1;*/
    color: #111111;
    padding: 00px;
    /*text-align: center;*/
    font-size: 35px;
    text-shadow: 0 1px 0 #ccc,
    0 2px 0 #c9c9c9,
    0 3px 0 #bbb,
    0 4px 0 #b9b9b9,
    0 5px 0 #aaa,
    0 6px 1px rgba(0,0,0,.1),
    0 0 5px rgba(0,0,0,.1),
    0 1px 3px rgba(0,0,0,.3),
    0 3px 5px rgba(0,0,0,.2),
    0 5px 10px rgba(0,0,0,.25),
    0 10px 10px rgba(0,0,0,.2),
    0 20px 20px rgba(0,0,0,.15);
}
p.quote {
    background-color: yellow;
    display: block;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    border-style: outset;
    border-radius: 25px;
    font-size: 1.5em;
    padding: 10px
}

p.error {
    background-color: yellow;
}

.image-left {
    /*clear: both;*/
    float: left;
    margin-right: 15px;
    margin-bottom:10px;
}

.box1 {

    margin-left: auto;
    margin-right: auto;
    width: 80%;
    background-color: #dddddd; padding: 10px
}

.centerimg {
    display: block;
    margin-left: auto;
    margin-right: auto;
    /*filter: drop-shadow(-5px -5px 10px blue);*/
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

.imgtext{
    background-color:white;
    margin-bottom: 0;
    display:block;
    margin-left: auto;
    margin-right: auto;
    text-align:center;
}

.zerotop{
    /*background-color:white;*/
    margin-top: 0;
    display:block;
    /*margin-left: auto;*/
    /*margin-right: auto;*/
    /*text-align:center;*/
}

/* unvisited link */
a:link {
    color: black;
    text-decoration: none
}

/* visited link */
a:visited {
    color: black;
    text-decoration: none
}

/* mouse over link */
a:hover {
    color: black;
    text-decoration: underline
}

/* selected link */
a:active {
    color: black;
    text-decoration: underline
}

a img {

    border: 1px solid #ccc;
}

a img:hover {
    opacity: 0.8;
}

.likeButton {
    background-color: #3498db; /* Blue */
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
    transition: background-color 1.0s ease;
}

/* New style after click */
.likeClicked {
    background-color: #27ae60; /* Green */
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
}

.dislikeButton {
    background-color: #3498db; /* Blue */
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
    transition: background-color 1.0s ease;
}

/* New style after click */
.dislikeClicked {
    background-color: red; /* Green */
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
}

.hidden {
    display: none;
}