body{
    background-color: #1f1f1f
}
.videowrapper1{
    position: static;
    width: 100%;
    height: 534px;
    text-align: center;
    justify-content: center;
    z-index: -3;
}
.videoheader1{
    position: relative;
    top: 150px;
    color: white;
    font-family: 'PT Sans', sans-serif;
    font-size: 65px;
    display: block;
}
.gradi
{
    height: 100%;
     width: 100%;
      position: absolute;
      background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0) 20%, #1f1f1f);
}
.gamestartcard{
    margin-top: 300px;
    height: 400px;
    width: 100%;
    background-color: #1c1c1c;
    border-style: solid;
    border-right: none;
    border-left: none;
    border-bottom: #1d1d1d solid 15px;
    border-top: none
}
.gamestartimgwrap{
    position: relative;
    top: 10%;
    height: 80%;
    margin-right: 250px;
    float: right;
    z-index: 1;
}
.gamestartimg{
    float: right;
    height: 100%;
    z-index: 20;
}
.gamestarttextblock{
    position: relative;
    top: 10%;
    height: 80%;
    width: 40%;
    margin-left: 180px;
    float: left;
    color: white;
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
}
.bottomdiv{
   width: 100%;
    position: relative;
    margin-top: 100px;
    height: 100px;
    background-color: rgba(0,0,0,0.5);
    display: grid;
    grid-template-columns: 17% 83%;
}
.IPcontainer{
    margin-top: 20px;
    font-size: 22px;
    border: solid 3px;
    background-color: none;
    height: 30px;
    width: 145px;
    cursor:pointer;
    transition: 0.3s;    
}
.IPcontainer:hover{
    transform: scale(1.02);
}
.text
{
   align-content: center;
    color: rgb(153, 153, 153); margin-top: 10px; font-size: 14px;
}
@media (min-width:634px) and (max-width:1024px)
{
 .videoheader1
 {
    font-size:40px;
 }  
 .gradi
 {
    background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0) 20%, #1e1d1d);
 }
 .gamestartcard
 {
    margin: 10px;
 }
 .gamestarttextblock
 {
    margin-left: 10px; 
    width: 91%;
    font-size: 15px;
 }
 .gamestartimgwrap
 {
    display: none;
 }
 .bottomdiv
 {
   margin-top: 0;
     bottom: -70px;
     display: flex;
     min-height: 100px;
     flex-wrap: wrap;
     padding: 5px;
 }
 .logoimg
 {
    margin-left: 20px;
 }
}

@media (min-width:425px) and (max-width:633px)
{
 .videoheader1
 {
    font-size:40px;
 }  
 .gradi
 {
    background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0) 20%, #1e1d1d);
 }
 .gamestartcard
 {
    margin: 10px;
 }
 .gamestarttextblock
 {
    margin-left: 10px; 
    width: 91%;
    font-size: 15px;
 }
 .gamestartimgwrap
 {
    display: none;
 }
 .bottomdiv
 {
     margin-top: 0;
     bottom: -70px;
     display: flex;
     min-height: 200px;
     flex-wrap: wrap;
     padding: 5px;
 }
 .logoimg
 {
    margin-left: 20px;
 }
 .text
 {
    margin-bottom: 10px;
    margin-top: 0;
 }
}

@media  (max-width:424px)
{
    .videoheader1
    {
       font-size:40px;
    }  
    .gradi
    {
       background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0) 20%, #1e1d1d);
    }
    .gamestartcard
    {
       margin: 10px;
    }
    .gamestarttextblock
    {
       margin-left: 10px; 
       width: 91%;
       font-size: 15px;
    }
    .gamestartimgwrap
    {
       display: none;
    }
    .bottomdiv
    {
     margin-top: 0;
     bottom: -70px;
     display: flex;
     min-height: 200px;
     flex-wrap: wrap;
     padding: 5px;
    }
    .logoimg
    {
       margin-left: 20px;
    }
    .text
    {
        margin-bottom: 10px;
        margin-top: 0;
    }
}