@charset "utf-8";
/* CSS Document */
@charset "utf-8";
/*==================================================
GLOBULAR RECORDS
LEGACY SECTION
legacy-section.css
==================================================*/


/*==================================================
SECTION
==================================================*/
@font-face{
    font-family:"League Gothic";
    src:url("fonts/league-gothic.regular.ttf") format("truetype");
}
.legacy-section{

    position:relative;

    width:100%;

    min-height:100vh;

    background:#050505;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    padding:100px 5vw;

}


/*==================================================
BACKGROUND TEXTURE
==================================================*/

.legacy-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at center,
            rgba(255,255,255,.035),
            transparent 65%
        ),

        linear-gradient(
            rgba(255,255,255,.01),
            rgba(0,0,0,0)
        );

    pointer-events:none;

}


.legacy-section::after{

    content:"";

    position:absolute;

    inset:0;

    background-image:

        radial-gradient(
            rgba(255,255,255,.02) 1px,
            transparent 1px
        );

    background-size:5px 5px;

    opacity:.12;

    pointer-events:none;

}


/*==================================================
CONTENT
==================================================*/

.legacy-content{

    position:relative;

    z-index:2;

    width:min(1500px,92%);

    margin:auto;

    text-align:center;

    opacity:0;

    transform:

        translateY(120px)

        scale(.94);

    filter:blur(20px);

    will-change:

        transform,

        opacity,

        filter;

}


/*==================================================
TITLE
==================================================*/

.legacy-title{

    margin:0;

    font-family:"League Gothic", sans-serif;

    font-size:clamp(2rem,6vw + 0.5rem,6.5rem);

    line-height:.9;

    font-weight:400;

    letter-spacing:-1px;

    text-transform:uppercase;

    text-align:center;

    color:#fff;

}



/*==================================================
INDIVIDUAL LINES
==================================================*/

.legacy-title span{

    display:block;
	white-space: nowrap; /* keeps each sentence on one line */

}


/*==================================================
LINE SPACING
==================================================*/

.legacy-title span:not(:last-child){

    margin-bottom:.08em;

}


/*==================================================
PREMIUM TEXT SHADOW
==================================================*/

.legacy-title{

    text-shadow:

        0 0 40px rgba(255,255,255,.04),

        0 10px 40px rgba(0,0,0,.55);

}


/*==================================================
SUBTLE HIGHLIGHT
==================================================*/

.legacy-content::after{

    content:"";
	 

    position:absolute;

    left:50%;

    top:50%;

    width:75%;

    height:70%;

    transform:

        translate(-50%,-50%);

    background:

        radial-gradient(

            circle,

            rgba(165,76,196,.08),

            transparent 72%

        );

    filter:blur(80px);

    pointer-events:none;

    z-index:-1;

}


/*==================================================
RESPONSIVE
==================================================*/


@media (max-width:1200px){

    .legacy-section{

        min-height:90vh;

        padding:150px 5vw;

    }

}


@media (max-width:992px){

    .legacy-section{

        min-height:80vh;

        padding:120px 6vw;

    }

     

  .about-title span {
    display: block; /* if you want each line on its own */
  }

}


@media (max-width:768px){

   

  .about-title span { font-size: clamp(1.2rem, 8vw, 7rem);
    display: block; /* if you want each line on its own */
  }

}


@media (max-width:480px){

    .legacy-section{ font-size: clamp(1.2rem, 8vw, 7rem);

        padding:90px 20px;

        min-height:100vh;

    }

    

 .legacy-title span{
    display:block;
}
  }

}
