html,
body{
    height: 100%;
    font-size: 1 rem;
    font-family: 'Roboto', sans-serif;
    background: #0e0e0e;
}

.embed-container {
    --video--width: 2560;
    --video--height: 1440;
    position: relative;
    padding-bottom: calc(var(--video--height) / var(--video--width) * 100%); /* 41.66666667% */
    overflow: hidden;
    max-width: 100%;
    background: #0e0e0e;
    margin-top: 3.75rem;
  }

.inner_view h2
{
    visibility: visible;
}

.navbar-brand > img
{
    width: 75%;
}

.navbar-dark .navbar-toggler
{
    border-color:#7f7f7f;
    background-color: #0e0e0e;
    color:transparent;
}
  
  .embed-container iframe,
  .embed-container object,
  .embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 70%;
  }

  .embed-container h1{
      position: absolute;
      text-align: center;
      z-index: 3; 
      margin-left: 5%;
      margin-right: 10%;
      margin-top: 5%;
      color:#7f7f7f;
  }

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
    .embed-container{
        margin-top: 4.7rem;
    }
    .game-card
    {
        margin-bottom: 1rem;
    }
    .modal-content
    {
        width: 100%;
    }
    .contact > div:nth-child(1) > div:nth-child(2) > div:nth-child(1)
    {
        margin-bottom: 1rem;
    }

    body > section.contact > div > div:nth-child(2) > div.col-12.col-sm-4
    {
        width: 100%;
        margin-top: -3rem;
    }
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 481px) 
and (max-device-width : 575px) {
    .embed-container{
        margin-top: 4.7rem;
    }
    .game-card
    {
        margin-bottom: 1rem;
    }
    .modal-content
    {
        width: 100%;
    }
    .contact > div:nth-child(1) > div:nth-child(2) > div:nth-child(1)
    {
        margin-bottom: 1rem;
    }

    body > section.contact > div > div:nth-child(2) > div.col-12.col-sm-4
    {
        width: 100%;
        margin-top: -3rem;
    }
}

@media only screen 
and (min-device-width : 576px) 
and (max-device-width : 767px) {
    .embed-container{
        margin-top: 4.7rem;
    }

    .container
    {
        max-width: 760px;
    }

    .game-card
    {
        margin-bottom: 1rem;
    }
    .modal-content
    {
        width: 100%;
    }

    .contact > div:nth-child(1) > div:nth-child(2) > div:nth-child(1)
    {
        margin-bottom: 1rem;
        width: 100%;
    }

    body > section.contact > div > div:nth-child(2) > div.col-12.col-sm-4
    {
        width: 100%;
        margin-top: -3rem;
    }
}
  
/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    .embed-container{
        margin-top: 4.5rem;
    }

    .container
    {
        max-width: 950px;
    }

    .modal-content
    {
        width: 75%;
    }
    .careers > div:nth-child(1) > div:nth-child(2) > div:nth-child(1)
    {
        width: 100%;
    }
    .aboutus > div:nth-child(1) > div:nth-child(1) > div:nth-child(1)
    {
        width: 75%;
    }
    .contact > div:nth-child(1) > div:nth-child(2) > div:nth-child(1)
    {
        width: 65%;
    }
}

.gradient
{
    background: rgb(14,14,14);
    background: linear-gradient(90deg, rgba(14,14,14,1) 0%, rgba(42,60,64,1) 100%, rgba(66,52,52,1) 100%);
}

.navbar_style
{
    background-color: black;
    color:#7f7f7f;
}

.page-header{
    margin-top: 5.70rem;
    font-size: 1.15rem;
    color: #cdcccd;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}

.licolor
{
    color:#7f7f7f;
    font-weight: 500;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #7f7f7f;
    background-color: #0e0e0e;
}

.nav-pills .nav-link:hover, .nav-pills .show>.nav-link {
    color: #7f7f7f;
    background-color: #0e0e0e;
}

.aboutus h1{
    color: #cdcccd;
}

.games a, h1
{
    color: #cdcccd;
}

.game-card
{
    background: #0e0e0e;
    border:1px solid #7f7f7f;
    text-align: center;
    font-size: large;
}


.careers > div > div > div:nth-child(1) > h2, p{
    color: #cdcccd;
}
.careers > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) > p > a
{
    color: #cdcccd;
}


.modal-content{
    background-color: #0e0e0e;
    width: 100%;
    color: #cdcccd;
}

.modal-content p{
    line-height: 25px;
    margin-bottom: 15px;
}

.contact{
    color: #cdcccd;
}

body > section.contact.gradient > div > div:nth-child(2) > div.col > div > div.card-body > form > div:nth-child(5)
{
    color: #cdcccd;
    text-align: right;
}

.btn-primary
{
    background-color: #0e0e0e;
    border: #cdcccd solid 2px;
}
.btn-primary:hover
{
    background-color: #7f7f7f;
    border: #cdcccd solid 2px;
}

.contact_card
{
    background-color: #0e0e0e;
    border: #cdcccd solid 1px;
    margin-bottom: 4rem;
}

.contact_card > .card-header > svg
{
    margin-bottom: 0.25rem;
}

.contact_card > .card-header
{
    border-bottom: solid 1px #cdcccd;
}

.form-control
{
    color: #0f0e0f;
    background-color: #cdcccd;
}

.anchor
{
    position: absolute;
    margin-top:-200px;
}

.contact-input:focus {
    outline: none !important;
    border:1px solid rgb(0, 0, 0);
    box-shadow: 0 0 10px #7f7f7f;
}