/* DeepRockManagement StyleSheet for Index                   */
/* Créateur : Julien Dubois                                  */
/* 18.02.2022                                                */
/* Le document CSS permets d'améliorer le visuel du site web */

*{
    font-family:Arial;
    color: #6EB98B;
}

html{
    background-color: #272C29;
}

h1{
    font-size: 36pt;
}

#bannerimage{
    width: 100%;
    background-image: url("../images/deep-rock-galactic-banner.jpg");
    height: 200px;
    background-size:cover;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
}

.center{
    display: block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.imageMiddleBorder{
    display: block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    border-left: 5px solid #6EB98B;
    border-right: 5px solid #6EB98B;
    border-top: 5px solid #6EB98B;
    border-bottom: 5px solid #6EB98B;
    border-radius: 3px;
}

.tabelCenter{
    text-align: right;
    margin-left: auto;
    margin-right: auto;
}

.textfiller{
    size: 50px;
    border: 2px solid #0AE45C;
    border-radius: 4px;
    background-color: #C5F8D8;
    color: black;
}

.indexBtn {
    box-shadow: 3px 4px 0px 0px #1BA44F;
    background:linear-gradient(to bottom, #43D079 5%, #2DB260 100%);
    background-color:#31A95F;
    border-radius:18px;
    border:1px solid #0AE45C;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:17px;
    padding:7px 25px;
    text-decoration:none;
    text-shadow:0px 1px 0px #0BB64C;
}
.indexBtn:hover {
    background:linear-gradient(to bottom, #29E36F 5%, #1FD664 100%);
    background-color:#21C25E;
}
.indexBtn:active {
    position:relative;
    top:1px;
}

hr.rounded {
    border-top: 5px solid #6EB98B;
    border-radius: 3px;
    width: 16cm;
}

hr.roundedFC {
    border-top: 5px solid #6EB98B;
    border-radius: 3px;
    width: auto;
}

.title-word {
    font-family:Neon;
    animation: color-animation 4s linear infinite;
}

.title-word-1 {
    --color-1: #8debb1;
    --color-2: #6EB98B;
    --color-3: #6EB98B;
}

.title-word-2 {
    --color-1: #6EB98B;
    --color-2: #8debb1;
    --color-3: #6EB98B;
}

.title-word-3 {
    --color-1: #6EB98B;
    --color-2: #6EB98B;
    --color-3: #8debb1;
}

@keyframes color-animation {
    0%    {color: var(--color-1)}
    32%   {color: var(--color-1)}
    33%   {color: var(--color-2)}
    65%   {color: var(--color-2)}
    66%   {color: var(--color-3)}
    99%   {color: var(--color-3)}
    100%  {color: var(--color-1)}
}

@font-face {
    font-family:Neon;
    src: url(../images/neoncircuit.ttf);
}

.right {
    text-align: right;
    margin-right: 1em;
}

.card {
    /* Add shadows to create the "card" effect */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    background-color: #343d38;
    border-radius: 3px;
}

.bigcard {
    /* Add shadows to create the "card" effect */
    box-shadow: 0 5px 13px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    background-color: #343d38;
    border-radius: 3px;
}

.container {
    padding: 2px 16px;
}

.cardimage{
    width: 200px;
    height: 200px;
}

.column {
    float: left;
    width: 25%;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

.testing {
    table-layout: fixed;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.testing2 {
    margin-left: auto;
    margin-right: auto;
}