*,
:after,
:before {
    border: 0 solid #e5e7eb;
    box-sizing: border-box
}

:after,
:before {
    --tw-content: ""
}

:after,
:before {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgba(59, 130, 246, .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style:
}

::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgba(59, 130, 246, .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style:
}


section 
{
    padding-bottom: 2rem;
    padding-top: 2rem;
}

#app {
    /* background-image: url('pat.png'); */
    background-size: cover;
    min-height: 100vh;
    background-color: #7a1128;

}

#app .logo {
    backdrop-filter: blur(8.2px);
    -webkit-backdrop-filter: blur(8.2px);
    /* background: hsla(0, 0%, 100%, .38); */
    /* box-shadow: 0 4px 30px rgba(0, 0, 0, .1) */
}

.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
    width: 100%;
}

.relative {
    position: relative
}
.info
 {
    display: flex;
    justify-content: center;
    align-items: center;
    /* color : #fff; */
    flex-direction: column
 }

 .logo 
 {
    width: 12rem;
    height: 10rem;

    display: flex;
    justify-content: center;
    align-items: center;
    /* padding: 1.25rem; */
    margin-bottom: 4rem;
    padding-top: 4rem;
    /* background-color: #7a1128; */
 }

 .logo img {
    width: 12rem;
    /* border-radius: 9999px; */

 }

 .icon img {
    width:25px;
    height :25px;
 }

 #links-list {
    background-color: url('pat.png');
 }
 #links-list .list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-left: auto;
    margin-right: auto;
    width: 100%
 }

 #links-list .list .link {
    align-items: center;
    backdrop-filter: blur(7.9px);
    -webkit-backdrop-filter: blur(7.9px);
    background: hsla(0, 0%, 100%, .24);
    border-radius: .25rem;
    box-shadow: 0 4px 30px rgba(0, 0, 0, .1);
    color: #fff;
    display: flex;
    font-weight: 700;
    justify-content: space-between;
    padding: .5rem 1.25rem;
    --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.icon {
    font-size: 1.25rem;
    line-height: 1.75rem
}

ul {
    list-style: none;
    margin: 0;
    padding: 0
}
a {
    color: inherit;
    text-decoration: inherit
}

ul.other-list {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center
}

.other-list a {
    align-items: center;
    display: flex;
    font-weight: 700;
    gap: .75rem;
    --tw-text-opacity: 1;
    color: #fff;
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.copy,
.other-list a .icon {
    align-items: center;
    display: flex;
    justify-content: center;
    --tw-text-opacity: 1;
    color:#fff;
    
}

.other-list a .icon {
    border-radius: 9999px;
    height: 2rem;
    width: 2rem;
    --tw-bg-opacity: 1;
    background-color: #f2e8e6;
    color: #b89774;
    font-weight: bold;
}

.copy {
    color: #fff;
    color: rgb(255 255 255/var(--tw-text-opacity));
    font-size: .875rem;
    gap: .75rem;
    line-height: 1.25rem
}


.p-1 {
    padding: .25rem
}


.pt-4 {
    padding-top: 1rem
}


@media (min-width:768px) {
    #links-list .list {
        width: 80%
    }
}

@media (min-width:1024px) {
    #links-list .list {
        width: 50%
    }
}

#links-list .list li {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    transition-duration: .3s
}

#links-list .list li:hover {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(1.05) scaleY(1.05);
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

@media (min-width:640px) {
    .container {
        max-width: 640px
    }
}

@media (min-width:768px) {
    .container {
        max-width: 768px
    }
}

@media (min-width:1024px) {
    .container {
        max-width: 1024px
    }
}

@media (min-width:1280px) {
    .container {
        max-width: 1280px
    }
}

@media (min-width:1536px) {
    .container {
        max-width: 1536px
    }
}