:root {
    --bg-color-light: #00122f;
    --bg-color-darker: #000311;
    --bg-color-footer: #172633;
    --text-color: white;
    --text-color-title: #d2ae58;
    --border-color: #d2ae58;
}



html {
    font-size: 14px;
    font-family: 'Teko';
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.main-bg-color {
    background-color: #172633 !important;
}

.text-color-title {
    color: var(--text-color-title) !important;
}

body {
    font-size: 20px;
    /*    background-color: #0a1116 !important;*/
    background: linear-gradient(to top right, #00122f 20%,#00122f 60%, #000311 80%) !important;
    font-family: 'Teko';
    position: relative;
}

header {
    position: relative;
    z-index: 3;
}

.main-img-menu {
    position: absolute;
    right: 0;
    top: -20px;
    z-index: 4 !important;
}

.main-body {
    /*    background-color: #0a1116 !important;*/
    color: white;
    min-height: 600px;
    z-index: 10 !important;
    position: relative;
}

.main-footer {
    background-color: var(--bg-color-footer) !important;
    min-height: 100px;
    border-top: 2px solid var(--border-color);
    border-bottom: 2px solid var(--border-color);
}

html {
    position: relative;
    min-height: 100%;
}

.margin-top-20 {
    margin-top: 20px;
}

.padding-box {
    padding: 0px 5px 0px 5px !important;
}

.font-26 {
    font-size: 26px;
}


.title {
    font-size: 22px;
    font-weight: bold;
}

.summonerName {
    font-size: 22px;
    vertical-align: central;
}



.font-size-20 {
    font-size: 20px;
}

.margin-top-50 {
    margin-top: 50px;
}


.margin-top-30 {
    margin-top: 30px;
}

.dropdown-dark {
    font-size: 20px;
    background-color: #44464a;
    color: white;
}

    .dropdown-dark:focus {
        background-color: #44464a;
        color: white;
    }

    .dropdown-dark option {
        background-color: #2f3136;
        color: white;
    }

.icon-champion-default {
    height: 60px;
}

.img-staff {
    width: 256px; /* You can set the dimensions to whatever you want */
    height: 256px;
    object-fit: cover;
}

.img-team-small {
    height: 64px;
    width: 64px;
}

.div-link {
    text-decoration: none;
    display: inline;
    padding: 20px;
    margin: 3px;
    font-size: 26px;
    cursor: pointer;
    color: lightgray;
    border-bottom: 2px solid var(--border-color) !important;
    text-align: center;
    width: 45%;
}

.div-link-active {
    color: white !important;
    font-weight: bold;
    border-bottom: 5px solid var(--border-color) !important;
}

.vods-line {
    border-bottom: 1px solid white;
    padding: 10px;
    font-size: 16px;

    margin-top: 20px;
}

    .vods-line a {
    }

    .vods-line:hover {
    }


.text-vs {
    font-size: 30px;
    color: #d2ae58;
}

.img-partenaire {
    object-fit: cover;
}


.video-container {
    padding: 10px;
}

    .video-container iframe {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

.video-container-md {
  
    height:400px;
}

.video-container-sm {
  
    height:200px;
}