@font-face {
    font-family: Beaufort;
    src: url('fonts/BeaufortRegular.otf');
}

@font-face {
    font-family: Beaufort;
    font-weight: bold;
    src: url('fonts/BeaufortBold.otf');
}

.context,
.context * {
    -webkit-user-select: none;  /* Chrome, Safari, Opera */
    -moz-user-select: none;     /* Firefox */
    -ms-user-select: none;      /* Edge */
    user-select: none;          
}

.context {
    width: 150px;
    margin: 0;
    padding-left: 0;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
    background: rgb(14, 13, 13);
    position: fixed;
    font-size: 16px;
    visibility: hidden;
    -webkit-touch-callout: none;
}

.content-link {
    list-style-type: none;
    padding: 0.75em 1em;
    font-size: .85em;
    font-family: "Beaufort", sans-serif;
    cursor: pointer;
    display: block;
}

.content-link:hover {
    background: rgb(48, 47, 47);
}


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background-color: rgb(14, 13, 13);
}



p, li, a {
    font-family: "Beaufort", sans-serif;
    font-weight: bold;
    font-size: 25px;   
    color: white;
    text-decoration: none;
}

header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 35px 3%;
}

.logo {
    cursor: auto;
    margin-right: auto;
    height: 10%;
    width: 10%;
}

.nav_links {
    list-style: none;
}

li {
    display: inline-block;
    padding: 0px 20px;
}

li a:hover {
    color: #977f30
}


.intro {
    display: flex;
    flex-direction: column;
    min-height: 50vh;
    color: rgb(190, 188, 188);
    margin: 50px 0;
}

.intro h1 {
    font-family: "Beaufort", sans-serif;
    font-size: 100px;
}

.intro p {
    font-family: "Beaufort", sans-serif;
    font-size: 40px;
    margin-top: 20px;
}

.intro p a:hover {
    color: #977f30
}

.admin-login a{
    position: absolute;
    bottom: 20px;
    left: 20px;
    font-size: 18px;
    color: rgb(48, 47, 47);
}

.admin-login a:hover {
    color: rgb(167, 167, 167)
}

.admin-logout a{
    position: absolute;
    bottom: 20px;
    left: 20px;
    font-size: 24px;
    color: rgb(48, 47, 47);
}

.admin-logout a:hover {
    color: rgb(167, 167, 167)
}

.region-nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    padding: 0; 
}


.region-nav li {
    flex: 0 0 calc(25% * 10px);
    margin: 0 1.5%;
    text-align: center;
    box-sizing: border-box;
}

.region-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 80%;
    margin: 5px 5px;
}

.region-nav img {
    width: 60px;
    height: 60px;
    margin-right: 5px;
}

.region-nav a:hover {
    color: #977f30;
    background-color: rgb(31, 29, 29);
}

.login {
    color: aliceblue;
}

.tables {
    margin-top: 5%;
}

.tables div {
    display: none;
}

thead {
    font-size: 150%;
}


tr td {
    color: black;
    text-align: left;
    border: solid;
    border-color: black;
    font-size: 115%;
}

#bandlecity_canons {
    border-collapse: collapse;
    width: 60%;
}

#bandlecity th, td {
    border: 1px solid black;
    color: rgb(125, 132, 44);
    padding: 8px;
    border: transparent
}

#bandlecity_ocs {
    margin-top: 3%;
    margin-bottom: 5%;
    border-collapse: collapse;
    width: 30%;
}

#bandlecity_ocs td {
    background-color: rgb(137, 167, 53);
}

#bilgewater_canons {
    border-collapse: collapse;
    width: 60%;
}

#bilgewater th, td {
    border: 1px solid black;
    color: rgb(218, 129, 88);
    padding: 8px;
    border: transparent
}

#bilgewater_ocs {
    margin-top: 3%;
    margin-bottom: 5%;
    border-collapse: collapse;
    width: 30%;
}

#bilgewater_ocs td {
    background-color: rgb(182, 105, 69);
}

#demacia_canons {
    border-collapse: collapse;
    width: 60%;
}

#demacia th, td {
    border: 1px solid black;
    color: rgb(214, 206, 192);
    padding: 8px;
    border: transparent
}

#demacia_ocs {
    margin-top: 3%;
    margin-bottom: 5%;
    border-collapse: collapse;
    width: 30%;
}

#demacia_ocs td {
    background-color: rgb(236, 218, 175);
}


#freljord_canons {
    border-collapse: collapse;
    width: 60%;
}

#freljord th, td {
    border: 1px solid black;
    color: rgb(192, 232, 247);
    padding: 8px;
    border: transparent
}

#freljord_ocs {
    margin-top: 3%;
    margin-bottom: 5%;
    border-collapse: collapse;
    width: 30%;
}

#freljord_ocs td {
    background-color: rgb(196, 237, 252);
}

#ionia_canons {
    border-collapse: collapse;
    width: 60%;
}

#ionia th, td {
    border: 1px solid black;
    color: rgb(228, 184, 196);
    padding: 8px;
    border: transparent
}

#ionia_ocs {
    margin-top: 3%;
    margin-bottom: 5%;
    border-collapse: collapse;
    width: 30%;
}

#ionia_ocs td {
    background-color: rgb(223, 123, 158);
}

#ixtal_canons {
    border-collapse: collapse;
    width: 60%;
}

