@font-face {
    font-family: "Libre Baskerville";
    src: url('fonts/LibreBaskerville.ttf') format('truetype');
}

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

@font-face {
    font-family: "Libre Baskerville";
    src: url('fonts/LibreBaskerville-Bold.ttf') format('truetype');
    font-weight: 600;
}

* {
    font-family: "Alef", sans-serif;
}

body {
/*     add background image */
/*    background: url('img/background-juggling.png');*/
    background-color: #ededed;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#wrapper {
    /*background: rgba(202, 202, 202, 0.8);*/
    /*box-shadow: 2px 2px 10px #b6b6b6;*/
    border-radius: 50px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
}
#wrapper > * {
    display: inline-block;
}
h1 {
    font-family: "Libre Baskerville", serif;
    text-align: center;
    margin: 20px 60px 20px 60px;
    font-size: 40px;
}

#input-container {
    display: inline-flex;
    flex-direction: row;
    gap: 0px 30px;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    flex-wrap: wrap;
}

#input-container label,
#input-container input {
    margin: 5px 5px;
}

#input-container label {
    /* underline white */
    /*text-decoration: underline;*/
    /*text-decoration-color: white;*/
    /*text-decoration-thickness: 4px;*/
    font-weight: bold;
}

input {
    /*border: 1px solid #ccc;*/
    border: none;
    border-radius: 10px;
    padding: 5px 10px;
    font-size: 16px;
    width: 40px;
    text-align: center;
    box-shadow: #cccccc 2px 2px 5px;
}

#button-container {
    /*width: 100%;*/
    display: inline-flex;
    justify-content: center;
    gap: 25px;
}

#calculate-button, #print-button {
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    background: white;
    box-shadow: #cccccc 2px 2px 5px;
}

#calculate-button:hover, #print-button:hover {
    background: #f0f0f0;
    box-shadow: #cccccc 2px 2px 10px;
    /*outline: 2px solid black;*/
}
#calculate-button:active, #print-button:active {
    background: #e1e1e1;
}
#print-button {
    /* Hide by default until pattern is calculated */
    display: none;
}

#canvas-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30px 0;
}

#pattern-canvas {
    background: white;
    border-radius: 40px;
}

#juggling-ball-img-1 {
    position: absolute;
    top: 60px;
    left: 60px;
    width: 200px;
    z-index: 1;
}

#juggling-ball-img-2 {
    position: absolute;
    top: 60px;
    right: 60px;
    width: 400px;
    z-index: 1;
}

@media print {
    body {
        background: white;
    }

    body * {
        visibility: hidden;
    }

    #canvas-container, #canvas-container * {
        visibility: visible;
    }

    #canvas-container {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        display: inline-block;
    }
}