* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 25px;
    height: 100%;
    width: 100%;
    color: white;
    background-image: url(../../img/img_6.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
}

@font-face {
    font-family: "Timer";
    src: url(../font/DSEG7Classic-Bold.ttf) format("truetype");
}

body {
    backdrop-filter: blur(2px);
    background-color: rgba(0, 0, 0, 0.7);
}

header {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1% 0;
    background-color: rgb(180, 15, 15);
}

header h1 {
    margin: 0 2%;
}

header h3 {
    margin-left: auto;
}

.second {
    margin: 0 2%;
    color: black;
    font-family: "Timer";
    border: gray, solid, 5px;
    padding: 0.5%;
    background: radial-gradient( closest-side, #fff, red);
    border-radius: 10px;
    font-size: 25px;
    /* --w: calc(100% - 20px);
    --g: gray 20px, transparent 20px var(--w), gray var(--w);
    background: linear-gradient( 90deg, var(--g)) 0 0/100% 3px, linear-gradient( 90deg, var(--g)) 0 100%/100% 3px, linear-gradient(0, var(--g)) 0 0/3px 100%, linear-gradient(0, var(--g)) 100% 0/3px 100%, radial-gradient( closest-side, #fff, red);
    background-repeat: no-repeat; */
}

div.visuals {
    width: 100%;
    height: 100%;
    background-image: url(../img/visuals_01.png);
    /* backdrop-filter: drop-shadow( 0 0 20px #999); */
    filter: drop-shadow( 0px 0px 20px #999);
    background-repeat: no-repeat;
    background-position: center center;
    padding-top: 40%;
    margin-bottom: 3%;
}

div.visuals ul {
    border: solid 1px rgb(180, 15, 15);
    width: 70%;
    margin:  0 15%;
    text-align: center;
    list-style: none;
    /* display: flex;
    flex-wrap: wrap;
    justify-content: center; */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    filter: none;
}

div.visuals ul li {
    background-color: rgba(180, 15, 15, 0.5);
    background: radial-gradient( closest-side, rgba( 180, 15, 15, 0.5 ), rgba( 180, 15, 15, 0.4 ), rgba(0, 0, 0, 0) );
    border: solid 1px rgb(180, 15, 15);
    height: 50px;
}

div.visuals ul li a {
    display: flex;
    justify-content: center;
    align-content: center;
    color: white;
    text-decoration: none;
    display: block;
    height: 100%;
    font-weight: bold;

    i.fa-brands {
        margin: 0 2%;
    }

    i.fa-x-twitter{
        border: solid rgb(180, 15, 15) 2px;
        font-size: 15px;
        aspect-ratio: 1/1;
        color: white;
        background-color: black;
        padding: 2%;
        border-radius: 20%;
    }
/* 
    i.fa-twitter {
        font-size: 15px;
        aspect-ratio: 1/1;
        color: white;
        background-color: #1DA1F2;
        padding: 2%;
        border-radius: 20%;
    } */

    i.fa-youtube {
        border: solid rgb(180, 15, 15) 2px;
        font-size: 15px;
        aspect-ratio: 1/1;
        color: #DA1725;
        background-color: white;
        padding: 2.6% 2% 1.5% 2%;
        border-radius: 20%;
    }

    i.fa-tiktok {
        font-size: 15px;
        color: white;
        position: absolute;
        margin: -20% 0 0 -24%;
    }

    i.fa-tiktok:first-child {
        filter: drop-shadow( 1.25px 1.25px 0px #28ffff);
    }

    i.fa-tiktok:last-child {
       filter: drop-shadow( -0.5px -0.5px 0px #fe2d52);
    }

    span.bg-tiktok {
        background-color: black;
        border: solid rgb(180, 15, 15) 2px;
        padding: 1%;
        width: 0.2%;
        aspect-ratio: 1/1;
        border-radius: 20%;
        position: absolute;
        margin-left: -3%;
        margin-top: -0.25%;
    }

    i.fa-instagram {
        border: solid rgb(180, 15, 15) 2px;
        font-size: 15px;
        aspect-ratio: 1/1;
        color: white;
        background: linear-gradient(to right,
            rgba(247, 207, 0, 0.7),
            rgba(246, 37, 2, 0.7) 45%,
            rgba(182, 47, 82, 0.7) 75%,
            rgba(113, 58, 166, 0.7));
            padding: 2% 2.5%;
            border-radius: 20%;
    }

}

div.visuals ul li a:hover {
    color: red;
}

div.visuals ul li:first-child a {
    color: red;
}

div.visuals ul li:first-child a:hover {
    color: white;
}

img.title {
    width: 50%;
    margin: 0 25%;
}

div.item {
    margin: 0 3% 3% 3%;
    background-color: #4a585950;
    border: solid 2px #4a5859;
}

div.title {
    background-color: rgb(180, 15, 15);
    border-bottom: solid 2px #4a5859;
    padding: 1%;
}

div.schedule {
    border-top: solid 2px #4a5859;
}

div.main {
    background-image: linear-gradient( 0deg, transparent calc( 100% - 1px ), #4a5859 calc( 100% - 1px ) ), linear-gradient( 90deg, transparent calc( 100% - 1px ), #4a5859 calc( 100% - 1px ) );
    background-size: 10px 10px;
    background-repeat: repeat;
    background-position: center center;
    margin: 1%;
    padding: 2%;
}

ul li {
    margin: 0.5%;
}

img.image {
    width: 40%;
    border: solid 3px rgb(180, 15, 15);
    border-radius: 5px;
}

a.discord {
    padding: 1%;
    margin: 1%;
    width: 10%;
    text-align: center;
    align-content: center;
    justify-content: center;
    border-radius: 15px;
    border: solid 5px white;
    background-color: #5769E9;
    color: white;
    text-decoration: none;
}

footer {
    background-color: rgb(180, 15, 15);
    display: flex;
    justify-content: center;
    align-content: center;

    ul {
        margin: 5%;
        width: calc(100%/3);
        margin-bottom: 10%;
        li {
            margin: 5% 0;
            a {
                text-decoration: none;
                color: white;
            }
        }
    }
/*
    ul:nth-child(2) {
        li {
            margin:5% 0;

            a {
                text-decoration: none;
                color: white;
            }
        }

        i.fa-brands {
            margin: 0 2%;
        }

        i.fa-x-twitter{
            font-size: 15px;
            aspect-ratio: 1/1;
            color: white;
            background-color: black;
            padding: 2.5%;
            border-radius: 20%;
        }
        i.fa-twitter {
            font-size: 15px;
            aspect-ratio: 1/1;
            color: white;
            background-color: #1DA1F2;
            padding: 2%;
            border-radius: 20%;
        }

        i.fa-youtube {
            font-size: 15px;
            aspect-ratio: 1/1;
            color: #DA1725;
            background-color: white;
            padding: 2.6% 2.1% 1.5% 2.1%;
            border-radius: 20%;
        }

        li:nth-child(3) {
            margin-left: 13.5%;
        }
        
        i.fa-tiktok {
            font-size: 15px;
            color: white;
            position: absolute;
            margin: -20% 0 0 -24%;
            padding-left: 3%;
        }

        i.fa-tiktok:first-child {
            filter: drop-shadow( 1.25px 1.25px 0px #28ffff);
        }

        i.fa-tiktok:last-child {
            filter: drop-shadow( -0.5px -0.5px 0px #fe2d52);
        }

        span.bg-tiktok {
            background-color: black;
            padding: 1%;
            width: 0.3%;
            aspect-ratio: 1/1;
            border-radius: 20%;
            position: absolute;
            margin-left: -2.75%;
            margin-top: -0.25%;
            margin-right: 2%;
        }

        i.fa-instagram {
            font-size: 15px;
            aspect-ratio: 1/1;
            color: white;
            background: linear-gradient(to right,
                rgba(247, 207, 0, 0.7),
                rgba(246, 37, 2, 0.7) 45%,
                rgba(182, 47, 82, 0.7) 75%,
                rgba(113, 58, 166, 0.7));
                padding: 2.5%;
                border-radius: 20%;
        }
    } */

    span.copyright {
        text-align: center;
        position: absolute;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.1);
        width: 100%;
        padding-top: 1%;
        padding-bottom: 1%;

        a {
            color: white;
        }
    }
}

@media ( max-width: 767px ) {
    html {
        scroll-padding-top: 130px;
    }

    header {
        padding: 1% 0;
    }

    header h1 {
        margin-left: 2%;
        font-size: 15px;
    }

    header h3 {
        font-size: 10px;
    }

    .second {
        border: gray, solid, 3px;
        margin: 2%;
        border-radius: 7px;
        font-size: 12px;
    }

    div.visuals {
        padding-top: 60%;
        margin-bottom: 5%;
        background-image: url(../img/visuals_01.png);
        filter: drop-shadow( 0px 0px 20px #999);
        background-size: 80%;
    }

    div.visuals ul {
        width: 90%;
        margin: 0 5%;
    }

    div.visuals ul li {
        height: 40px;
    }

    div.visuals ul li a {
        font-size: 10px;
    }

    img.title {
        width: 90%;
        margin: 5%;
    }

    div.item {
        margin: 0 5% 5% 5%;
        border: solid 3px #4a5859;
    }

    div.title {
        border-bottom: solid 3px #4a5859;
        padding: 1%;
        padding-left: 2%;
    }

    div.schedule {
        border-top: solid 3px #4a5859;
    }

    div.main {
        background-image: linear-gradient( 0deg, transparent calc( 100% - 1px ), #4a5859 calc( 100% - 1px ) ), linear-gradient( 90deg, transparent calc( 100% - 1px ), #4a5859 calc( 100% - 1px ) );
        background-size: 20.2px 20.2px;
        margin: 3%;
        padding: 1%;
    }

    div.main ul li {
        margin: 2% 0 2% 5.5%;
        font-size: 15px;
    }

    img.image {
        width: 95%;
        margin: 1%;
    }

    a.discord {
        border-radius: 10px;
        padding: 3%;
    }

    footer {
        ul {
            margin-bottom: 20%;
            
            li {
                margin: 2% 0;
            }
        }
    }
}