:root {
            font-size: 20px;
        }

        body {
            background-image: url(media/BGs/BackGround_SILENT.jpeg);
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
            background-position: center;

            font-family: Helvetica, sans-serif;
            /*"Kreon" a játék betűtípusa */
        }

        .navbar {
            max-width: 90%;
            /*max-width: 1200px;*/
            margin: 20px auto;
            text-align: center;
        }

        h1, h2, h3, h4 {
            margin-bottom: 10px;
        }

        h1, h2, h3 {
            text-align: center;
        }

        li {
            margin-bottom: 10px;
        }

        figcaption {
            text-align: center;
        }

        @media print {
            .noprint {
                display: none;
            }

            a::after {
                content: " (" attr(href) ")";
            }

            .table_ofc a::after {
                content: none;
            }
        }


        .box {
            background-image: url(media/BGs/parchment_hor_l1.png);
            background-repeat: no-repeat;
            background-attachment: scroll;
            background-size: 100% 100%;
            padding: 20px 60px 60px;
            margin: 0px 5px;
        }

        .box.long {
            background-image: url(media/BGs/parchment_ver_squashed2.png);
            background-repeat: no-repeat;
            background-attachment: scroll;
            background-size: 100% 100%;
            padding: 80px 60px;
            margin: 0px 5px;
        }

        /*incorrect*/
        .box p {
            padding: 0px 20px;
        }

        .button {
            border: outset;
            border-width: 6px 5px 6px 5px;
            border-color: #97bfb1 #648e89 #34665f #34665f;
            color: #FFEF24;
            padding: 15px 40px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 1.4rem;
            margin: 0px 0px;
            cursor: pointer;
        }

        .button1 {background-color: #506D6B;} /* default */

        .button1:hover {
            color: #7AFFA9;
            background-color: #034958;
            /* old settings
            color: #FFEF24;
            background-color: #135249;
            */
        }

        .current {
            color: #ffd329;
            background-color: #135249;
            text-decoration: underline overline;
        }

        .dropdown-content .current {
            text-decoration: underline;
        }

        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            border: outset;
            border-width: 4px 5px 4px 5px;
            border-color: #97bfb1 #648e89 #34665f #34665f;
            display: none;
            position: absolute;
            background-color: #506D6B;
            color: #FFEF24;
            min-width: 100px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            padding: 0px 0px;
            cursor: pointer;
            z-index: 1;
        }

        .dropdown-content a {
            color: #FFEF24;
            padding: 12px 30px;
            text-decoration: none;
            display: block;
        }

        .dropdown-content a:hover {
            color: #7AFFA9;
            background-color: #034958;
            /*  old settings
            color: #FFEF24;
            background-color: #135249;
            */
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }

        table{
            border-collapse: collapse;
        }

        th, td {
            border: 2px solid black;
            padding: 8px 10px;
        }

        td {
            padding: 10px 10px;
            background-color: rgba(255,255,255,0.6);
        }

        details {
            padding: 5px 30px;
        }

        .starter tr th {
            background-color: #f2f2f2;
        }

        .common tr th {
            background-color: #dddddd;
        }

        .uncommon tr th {
            background-color: #c5efee;
        }

        .rare tr th {
            background-color: #ffde59;
        }

        .skiplink {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }

        img {
            float: right;
            opacity: 0.8;
            margin: 20px 30px 20px 20px;
            max-width: 400px;
            height: auto;
        }