/* BACKGROUND */

.background {
    position: relative;
    width: 1611px;
    height: 936px;
    background-color: #1E1F2F;
    overflow: hidden;
}

.gb{
    /* position&size */
    position: absolute;
    width: 558px;
    height: 644px;
    top: -179px;
    left: 1169px;
    border: 60px;

    /* borderbox */
    border: 60px solid #48596D;
    box-sizing: border-box;   
}

.dbb {
    /* position&size */
    position: absolute;
    width: 558px;
    height: 644px;
    top: 385px;
    left: 691px;
    border: 60px;
    opacity: 0.8;
    

    /* borderbox */
    border: 60px solid #2D2F48;
    box-sizing: border-box;
}

/* LEFT CONTAINER */

.left-container header{
    /* position & size */
    position: absolute;
    width: 91.54px;
    height: 96px;
    top: 125px;
    left: 130px;

    /* borderbox */
    box-sizing: border-box;
    /* border: 2px solid aqua; */

    /* flexbox */
   display: flex;
   flex-direction: row;
   /* flex-flow: row wrap; */
   /* flex-shrink: 0px; */
}

header > .logo-atas{
    /* position&size */
    width: 91.54px;
    height: 96px;
    top: 125px;
    left: 130px;

    /* flexbox */
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
    /* flex-basis: 35%; */
    /* padding-right: 40px;  */
}

.logo-atas > .whitebox{
    /* position & size */
    width: 31.06px;
    height: 27.42px;
    top: 152.42px;
    left: 130px;
    background-color: white;
    margin-bottom: 69px;
}

.logo-atas > .logoR {
    /* position&size */
    width: 60.47px;
    height: 68.55px;
    top: 221px;
    left: 161.15px;
    background-color: #E82C4F; 
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.logoR img{
    /* position&size */
    width: 28.31px;
    height: 33.37px;
    top: 203.41px;
    left: 177.81px;
    /* background: #FFFFFF; */    
}

header > .warmups{
    /* position&size */
    width: 331px;
    height: 96px;
    top: 125px;
    left: 261.55px;
    padding-left: 30px;
    padding-bottom: 20px;
    
    /* font */
    font-family: Bebas Neue;
    font-size: 96px;
    font-weight: 400;
    line-height: 122.88px;
    letter-spacing: 0em;
    text-align: left;
    color: #FFFFFF;  
}

.left-container article{
    /* position&size */
    position: absolute;
    width: 800px;
    height: 400px;
    top: 301px;
    left: 130px;

    /* font */
    font-family: Bebas Neue;
    font-size: 156px;
    font-weight: 400;
    line-height: 146px;
    letter-spacing: 0em;
    text-align: left;
    color: #FFFFFF;

    

    /* flexbox */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.left-container footer{
    /* position&size */
    position: absolute;
    width: 624px;
    height: 64px;
    top: 781px;
    left: 130px;
    padding: 8px;
    gap: 80px;

   
     
    /* flexbox */
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

footer > .human{
    /* position&size */
    width: 264px;
    height: 48px;
    gap: 20px;
    

    /* flexbox*/
    display: flex;
    /* flex-direction: row; */
    justify-content: flex-start;
    align-items: center;

    /* font */
    font-family: Bebas Neue;
    font-size: 64px;
    font-weight: 400;
    line-height: 40px;
    letter-spacing: 0.08em;
    text-align: left;
    white-space: nowrap;
    color: #FFFFFF;
}

footer > .clock{
    /* position&size */
    width: 264px;
    height: 48px;
    gap: 20px;

    /* flexbox */
    display: flex;
    justify-content: flex-start;
    align-items: center;

    /* font */
    font-family: Bebas Neue;
    font-size: 64px;
    font-weight: 400;
    line-height: 40px;
    letter-spacing: 0.08em;
    text-align: left;
    color: #FFFFFF;
}

.right-container > .bwb{
    /* position&size */
    position: absolute;
    width: 504px;
    height: 618px;
    top: 166px;
    left: 957px;

    /* borderbox */
    border: 60px solid #FFFFFF;
    box-sizing: border-box;
}

.right-container > .rb{
    /* position&size */
    position: absolute;
    width: 240px;
    height: 240px;
    top: 305px;
    left: 1089px;
    border: 40px;

    /* borderbox */
    border: 40px solid #E82C4F;
    box-sizing: border-box;
}

.right-container > .swb{
    /* position&size */
    position: absolute;
    width: 80px;
    height: 80px;
    top: 385px;
    left: 1169px;
    border: 20px;

    /* borderbox */
    border: 20px solid #FFFFFF;
    box-sizing: border-box
}

.right-container > .bb{
    /* position&size */
    position: absolute;
    width: 80px;
    height: 80px;
    top: 585px;
    left: 1089px;

    /* borderbox */
    border: 20px solid #3256A1;
    box-sizing: border-box;
}

.right-container > .wc{
    /* position&size */
    position: absolute;
    width: 80px;
    height: 80px;
    top: 585px;
    left: 1249px;

    /* borderbox */
    border: 20px solid #FFFFFF;
    box-sizing: border-box;
    border-radius: 50px;
}