#ixtal th, td {
    border: 1px solid black;
    color: rgb(164, 218, 120);
    padding: 8px;
    border: transparent
}

#ixtal_ocs {
    margin-top: 3%;
    margin-bottom: 5%;
    border-collapse: collapse;
    width: 30%;
}

#ixtal_ocs td {
    background-color: rgb(107, 155, 68);
}

#noxus_canons {
    border-collapse: collapse;
    width: 60%;
}

#noxus th, td {
    border: 1px solid black;
    color: rgb(199, 86, 84);
    padding: 8px;
    border: transparent
}

#noxus_ocs {
    margin-top: 3%;
    margin-bottom: 5%;
    border-collapse: collapse;
    width: 30%;
}

#noxus_ocs td {
    background-color: rgb(173, 62, 62);
}

#piltover_canons {
    border-collapse: collapse;
    width: 60%;
}

#piltover th, td {
    border: 1px solid black;
    color: rgb(214, 206, 192);
    padding: 8px;
    border: transparent
}

#piltover_ocs {
    margin-top: 3%;
    margin-bottom: 5%;
    border-collapse: collapse;
    width: 30%;
}

#piltover_ocs td {
    background-color: rgb(255, 186, 95);
}

#shadowisles_canons {
    border-collapse: collapse;
    width: 60%;
}

#shadowisles th, td {
    border: 1px solid black;
    color: rgb(22, 216, 206);
    padding: 8px;
    border: transparent
}

#shadowisles_ocs {
    margin-top: 3%;
    margin-bottom: 5%;
    border-collapse: collapse;
    width: 30%;
}

#shadowisles_ocs td {
    background-color: rgb(12, 195, 161);
}

#shurima_canons {
    border-collapse: collapse;
    width: 60%;
}

#shurima th, td {
    border: 1px solid black;
    color: rgb(238, 199, 116);
    padding: 8px;
    border: transparent
}

#shurima_ocs {
    margin-top: 3%;
    margin-bottom: 5%;
    border-collapse: collapse;
    width: 30%;
}

#shurima_ocs td {
    background-color:rgb(223, 176, 75);
}

#targon_canons {
    border-collapse: collapse;
    width: 60%;
}

#targon th, td {
    border: 1px solid black;
    color: rgb(131, 91, 207);
    padding: 8px;
    border: transparent
}

#targon_ocs {
    margin-top: 3%;
    margin-bottom: 5%;
    border-collapse: collapse;
    width: 30%;
}

#targon_ocs td {
    background-color: rgb(97, 82, 218);
}

#void_canons {
    border-collapse: collapse;
    width: 60%;
}

#void th, td {
    border: 1px solid black;
    color: rgb(185, 111, 207);
    padding: 8px;
    border: transparent
}

#void_ocs {
    margin-top: 3%;
    margin-bottom: 5%;
    border-collapse: collapse;
    width: 30%;
}

#void_ocs td {
    background-color: rgb(171, 76, 199);
}

#zaun_canons {
    border-collapse: collapse;
    width: 60%;
}

#zaun th, td {
    border: 1px solid black;
    color: rgb(49, 229, 33);
    padding: 8px;
    border: transparent
}

#zaun_ocs {
    margin-top: 3%;
    margin-bottom: 5%;
    border-collapse: collapse;
    width: 30%;
}

#zaun_ocs td {
    background-color: rgb(38, 178, 25);
}

#runeterra_canons {
    border-collapse: collapse;
    width: 60%;
}

#runeterra th, td {
    border: 1px solid black;
    color: rgb(182, 159, 98);
    padding: 8px;
    border: transparent
}

#runeterra_ocs {
    margin-top: 3%;
    margin-bottom: 5%;
    border-collapse: collapse;
    width: 30%;
}

#runeterra_ocs td {
    background-color: rgb(167, 138, 81);
}


@media only screen and (max-width: 768px) {
    header {
        flex-direction: column;
        padding: 20px 3%;
    }

    .logo {
        margin-bottom: 15px;
        height: 20%;
        width: 20%;
    }

    .nav_links {
        gap: 2px;
    }

    li {
        padding: 0 10px;
    }
    
    li a {
        font-size: 90%;
    }

    .intro h1 {
        font-size: 60px;  
    }

    .intro p {
        font-size: 25px;  
    }

    .region-nav a {
        font-size: 90%; 
    }

    #bandlecity_canons,
    #bilgewater_canons,
    #demacia_canons,
    #freljord_canons,
    #ionia_canons,
    #ixtal_canons,
    #noxus_canons,
    #piltover_canons,
    #shadowisles_canons,
    #shurima_canons,
    #targon_canons,
    #void_canons,
    #zaun_canons,
    #runeterra_canons {
        width: 90%;  /* Table width */
    }

    /* Table font size */
    tr td {
        font-size: 90%;
    }

    .admin-login a, .admin-logout a {
        font-size: 16px;
        position: fixed;
        bottom: 10px;
        left: 10px;
    }
}

@media only screen and (max-width: 480px) {
    .intro h1 {
        font-size: 40px;
    }

    .intro p {
        font-size: 18px;
    }

    .region-nav li {
        margin: 5px 0;
    }

    .region-nav img {
        width: 40px; 
        height: 40px;
    }

    .region-nav a {
        font-size: 80%;
    }

    .admin-login a, .admin-logout a {
        font-size: 16px;
        position: absolute;
        bottom: 10px;
        left: 10px;
    }

}