:root {
    --fontpanel-color: #222;
    --bgpanel-color: #f2f3f7;
    --buttonpanel-bgpanel-color: #f2f3f7;
    --buttonpanel-shadow:
       -6px -6px 8px rgba(255, 255, 255, 0.9),
       5px 5px 8px rgba(0, 0, 0, 0.07)
   }
   .containerpanel {
    box-sizing:border-box;
    font-size:18px;
    font-family:roboto,sans-serif;
    color:var(--fontpanel-color)
   }
   .containerpanel {
    display:flex;
    justify-content:space-evenly;
    padding-top:25px;
    align-items:center;
    flex-direction:column
   }
   .apppanel-container {
    background-color:var(--bgpanel-color);
    border-radius:15px;
    box-shadow:#fff rgba(0,0,0,.25);
    display:block;
    flex:1;
    min-height:300px;
    margin-bottom:25px;
    overflow:hidden;
    padding:30px
   }
   .linky:hover {
    color:initial;
    text-decoration:none
   }
   .apppanel-top-bar {
    display:flex;
    align-items:center;
    margin-bottom:30px
   }
   .apppanel-heading {
    color:var(--fontpanel-color);
    display:block;
    flex:1;
    font-size:28px;
    font-weight:800;
    margin:0;
    text-align:center
   }
   .buttonpanel {
    border:0;
    text-decoration:none
   }
   buttonpanel:focus {
    border:none;
    outline:0!important;
    outline-style:none
   }
   .buttonpanel {
    color:var(--fontpanel-color);
    position:relative;
    border-radius:15px;
    background:var(--buttonpanel-bgpanel-color);
    font-weight:700;
    transition:all 100ms cubic-bezier(.175,.885,.32,1.275);
    box-shadow:var(--buttonpanel-shadow);
    cursor:pointer
   }
   .buttonpanel.buttonpanel-small {
    color:#6d6e74;
    font-size:22px;
    line-height:40px;
    width:40px;
    height:40px
   }
   .buttonpanel.buttonpanel-large {
    display:flex;
    font-size:20px;
    flex-direction:column;
    padding:15px;
    text-align:left;
    width:45%
   }
   .buttonpanel-block {
    align-items:center;
    display:flex;
    justify-content:space-between;
    padding:15px 24px;
    width:100%;
    max-width:450px
   }
   .buttonpanel-block span {
    font-size:16px
   }
   a.buttonpanel.disabled,
   fieldset[disabled] a.buttonpanel {
    pointer-events:none
   }
   .subtlepanel {
    color:#6d6e74
   }
   .fadefa {
    margin-left:3px;
   }
   .fadefaspin {
    margin-left:0px;
    color:blue
   }
   .fadefatick {
    margin-left:0px;
    color:green
   }
   @media only screen and (min-width:570px) {
    .apppanel-container {
     /*! width:500px */
    }
   }
   @media only screen and (max-width:570px) {
    .apppanel-container {
     width:100%;
     max-width:400px
    }
   }
   @import "https://fonts.googleapis.com/css?family=Montserrat:300,400,700,800";
   .movie_card {
    position:relative;
    display:block;
    width:800px;
    height:300px;
    margin:100px auto;
    overflow:hidden;
    border-radius:10px;
    -webkit-transition:all .4s;
    transition:all .4s
   }
   .movie_card:hover {
    -webkit-transform:scale(1.02);
    transform:scale(1.02);
    -webkit-transition:all .4s;
    transition:all .4s
   }
   .movie_card .info_section {
    position:relative;
    width:100%;
    height:100%;
    background-blend-mode:multiply;
    z-index:2;
    border-radius:10px
   }
   .movie_card .info_section .movie_header {
    position:relative;
    padding:25px;
    height:40%
   }
   .movie_card .info_section .movie_header h1 {
    color:#fff;
    font-weight:400
   }
   .movie_card .info_section .movie_header h4 {
    color:#9ac7fa;
    font-weight:400
   }
   .movie_card .info_section .movie_header .minutes {
    display:inline-block;
    margin-top:10px;
    color:#fff;
    padding:5px;
    border-radius:5px;
    border:1px solid rgba(255,255,255,.13)
   }
   .movie_card .info_section .movie_header .type {
    display:inline-block;
    color:#cee4fd;
    margin-left:10px
   }
   .movie_card .info_section .movie_header .locandina {
    position:relative;
    float:left;
    margin-right:20px;
    height:120px;
    box-shadow:0 0 20px -10px rgba(0,0,0,.5)
   }
   .movie_card .info_section .movie_desc {
    padding:25px;
    height:50%
   }
   .movie_card .info_section .movie_desc .text {
    color:#cfd6e1
   }
   .movie_card .info_section .movie_social {
    height:10%;
    padding-left:15px;
    padding-bottom:20px
   }
   .movie_card .info_section .movie_social ul {
    list-style:none;
    padding:0
   }
   .movie_card .info_section .movie_social ul li {
    display:inline-block;
    color:rgba(255,255,255,.4);
    -webkit-transition:color .3s;
    transition:color .3s;
    -webkit-transition-delay:.15s;
    transition-delay:.15s;
    margin:0 10px
   }
   .movie_card .info_section .movie_social ul li:hover {
    -webkit-transition:color .3s;
    transition:color .3s;
    color:rgba(255,255,255,.8)
   }
   .movie_card .info_section .movie_social ul li i {
    font-size:19px;
    cursor:pointer
   }
   .movie_card .blur_back {
    position:absolute;
    top:0;
    z-index:1;
    height:100%;
    right:0;
    background-size:cover;
    border-radius:11px
   }
   @media screen and (min-width:768px) {
    .movie_header {
     width:60%
    }
    .movie_desc {
     width:50%
    }
    .info_section {
     background:-webkit-gradient(linear,left top,right top,color-stop(50%,#0d0d0c),to(transparent));
     background:linear-gradient(to right,#0d0d0c 50%,transparent 100%)
    }
    .blur_back {
     width:80%;
     background-position:-100% 10%!important
    }
   }
   @media screen and (max-width:768px) {
    .movie_card {
     width:95%;
     margin:70px auto;
     min-height:350px;
     height:auto
    }
    .blur_back {
     width:100%;
     background-position:50% 50%!important
    }
    .movie_header {
     width:100%;
     margin-top:85px
    }
    .movie_desc {
     width:100%
    }
    .info_section {
     background:-webkit-gradient(linear,left bottom,left top,color-stop(50%,#141413),to(transparent));
     background:linear-gradient(to top,#141413 50%,transparent 100%);
     display:inline-grid
    }
   }
   #bright {
    box-shadow:0 0 150px -45px rgba(255,51,0,.5)
   }
   #bright:hover {
    box-shadow:0 0 120px -55px rgba(255,51,0,.5)
   }
   .bright_back {
    background:url(https://i.ibb.co/7YwpMPG/republic-of-gamers-logo-4k-cl-1600x900-1.jpg)
   }

   