@font-face {
	font-family: "Cap Rom";
    src: url('/back/type/Felix-Farjas/Capitale-Romaine/CapitaleRomaineFelixFarjasRegular-Regular.woff') format('woff'), url('/back/type/Felix-Farjas/Capitale-Romaine/CapitaleRomaineFelixFarjasRegular-Regular.woff2') format('woff2'), url('/back/type/Felix-Farjas/Capitale-Romaine/CapitaleRomaineFelixFarjasRegular-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    text-rendering: optimizeLegibility;
    font-display: swap
  }

* {
	box-sizing: border-box;
}

body {
	font-family: "Cap Rom";
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	height: 100%;
    width: 100%;
    font-size: 3em;
    color: #c8dbed;
    background-color: black;
    overflow: hidden;
    margin:0
}

h1 {
    font-variation-settings: 'wght' 50, 'wdth' 100;
    animation: breathe 5s cubic-bezier(.2,0,.1,.99) infinite forwards;
    transition-duration: 1s;
    transition-property: letter-spacing;
    cursor: ew-resize;
  }
  
  h1:hover{
    letter-spacing: .5em;
  }
  
  @keyframes breathe {

    25% {
        font-variation-settings: 'wght' 70, 'wdth' 200;
      }


    50% {
      font-variation-settings: 'wght' 180, 'wdth' 200;
    }
    75% {
        font-variation-settings: 'wght' 180, 'wdth' 100
        ;
      }
  
    100% {
      font-variation-settings: 'wght' 70, 'wdth' 100;
    }
  }

  @media (max-Width:1250px) {
    html {
      font-size: 11px
    }}
  @media (max-Width:1000px) {
    h4 {
      font-size: 20px
    }}

  @media (max-Width:770px) {
    html {
      font-size: 9px;
    }
    }
  @media (max-width: 380px) {
    h4 {
      font-size: 16px
    }
  
    html {
      font-size: 7px
    }
  }
  
  @media (max-width: 230px) {
    h4 {
      font-size: 16px
    }
  
    html {
      font-size: 5px
    }
  }
  
  @media (max-height: 450px) and (max-width: 770px) {
    h4 {
      font-size: 16px
    }
  }
  
  @media (max-height: 300px) and (max-width: 770px) {
    h4 {
      font-size: 16px
    }
  }