/* background*/
body {
    /*background-image: linear-gradient(#9aadcb, white);*/
    font-family: Helvetica, sans-serif;
    background-repeat: no-repeat;
}

/* container for menu */
#container {
    background-color:white;
    box-shadow: 0px 2px 5px #0000007a;

}




hr{
    border-style: groove;
    margin: 20px 0px 20px 0px;
}


/* text attributes in textarea form */
textarea{
    Font-family: sans-serif;
    box-shadow: inset 0px 0px 0 0.5px #00000085;
    border: none;
    border-radius: 2px;
    display: inline-block;
    width: -webkit-fill-available;
    margin: 5px;
    padding: 5px;
    resize: none;
}


/* general photo attributes */
img.photo{
    width: 100%;
    height: auto;
    box-shadow: 0px 3px 5px 0px #00000078;
    display: flex;
    flex-direction: column;
}


/* logo attributes for header*/
img.logo{
    max-width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
}


/* photo attributes for blog*/
img.blog{
    width: 100vw;
    display: inline;
    margin: 1%;
    box-shadow: 0px 3px 5px 0px #00000078;
}

/* blog photobok */
#photobox{
    margin: 5px;    
}


a.change{
    font-size: x-large;
    padding: 6px 10px 6px 10px;
}


a.exit{
    font-size: xx-large;
    padding: 0px 10px 0px 10px;
}


.searchbutton {
    background-color: #B30000;
    border: none;
    color: white;
    padding: 5px 10px;
    text-align: center;
    font-family: sans-serif;
    text-decoration: none;
    border-radius: 2px;
    margin: 5px;
    cursor: pointer;
    text-shadow: -1px 0px #00000094;
}


.favoritebutton {
    background-color: inherit;
    border: none;
    color: white;
    font-size: x-large;
    text-align: center;
    font-family: sans-serif;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    border-radius: 2px;
    text-shadow: 2px 0px #00000078;

}


.notfavoritebutton {
    border: none;
    color: white;
    font-size: x-large;
    background-color: inherit;
    font-family: sans-serif;
    text-decoration: none;
    display: inline-block;
    border-radius: 2px;
    cursor: pointer;
    text-shadow: -2px 0px 0px #00000078;
}


.profilebutton {
    background-color: #B30000;
    border: none;
    color: white;
    font-size: x-large;
    border-radius: 2px 2px 0px 0px;
    text-align: center;
    position:absolute;
    right: 40px;
    font-family: sans-serif;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    text-shadow: 2px 0px #00000078;
}


.notprofilebutton {
    border: none;
    color: white;
    font-size: x-large;
    border-radius: 2px 2px 0px 0px;
    background-color: #bebebe;
    position:absolute;
    right: 40px;
    font-family: sans-serif;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    text-shadow: -2px 0px 0px #00000078;
}


.flagbutton{
    background-color: inherit;
    border: none;
    color: #ff5757;
    border-radius: 2px 2px 0px 0px;
    text-align: center;
    margin: -5px 0px 0px 0px;
    font-family: sans-serif;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;

}


.commentflagbutton{
    background-color: inherit;
    border: none;
    color: #ff5757;
    border-radius: 2px 2px 0px 0px;
    text-align: center;
    font-family: sans-serif;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;

}


.changebutton {
    background-color: inherit;
    border: none;
    color: #ff5757;
    font-size: x-large;
    border-radius: 2px 2px 0px 0px;
    text-align: center;
    font-family: sans-serif;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    text-shadow: 2px 0px #00000078;
}


.newbutton {
    border: none;
    text-align: center;
    text-decoration: none;
    position: absolute;
    bottom: 10px;
    left: 5px;
}

.newbuttonprofile {
    border: none;
    font-size: x-large;
    text-align: center;
    text-decoration: none;
    float: right;
}



.deletebutton {
    border: none;
    color: white;
    position: absolute;
    right: 20px;
    z-index: 1;
    font-size: x-large;
    border-radius: 0px 2px 0px 2px;
    background-color: inherit;
    font-family: sans-serif;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    text-shadow: -2px 0px 0px #00000078;
}


.bittybutton {
    background-color: #ff8787;
    border: none;
    color: white;
    font-size: x-large;
    border-radius: 2px;
    text-align: center;
    margin:0px 5px 0px 0px;
    font-family: sans-serif;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    text-shadow: 2px 0px #00000078;
}


.notbittybutton {
    border: none;
    color: white;
    font-size: x-large;
    border-radius: 2px;
    background-color: #bebebe;
    margin: 0px 5px 0px 0px;
    font-family: sans-serif;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    text-shadow: -2px 0px 0px #00000078;
}


.commentbutton {
    background-color: #B30000;
    border: none;
    color: white;
    padding: 5px 10px;
    text-align: center;
    font-family: sans-serif;
    text-decoration: none;
    border-radius: 2px;
    margin: 0px 0px 0px 5px;
    cursor: pointer;
    text-shadow: -1px 0px #00000094;
}


a:link {
    color: #494B74;
    text-decoration: none
}


/* visited link */
a:visited {
    color: #494B74;
    text-decoration: none
}


/* mouse over link */
a:hover {
    color: #1a3754;
    text-decoration: none
}


/* selected link */
a:active {
    color: #ff5757;
    text-decoration: none;
    background-color: white;
}


h3{
    font-weight: bold;   
}

#appbox {
    word-wrap: break-word;
    margin: 10px;
    padding: 5px;
    overflow:hidden;
}

#postbox{
    margin: 0px 0px 5px 0px;
    box-shadow: 2px 2px 0px 1px #ff7474;
    border-radius: 2px;
    width: fit-content;
    padding: 10px;
    background-color: #ffe9e9;
    display: inline-block;
}

