div.bar {
        
        background: rgb(255, 71, 71);
        position: absolute;
        width: 100%;
        top: 0px;

}

.bar a {
        
        color: #f2f2f2;
        text-align: left;
        padding: 1.2vw 2vw;
        font-size: 1.7vw;
        font: arial;
        float:left;
        text-decoration: none;
        transition-duration: 0.4s;

}

.bar a:hover {
        
        box-shadow:0px 0px 6px 2px whitesmoke;
        text-decoration: none;
        color:black;

}

body {
       
        margin: 0;
        font-family: Arial;
        background-color:darkslategrey;

}

.captions {
       
        color:#f2f2f2;
        transform: translate(3vw, 0vw);
        font-size: 2vw;

}

.footer {
       

        bottom: 0px;
        height: 12px;
        width: 100%;
        padding: 5px 10px;
        background-color: rgb(255,71,71);
        color: white;
        text-align: left;
        font-size: 10px;
}

.form{
        
        font: arial;
        color:#f2f2f2;

}

.acCreator {
        
        position: relative;
        left: 40px;
        top: 20px;

}

.special{
        
        color:#f2f2f2;
        position: relative;
        font-size: 4.2vw;
        animation: slide 1s;
        transform: translate(2vw, 3vw);
        animation-fill-mode: forwards;

}

.links {
        
        color:#f2f2f2;
        text-align: left;
        font-size: 1.5vw;
        font-style: italic;
        font: arial;
        float: center;
        text-decoration: none;
        transform: translate(0vw, 3vw);

}

.fader {
        animation: fade 1s;
        color:#f2f2f2;
        text-align: left;
        padding: 0px 25px;
        font-size: 1.5vw;
        font: arial;
        float: center;
        transform: translate(0vw, 3vw);

}

.image {
        
        float:left;
        display: block;
        padding-top: 4vw;
        width : 100%;
        height: inherit;
        margin-right: 3px;

}

@keyframes slide {
        
        from {left: -500px;}
        to {left: 10px;}

}

@keyframes fade {
        
        from {opacity:-1}
        to {opacity:1}

}

.provinceName {

        padding: 0px;
        height: 2.5vw;
        margin-top: 3px;
        margin-left: 8px;
        font-size: 1.7vw;
        border: solid;
        border-radius: 3px;

}

.outputs {

        color:#f2f2f2;
        text-align: left;
        padding-left: 1.5vw;
        width: 100%;
        font-size: 2vw;
        font: arial;
        float: center;
        text-decoration: none;
        transform: translate(0vw, 3vw);
  
}

.buttons {

        border-radius: 8px;
        background-color: white;
        color: black;
        border: 2px solid rgb(255,71,71);
        transition-duration: 0.4s;
        width: 50vw;
        margin: auto;
        padding: 10px;
        font-size: 2.5vw;
        transform: translate(0, 0vw)

}

.buttons:hover {

        background-color: rgb(255,71,71);
        color: white;

}

a {

        text-decoration: none;
        color: black;

}

textarea {

        width: 80%;
        height: 80px;

}

button {

        display: block;
        margin: 10px 0;

}

.comments {

        margin: 40px 0;

}

.bottom, .top-comment {

        display: flex;
        color: grey;
        font-size: 12px;

}

.timestamp {

        padding-right: 10px;
}


.comment-ts {

        padding-left: 10px;

}

a1 {

        text-decoration: none;
        color: black;
        
}