:root {
    --consoleColor: rgb(134, 134, 134);
    --listColor: rgb(99, 99, 99);
    --borderColorWhite: rgb(226, 226, 226);
    --borderColorBlack: rgb(87, 87, 87);
    --selectionColor: rgba(210, 105, 30, 0.466);

    --explainBackground: rgba(0, 0, 0, 0.349);
    --explainMarginColor: rgba(0, 0, 0, 0.493);
    --explainMarginBorder: 3px solid gray;
    --explainMarginBorderClose: 3px solid transparent;
}

@font-face{
    font-family: fontStratum;
    src: url(fonts/stratumno2_bold.otf);
}
@font-face{
    font-family: fontStratumMedium;
    src: url(fonts/stratumno2_light.otf);
}
@font-face{
    font-family: fontStratumMedium2;
    src: url(fonts/stratumno2_regular.otf);
}

body {
    background-color: black;
    padding: 0px;
    margin: 0px;
}

#main {
    width: 1600px; height: 718px;
    background-color: greenyellow;
    margin: 0px auto;
    contain: paint;
    /**mask-image: url(images/mask/mainMask.png);
    mask-repeat: no-repeat;**/
}

/**CHARACTERS**/

#characters {
    float: right;
    position: relative;
}
.character {
    position: absolute;
    margin-left: 0px;
    width: 1280px; height: 720px;
}

#character1 {
    background-image: url(images/char1.png);
}
#character2 {
    background-image: url(images/char2.png);
}

.openCharacter1 {
    animation: characterAppear 0.4s ease-out;
    animation-fill-mode: forwards;
}
.closeCharacter1 {
    animation: characterDisappear 0.4s ease-in;
    animation-fill-mode: none;
}
@keyframes characterAppear {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-1600px);
    }
}
@keyframes characterDisappear {
    0% {
        transform: translateX(-1600px);
    }
    100% {
        transform: translateX(-3400px);
    }
}

/**BACKGROUND**/

#background {
    position: absolute;
    width: 1280px; height: 720px;
    background-color: transparent;
    flex-wrap: wrap;
}
.backgroundImage {
    position: absolute;
}

#backgroundSolid {
    background-image: url(images/backgroundSolid.jpg);
    width: 3840px; height: 720px;
    opacity: 100%;
    animation: smokeScroll_1 60s linear infinite;
}

.backgroundSmoke {
    position: absolute;
    filter: brightness(1);
    background-repeat: repeat;
}
#backgroundSmoke_1 {
    background-image: url(images/backgroundSmoke.jpg);
    width: 3840px; height: 720px;
    opacity: 20%;
    animation: smokeScroll_1 25s linear infinite;
}
#backgroundSmoke_2 {
    background-image: url(images/backgroundSmoke.jpg);
    width: 3840px; height: 720px;
    opacity: 25%;
    margin: -2.560px;
    animation: smokeScroll_1 20s linear infinite;
    animation-direction: reverse;
}
@keyframes smokeScroll_1 {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-33%);
    }
}

.backgroundDust {
    pointer-events: none;
    z-index: 1;
}
#backgroundDust_1 {
    background-image: url(images/backgroundDust_1.png);
    width: 3840px; height: 720px;
    opacity: 25%;
    animation: smokeScroll_1 100s linear infinite;
    animation-direction: reverse;
}
#backgroundDust_2 {
    background-image: url(images/backgroundDust_2.png);
    width: 3840px; height: 720px;
    opacity: 50%;
    animation: smokeScroll_1 45s linear infinite;
    animation-direction: reverse;
    filter: brightness(2.5);
}

#backgroundLogo {
    opacity: 35%;
    filter: invert(0%) saturate(100%) brightness(2.5);
    width: 860px; height: 390px;
    margin-top: 30px;
    margin-left: 280px;
}

#backgroundGlow {
    
    width: 1000px; height: 720px;
    opacity: 28%;
    left: 50%;
    transform: translateX(-35%);
}

.backgroundShadow {
    width: 1602px; height: 720px;
    left: -2px;
    z-index: 2;
    pointer-events: none;
}