#bittycall{

    box-shadow: 2px 2px 0px 1px #ff7474;
    border-radius: 2px;
    width: fit-content;
    padding: 10px;
    background-color: #ffe9e9;
    display: inline-block;
}

    
/* text attributes in password forms */    
input[type="password"] {
    box-shadow: inset 0px 0px 0 0.5px #00000085;
    border: none;
    padding: 5px;
    margin: 5px;
    border-radius: 2px;
}


/* text attributes in date forms */
input[type="date"] {
    box-shadow: inset 0px 0px 0 0.5px #00000085;
    border: none;
    padding: 5px;
    margin: 5px;
    border-radius: 2px;
}


/* text attributes in forms */
input[type="text"] {
    box-shadow: inset 0px 0px 0 0.5px #00000085;
    border: none;
    padding: 5px;
    margin: 5px;
    border-radius: 2px;
}    

    
/* design for comment box */
.commentbox {
    margin: 0px 10px 20px 10px;
    padding: 10px;
    background-image: linear-gradient(#ffeaea,#fffdfd);
    word-wrap: break-word;
    border-radius: 5px;
    box-shadow: 2px 2px 3px #0000007a;
    position: relative;
}


/* design for text box for making comments */
#makecommentbox {
    padding: 5px;
    margin: 0px 0px 20px 0px;
}


/* text within footer */
footer > h1 {
    padding: 5% 5% 10% 5%;
}
  
  
/* design for search text box */  
#searchbox {
    display:inline-block; 
    margin: 10px 10px 0px 10px;
}


/* footer design*/
#footer {
    margin: 10px;
    padding: 5px;
}


#favbutton {
    position: absolute;
    bottom: 5px;
    right: 5px;
}


#button {
    position: absolute;
    right: 5px;
}


#flbutton {
    position: absolute;
    bottom: 5px;
    right: 5px;
}


#bitbutton {
    float:left;
}


#resultsbox {
    word-wrap: break-word;
    margin: 5px 5px 20px 5px;
    padding: 5px;

}


.bittybox {
    margin: 5px;
    word-wrap: break-word;
    padding: 5px;
}


.profilebittiesbox {
    word-wrap: break-word;
    float: left;
    clear: right;
    width: 100%;
}


.profilefavoritesbox {
    word-wrap: break-word;
    float: left;
    clear: right;
    width: 100%;
}


.placebox {
    margin: 10px;
    word-wrap: break-word;
    padding: 15px;
    box-shadow: 2px 2px 3px #0000007a;
    background-image: linear-gradient(#fff5f5,#ffd3d3);
    border-radius: 5px;
    float: left;
    min-height: 180px;
    width: 126px;
    position: relative
}


#logobox {
    max-width: 100%;
    height: auto;
    flex-direction: column;
    background-color: #ff5757;
}


.descriptbox {
    margin: 29px 15px 15px 5px;
    padding: 15px;
    background-image: linear-gradient(#fff5f5,#ffd3d3);
    background-color: #ffe7e7;
    word-wrap: break-word;
    border-radius: 0px 20px 20px 0px;
    border-bottom: thick;
    position: relative;
    border: #5d7498;
    box-shadow: 7px 3px 0px 3px #7e8a9d;
    border-left-style: dotted;
    border-left-width: thick;
}


ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}


li {
    float: left;
}


li.left {
    float: left;
}


li.right {
    float: right;
}


li a {
    display: block;
    color: black;
    text-align: center;
    padding: 10px 4.6px;
    text-decoration: none;
}


footer {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    flex-shrink: 0;
    text-align: center;
    margin: 0px;
    background-color: white;
    box-shadow: 0px 0px 5px #00000082;
}


main {
    flex: 1;
}


#document {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}


#slideshow {
    overflow: hidden;
    margin: 5px auto;
}


.slide-wrapper {
    width: 2912px;
    -webkit-animation: slide 18s ease infinite;
    -moz-animation: slide 18s ease infinite;
}


.slide {
    float: left;
    width: 728px;
}


.slide:nth-child(1) {
    background: #04737a;
    border-radius: 10px;
}


.slide:nth-child(2) {
    background: #f1e96a;
    border-radius: 10px;  
}


.slide:nth-child(3) {
    background: #9b5c8c;
    border-radius: 10px; 
}


.slide-number {
    color: #000;
    text-align: center;
    font-size: 10em;
}


@-webkit-keyframes slide {
    20% {margin-left: 0px;}
    30% {margin-left: -728px;}
    50% {margin-left: -728px;}
    60% {margin-left: -1456px;}
    70% {margin-left: -1456px;}
}


.filterbutton {
    background-color: #B30000;
    border: none;
    color: white;
    padding: 5px 10px;
    text-align: center;
    font-family: sans-serif;
    text-decoration: none;
    border-radius: 2px;
    margin: 5px;
    float: right;
    cursor: pointer;
    text-shadow: -1px 0px #00000094;
}


.dropbtn {
    border: none;
    color: white;
    padding: 10px;
    text-align: center;
    font-family: sans-serif;
    text-decoration: none;
    background-color: #B30000;
    border-radius: 2px;
    right: 0;
    margin: 15px 15px 5px 0px;
    cursor: pointer;
    text-shadow: -1px 0px #00000094;
}


.dropdown {
    position: relative;
    display: inline-block;
    float: right;
    right: 0;
    
}


.dropdown-content {
    display: none;
    position: absolute;
    background-color: #B30000;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    right: 15px;
    border-radius: 2px;
}


.dropdown-content input {
  color: white;
  text-decoration: none;
  display: block;
}


.dropdown-content input:hover {background-color: #ff5757;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #ffcbcb;}