:root {
  box-sizing: border-box;
  font-size: calc(1vw + 0.6em);
}

*,
::before,
::after {
  box-sizing: inherit;
}

  
body {    
    
    font-family: "Roboto", sana-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
    font-variation-settings: "wdth" 100;    
    text-align: center;
    background-color: #dbdecb;
    line-height: 1.4;
    letter-spacing: 0.01em;

}


a {
    text-decoration: none;   
}

a:hover {
    text-decoration: underline;
}

.center-global {
    max-width: 480px;
    margin: 0 auto;
    background: #f15d58 url(../images/bg-main.gif) repeat repeat 0 0;
  

}

.page-header {
    padding: 0.4em 1em;
    
}

.title {
margin: -1.5em 0;
}
 
.title > h1 {
    font-family: "Lobster", sans-serif; 
    font-size: 2rem;
    font-style: normal;
    color: #363635;    
}

h3 {
    margin: 0 auto 0.5em auto;
    color: #534f49;
}

.btn {
    
    margin: 2em 0;
}
    
.play-btn {
    display: inline-flex;
    align-items: center;
    background-color: orange;
    color: white;
    border: none;
    border-radius: 0.6em;
    padding: 0.6em 1.2em;
    margin: 1.2em 0 0.6em 0;
    cursor: pointer;
    gap: 10px 15px;
    transition: background 0.3s;
    transform: rotate(4deg);
    box-shadow: 0.25em 0.25em 0.5em rgba(0, 0, 0, 0.1);
    
    }
    
.play-btn:hover {
    background-color: #ffde16;
    }

.play-icon {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.4em 0 0.4em 0.8em;
    border-color: transparent transparent transparent white;

}
    
.random {
    
}
    
.randomString {
    position: relative;
    height: 15em;
    width: 80%;  /*336, когда 480 - это 100% */  
    margin: 2em auto 0.5em auto;
    background: #ededc7;
    transform: rotate(-3deg);    
    padding: 1.2em;
    box-shadow: 0.25em 0.25em 0.6em rgba(0, 0, 0, 0.5);
        
    background-image: linear-gradient(#a7a793 1px, transparent 1px); /* Линия */
    background-size: 100% 1em; /* Высота строки */
    line-height: 1em; /* Соответствие строке */

    font-family: "Caveat", cursive; 
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
  
}

.randomString::after {
    content: '';
    position: absolute;
    top: -15px;
    left: 0;
    width: 100%;
    height: 20px;
    background:
       radial-gradient(circle at 10px -5px, transparent 12px, #ededc7 13px);
    background-size: 30px 20px;
    
}

footer {
    background-color: #414042;
    margin: -1.5em 0 0 0;
    padding: 0.1em 0.6em;
    color: #68696b;
    text-align: center;
    font-size: 0.6rem;    

}

.footer-inside {
    width: 100%;
}