/**MENU NEWS**/

#menuNews {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.555);
    width: 500px; height: 550px;
    float: right;
    top: 600px;
    right: 70px;
    z-index: 5;
    overflow: auto;
    overflow-x: hidden;
    border: 1px solid rgba(128, 128, 128, 0.466);
}
.newsSection {
    font-family: fontStratumMedium2;
    font-size: 20px;
    color: white;
    margin-bottom: 40px;
}
.newsTitle {
    background-color: rgba(255, 255, 255, 0.253);
    margin: 3px;
    height: auto;
    font-family: fontStratum;
    font-size: 28px;
    padding-block: 10px;
    padding-inline: 7px;
    color: yellow;
}
.newsText {
    margin-block: 0px;
    margin-inline: 6.5px;
}

/**MENU**/

#menu {
    position: absolute;
    width: 500px; height: 430px;
    background-color: rgba(0, 0, 0, 0.514);
    border: 0px solid red;
    margin-top: 180px;
    margin-left: 250px;
    padding-left: 0px;
    z-index: 5;
}
.menu {
    position: absolute;
}
#startTitle {
    width: 900px; height: 40px;
    background-color: rgba(127, 255, 212, 0.377);
    top: 280px;
}
#startDownload {
    width: 400px; height: 260px;
    background-color: transparent;
    /**background-image: url(images/backgroundShadow_1.png);
    background-size: 400px 300px;**/
    top: 300px;
    left: 1100px;
    z-index: 3;
}
#startDownloadTitle {
    top: -100px;
}
.buttonStartDownload {
    font-family: fontStratum;
    font-size: 60px;
    margin-bottom: 60px;
    display: grid;
    width: 100%; height: 100px;
    contain: paint;
}
.startShadow {
    pointer-events: none;
    width: 400px; height: 260px;
}
#startShadow_2 {
    top: -160px;
}

.menuButton {
    background-color: transparent;
    border: 0px;
    width: 500px; height: 40px;
    display: grid;
    font-family: fontStratum;
    color: rgba(128, 128, 128, 0.479);
    text-align: left;
    font-size: 30px;
    
}
.menuButton:hover {
    background-color: blue;
    color: white;
    padding-left: 8px;
    padding-top: 0px;
    font-size: 32px;
    transition: padding-left 0.3s, padding-top 0.3s, font-size 0.3s;
}
.menuButton:active {
    background-color: red;
    color: rgb(78, 78, 78);
}
#menuPlatform {
    display: none;
    pointer-events: none;
    border: 0px solid blue;
    position: absolute;
}
.menuBack {
    align-items: end;
}

#menuExplain {
    display: block;
    pointer-events: none;

    background-color: transparent;
    width: 100%; height: 100%;
    transition: background-color 0.6s;
    z-index: 3;
}
#explainMargin {
    display: block;
    pointer-events: none;

    top: 130px;
    background-color: transparent;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    width: 100%; height: 500px;
    transition: background-color 0.6s , border-top 0.6s , border-bottom 0.6s;
    padding-top: 25px;
}
.menuInside {
   position: absolute;
}
.explainInside {
    display: none;
    pointer-events: none;
    /**left: 50%;
    transform: translateX(-25%);**/
    background-color: none;
    margin: 0% 18.3%;
    width: 1000px; height: 475px;
    
}
.buttonBackInside {
    font-family: fontStratum;
    font-size: 25px;
    color: rgba(255, 255, 255, 0.39);
    background-color: transparent;
    border: 0px;
    position: absolute;
    transition: color 0.5s;
    top: 500px;
    left: 40px;
}
.buttonBackInside:hover {
    color: white;
}
.insideTitle {
    position: absolute;
    font-family: fontStratum;
    font-size: 50px;
    color: white;
    opacity: 60%;
    top: -126px;
}
.insideText {
    font-family: fontStratumMedium;
    font-size: 30px;
    color: white;
}
#PS3Buttons {
    width: 300px; height: 475px;
}
#PS3Details {
    left: 305px;
    background-color: var(--explainMarginColor);
    width: 690px; height: 475px;
    border-left: var(--explainMarginBorder);
    border-right: var(--explainMarginBorder);
    border-radius: 2%;
    overflow: auto;
    overflow-x: hidden;
    /**
    scrollbar-track-color: red;
    scrollbar-width: 100px;
    */   
}
#PS3Details::-webkit-scrollbar {
    width: 40px;
    left: 90px;
}
#PS3Details::-webkit-scrollbar-track {
    background: blue;
    background-image: url(images/backgroundSmoke.jpg);
}
#PS3Details::-webkit-scrollbar-thumb {
    background: red;
}

