:root{
  --primary: hsl(0, 100%, 88%);
  --secondary: hsl(0, 100%, 66%); 
  --dark: hsl(0, 100%, 33%); 
}

@font-face {
    font-family: 'Futura XBlk BT';
    src: url('https://fonts.cdnfonts.com/css/futura-md-bt');
}

*{
    font-family: 'Futura Md BT';
    transition: all 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sub{
    left: max(25px, calc(50vw - 600px));
}

.toggle{
    position: absolute;
    top: 25px;
    right: max(25px, calc(50vw - 600px));
    background-color: var(--primary);
    padding: 15px;
    width:75px;height:75px;
    box-sizing: border-box;
    border-radius: 50%;
    margin: 0;
    cursor: pointer;
}



body{
    margin:0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--secondary);

}

h3{
    font-size: min(14rem,55vw);
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;    
    box-sizing: border-box;
    width: min(22rem,85vw);
    background-color: var(--primary);
    border-radius: 50%;
    cursor: pointer;
    user-select:none;
    text-align: center;
}

h3:hover{
    width: min(26rem,88vw);
    font-size: min(18rem,63vw);
}

html
{
  -webkit-tap-highlight-color:rgba(255,255,255,.1);
}