:root {
  --nessaFarbe:rgb(187, 229, 255);
  --padiFarbe: rgb(255, 206, 157);
  --ryoFarbe: rgb(255, 190, 212);

  --nessaDark: rgb(87, 190, 255);
  --padiDark: rgb(255, 130, 56);
  --ryoDark: rgb(255, 87, 143);
  
  --nessaShadow: #4697CD;
  --padiShadow: #CD682D;
  --ryoShadow: #CD4673;
  
  --timer-width: 400px;

  --book-height: 280px
}

@font-face {
    font-family: 'NewAmsterdam';
    src: url('../fonts/NewAmsterdam-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Chalkboard';
    src: url('../fonts/ChalkboardSE-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'TNGTitle';
    src: url('https://lodes.net/fonts/TNGTitle/TNG_Title.woff') format('woff');
}

body {
    font-family: 'Chalkboard';
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 500px;
    width: 619px;
    margin: 0;
    background-color: transparent;
}

#text {
    font-size: 40px;
    color: #F4EBCC;
}

#timer {
    justify-content: center;
    width: 310px;
    font-size: 100px;
    color: #F4EBCC;
    height: 300px;
}

#message {
    font-size: 80px;
    color: #F4EBCC;
    display: none;
    padding: 5px 25px;
}

.settings {
    font-family: 'Chalkboard', sans-serif;
    right: 0;
    padding: 15px;
    border-radius: 5px;
    background-color: #F4EBCC;
    border: 1px solid black;
}

.button {
    background-color: #F4EBCC;
    padding: 10px 15px;
    margin: 10px;
    border-radius: 5px;
    border: 1px solid black;
}

p {
    color: black;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}