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;
}
.zoom:hover {
  transform: scale(1.3)
}
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)
}
#links{
    text-align: left;
}

#content{
    background-color: #646464;
    display: flex;
    flex-direction: row;
    width: 80%;
    text-align: left;
    padding: 1%;
    color: black;
    font-size: large;
    justify-content: space-evenly;
}
#left{
    display: flex;
    flex-direction: column;
    width: 66%;
    justify-content: space-between;
}
#description{
    height: fit-content;
    padding: 1.1%;
    border: dashed;
    background-color: white;
}
#decor{
    height: fit-content;
    padding: 1.1%;
    border: dashed;
    background-color: white;
}

#side{
    display: flex;
    flex-direction: column;
    width:26%;
    justify-content: space-evenly
}

#updates{
    height:35%;
    overflow: auto;
    border: dashed;
    background-color: white;
    padding:3%;
}

#comment{
    height:fit-content;
    border: dashed;
    background-color: white;
    padding:3%;
}
}
#decor1{
    display: flex;
    flex-direction: column;
    height: fit-content;
    padding: 1.1%;
    border: dashed;
    background-color: white;
}
#sticker{
    position: absolute;
    left:10%;
    top: 1%;   
}

#problem{
    position: absolute;
    right: 15%;
    top: 16%;
}