*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color: #5d5d5d;
    background-image: url("tlo.jpg");
    background-attachment: fixed;
    font-family: 'Exo 2', sans-serif;
}

.header{            /*napis górny*/
    width:95%;
    min-height:100px;
    border-top:none;
    border-left:3px solid #80d14d;
    border-right:3px solid #80d14d;
    border-bottom:3px solid #80d14d;
    border-radius:0 0 20px 20px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    color:#80d14d;
    font-size:30px;
    font-family: 'Comic Sans MS', cursive, sans-serif;
    letter-spacing: 5px;
    background-color: rgba(0,0,0,0.7);
}

.ramka_m{       

    width:50%;
    min-height:300px;
    text-align:center;
    border:3px solid #80d14d;
    margin-left:auto;
    margin-right: auto;
   
    border-radius:20px;
    color:#80d14d;
    font-size:30px;
    padding:30px; 
    background-color: rgba(0,0,0,0.4);

}

/* Formularz */

input[type=text], input[type=password]{

    width:60%;
    font-size:25px;
    margin: 10px 0;
    padding: 5px;
    border-radius:10px;
}

input[type=submit], input[type=reset]{
    width:60%;
    font-size: 25px;
    color:#80d14d;
    background: #303030;
    border:3px solid #80d14d;
    padding: 10px;
    margin: 10px 0;
    border-radius:10px;

}

input[type=submit]:hover, input[type=reset]:hover{

    background-color: #80d14d;
    color:#303030;


}


/* panel użytkownika */

.powitanie{                /*napis witający*/
    width:95%;
    min-height:100px;
    font-size: 25px;
    color:#80d14d;
    padding: 20px;
    border:3px solid #80d14d;
    margin: 10px auto;
    border-radius:20px;
    text-align: center;
    background-color: rgba(0,0,0,0.7);
}

.ramka{            /*logo ikona uzytkownika*/
    width:95%;
    min-height:10px;
    margin:0px auto;
    text-align:center;
/*
  position:absolute;
  top:30px;
  right:60px;
*/
   
}


.container{
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap:wrap;
    height:90vh;
}

.panel{    /*kafle filmów*/

    width:45%;
    min-height:50px;
    text-align:center;
    border:3px solid #80d14d;
    margin: 20px 20px; 
    border-radius:20px;
    color:#80d14d;
    font-size:20px;
    padding:20px; 
    /* float:left; */
    background-color: rgba(0,0,0,0.7);
   
}

.panel > img{

    margin: 5px;
    border-radius:10px;
    
}


.m_button{            /*przycisk wyloguj*/
    width:100px;
    font-size: 18px;
    color:#80d14d;
    background: #303030;
    border:3px solid #80d14d;
    padding: 10px;
    text-align: center;
    border-radius:10px;
    text-decoration: none;
}

.logout{                /*pozycja przycisku wyloguj*/
    position: relative;
    
    /*    position:absolute;
        top:140px;
    right:30px;*/
}

.smart-player-embed-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 852px;
  height: 0;
  overflow: hidden;
  padding-top: calc(480 / 852 * 100%);
  position: relative;
}
.smart-player-embed-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 852px;
  max-height: 480px;
}

@media only screen and (max-width: 768px)
{
   .smart-player-embed-iframe {
     max-height: 100vh;
   }
    
    
    .ramka_m{
    
        width:90% ;
    
    }
    
    input[type=text], input[type=password]{

   /* width:95%;*/
    font-size:25px;
    margin: 10px 0;
    padding: 5px;
    border-radius:10px;
}

input[type=submit], input[type=reset]{
   /* width:95%;*/
    font-size: 25px;
    color:#80d14d;
    background: #303030;
    border:3px solid #80d14d;
    padding: 10px;
    margin: 10px 0;
    border-radius:10px;

}
    
    
    .panel{    /*kafle filmów*/

    width:95%;
        
    }
    
    
    .header{ 
    
    font-size:1.1em;
    }
    
    
    
.ramka > img{
    width:50px;
    height:auto;
}
    
}