a.class1:link, a.class1:visited, a.class1:active{
    color: red;
    text-decoration: underline;
    text-decoration-color: white;
}
a.class1:hover {
    color: white;
    text-decoration-color: red;
}
a.class2:link, a.class2:visited, a.class2:active{
    color: black;
    text-decoration: underline;
    text-decoration-color: red;
}
a.class2:hover{
    color: red;
    text-decoration: underline;
    text-decoration-color: black;
}
p.center{
    text-align: center;
    text-indent: 5%;
}
p{
    text-align: left;
    text-indent: 5%;
}
.red{
    color: red;
}
body{
    background-image: url(/homepage/images/background.gif);
    background-color: black;
    text-align: center;
    padding : 0; 
    font: garamond, bold;
    color: white;
    margin: 3%;
}

.container{
    align-content: center;
    display: block;
    background: black;
    width: 80%;
    height: 80%;
    margin: 0 auto;
}

#titlecard{
    font-size: 50px;
    font-family: courier new;
}
#subtitle{
    margin-top: -1%;
    font-size: small;
    align-content: center;
    text-align: center;
}
#navbar {
background: black;
color: white;
width: 100%;
letter-spacing: 1px; 
font: 18px/40px garamond,bold;
}

#navbar td a {
display: block;
width: 100%;
text-align: center;
color: white; 
text-decoration: none;
}

#navbar td a:hover {
    background: red;
    color: black;
}

.flex-container{
    display: flex;
    flex-direction: row;
    height: 70%;
    width: 100%;
    background-color: grey;
}

#sidebar{
    display: flex;
    flex-direction: column;
    width:20%;
    background: black;
    color: white;
    padding:1%;
}
.listimage{
   list-style-image: url(/homepage/images/.fav_arrowright.gif)
}
.listimage1{
   list-style-image: url(/homepage/images/.fav_reddice.webp)
}
.listimage2{
   list-style-image: url(/homepage/images/.fav_redguitar.webp)
}
#links{
    text-align: left;
}

#content{
    background-color: #646464;
    display: flex;
    flex-flow: wrap;
    flex-direction: row;
    width: 80%;
    text-align: left;
    padding: .5%;
    color: black;
    font-size: large;
}

#box1{
    width: 66%;
    height: 93%;
    padding: 1%;
    border: dashed;
    background-color: white;
    margin: .5% .5% .5% 1%;
}
#stamps{
    padding: .5%;
    width:26%;
    height:95%;
    border: dashed;
    background-color: black;
    border-color: white;
    margin: .5% .5% .5% 1%;
}

#sticker{
    position: absolute;
    left:10%;
    top: 1%;   
}

#problem{
    position: absolute;
    right: 15%;
    top: 16%;
}