.buttonAnimations {
    position: fixed;
    width: 200px; height: 80px;
    right: 0;
    bottom: 0;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.473);
    text-align: center;
}
.buttonAnimations:hover {
    background-color: rgba(0, 0, 0, 0.473);
}
#buttonAnimationsOn {
    color: rgb(42, 114, 42);
}
#buttonAnimationsOff {
    pointer-events: none;
    display: none;
    color: rgb(109, 27, 27);
}

/**SERVERS**/

#buttonConsoleReset {
    display: none;
    pointer-events: none;
    width: 480px; height: 50px;
    background-color: black;
    position: absolute;
    align-items: flex-end;
    position: absolute;
    margin-top: 670px;
    border: 0px;

    font-family: fontStratum;
    font-size: 40PX;
    color: burlywood;
    transition: color 0.8s;
}
#buttonConsoleReset:hover {
    color: white;
    
}
#buttonConsoleReset:active {
    color: greenyellow;
    transition: color 0.2s;
}

#menuServers {
    display: block;
    position: absolute;
    pointer-events: none;
    opacity: 0%;
    width: 1024px; height: 600px;
    background-color: var(--consoleColor);
    /**margin-top: -120px;**/
    transition: opacity 0.3s;
    border-radius: 10px;
    contain: paint;
}
#buttonBackServers {
    position: relative;
    float: right;
    font-size: 15px;
    color: var(--borderColorWhite);
    background-color: var(--consoleColor);
    border: 0px;
    border-radius: 10px;
    margin: 5px;
    z-index: 3;
}
#consoleDrag {
    position: fixed;
    background-color: brown;
    width: 100%; height: 30px;
    color: var(--borderColorWhite);
    z-index: 1;
}
#serversMargin {
    display: block;
    background-color: rgb(134, 134, 134);
    width: 1005px; height: 473px;
    margin: 80px auto;
    padding-top: 13px;
    border: 2px solid rgb(226, 226, 226);
    border-right: 2px solid var(--borderColorBlack);
    border-bottom: 2px solid var(--borderColorBlack);
}

#serversList {
    background-color: var(--listColor);
    width: auto; height: 200px;
    margin-left: -2px;
    margin-right: -2px;
    padding: 0px;
    border: 2px solid rgb(226, 226, 226);
    border-top: 2px solid var(--borderColorBlack);
    border-right: 2px solid rgb(109, 109, 109);
}
.column {
    display: inline-block;
    width: 200px; height: 25px;
    background-color: var(--listColor);
    border: 2px solid var(--borderColorWhite);
    border-bottom: 2px solid var(--borderColorBlack);
    border-right: 2px solid var(--borderColorBlack);
    margin: 0px;
    padding: 0px;
    color: var(--borderColorWhite);
    margin-left: 1px;
    margin-top: 0px;
    
}
#columnServers {
    width: 400px; 
}
#columnIP {
    width: 400px;
}
.textColumn {
    display: block;
    width: auto; height: 25px;
    background-color: transparent;
    margin-top: 3px;
    z-index: 3;
}
#textServers_1, #textIP_1 {
    margin-top: 10px;
}
#columnSelection {
    margin-top: -49px;
    position: absolute;
}
.selection {
    display: block;
    position: absolute;
    background-color: var(--selectionColor);
    width: 1005px; height: 27px;
    margin-top: 0px;
}
#selection_1 {
    margin-top: 20px;
}

/**DESK**/