/*
  Single-column redesign, no images, new green color, 
  locally hosted News Cycle fonts.
*/

/* 1) Local Font Imports --------------------------------- */
@font-face {
    font-family: 'News Cycle';
    src: url('../fonts/NewsCycle-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'News Cycle Bold';
    src: url('../fonts/NewsCycle-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
  }

  :root {

    --greentext:                    #00ffb1;
    
    /* Scaling the text */
    --text-size-min:                2rem;
    --text-size-preferred:          19vw;
    --text-size-max:                19rem;

    --fontsize:                     clamp(var(--text-size-min), var(--text-size-preferred), var(--text-size-max));

    --line-size-min:                0.01rem;
    --line-size-preferred:          0.25rem;
    --line-size-max:                0.7rem;

    --line-size-distance:           clamp(0.4rem, 0.5rem, 1rem);
    
    --underlinesize:                clamp(var(--line-size-min), var(--line-size-preferred), var(--line-size-max));
    

  }
  
  /* 2) Base Styles ---------------------------------------- */
  html, body {
    margin:                         0;
    padding:                        0;
    background-color:               #000;     
    color:                          var(--greentext); 
    font-family:                    'News Cycle Bold', sans-serif;
    height:                         100%;           
  }

  a {
    color:                          var(--greentext); 

    text-decoration:                underline;
    /* text-decoration-thickness:      var(--line-size-max);    */
    text-underline-offset:          40%; 
    
    text-decoration-thickness:      15%;

  }

  a:hover {

    /* text-decoration:                none; */
    
  }
  
  /* 3) Container (Full-Page Single Column) ---------------- */
  .container {
    width: 100%;
    min-height:                     100vh;              /* Fill the full browser height */
    padding:                        2vw;
    box-sizing:                     border-box;


    display:                        flex;
    flex-direction:                 column;             /* Stack items vertically */
    justify-content:                flex-start;         /* Center vertically */
    align-items:                    flex-start;         /* Left-align the text */
    
    border:                         0px solid gold;
  }
  
  /* 4) Headings (Large & Responsive) ---------------------- */
  h1 {
    /* Adjust as needed for your desired max/min sizes */
    font-size:                      var(--fontsize);
    font-weight:                    700;
    line-height:                    1.1;
    margin:                         0;
    width:                          100%; 

    /* text-decoration-thickness:      inherit; */

    border:                         0px solid red;

    overflow-wrap: break-word; /* Preferred modern solution */
  /* Alternatively, for more aggressive breaking: */
  /* word-break: break-all; */

  }