@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --blue: #507ec3;
    --soft-blue: #7ba7d9;
    --white: #f0f0f0;
    --grey-fill: #f7faff;
    --grey-outline: #d0d0d0;
    --hover-grey-outline: #c0c0c0;
    --background: #f0f0f0;
}

.inter-thick {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

/* styles */
* {
    transition: all 0.25s ease;
}

body {
    text-align: center;
    font-family: "Inter", sans-serif;
    background-color: var(--background);
    margin: 0;
    background-color: var(--white);
}

h1 {
    margin-top: 20px;
}

canvas {
    border: 1px solid #000;
    background-color: #fff;
    cursor: crosshair;
    margin-top: 20px;
}

.controls, .buttons {
    margin-top: 20px;
}

input[type="range"] {
    width: 500px;
}

.buttons {
    margin-top: 10px;
}

button {
    padding: 10px 20px;
    margin: 0 10px;
    font-size: 16px;
}

/* Styles for the Fourier equation display */
.equation-box {
    margin-top: 20px;
    text-align: left;
    width: 30vw;
    word-wrap: break-word;
    height: 50vh;            /* Set the desired height of the box */
    overflow-y: auto;         /* Enable vertical scrolling */
    border: 1px solid #ccc;   /* Optional: Add a border around the box */
    padding: 10px;            /* Optional: Add padding inside the box */
    background-color: #fff;   /* Optional: Set background color */
    width: 0;
    height: 0;
}

.equation-box * {
    word-wrap: break-word;
}

/* header styling */
.header {
    width: 100vw;
    background: var(--blue);
    height: 4em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header h1 {
    color: var(--white);
    margin: 0;

}

/* contents layout */
.contents {
    display: flex;
    flex-direction: row;
}

.canvas-n-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin-top: 3em;
    margin-left: 5vw;
}

.controls-n-equation {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 5vh;
    margin-left: 2em;
    width: 100%;
}

/* canvas styling */
#drawCanvas {
    width: 800px;
    height: 550px;
    display: block;
    margin: 0 auto;
    border: 5px solid var(--grey-outline);
    border-radius: 15px;
}

/* buttons */
.buttons {
    margin-top: 2em;
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 5vw;
}

.button {
    margin: 0;
    flex-grow: 1;
    height: 4em;
    border-radius: 8px;
    font-size: 1.1em;
}

#clearButton {
    border: 3px solid var(--soft-blue);
    color: var(--blue);
    background: var(--background)
}

#clearButton:hover {
    background: var(--blue);
    border: 3px solid var(--blue);
    color: var(--white);
    cursor: pointer;
}

#approximateButton {
    background-color: var(--blue);
    border: none;
    color: var(--white);
}

#approximateButton:hover {
    background-color: var(--soft-blue);
    cursor: pointer;
}

/* controls */
.controls {
    display: flex;
    flex-direction: column;
    align-items: start;
    margin: 0;
    width: 100%;
    height: 100%;
    margin-top: 2em;
    gap: 2em;
}

.controls label {
    font-size: 1.25em;
}

.slider-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
}

.slider-n-num {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 1em;
    font-size: 1.25em;
    margin-top: 0.75em;
}

/* yes, all this is for one fucking slider */
input[type="range"]{
    width: 85%;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    background: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--soft-blue);
    cursor: pointer;
    margin-top: -8px;
    transition: background 0.25s ease;
}

input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 10px; /* Adjust the height of the track */
    background: var(--grey-outline);
    border-radius: 50px;
    transition: background 0.25s ease;
}

/* Hover styles */
input[type="range"]:hover::-webkit-slider-thumb {
    background: var(--blue);
}

input[type="range"]:hover::-webkit-slider-runnable-track {
    background: var(--hover-grey-outline);
}