:root {
    --col-width: ;
    --container-width: ;
    --row-height: ;
  }

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

*{
    font-family: 'Tangerine', Courier, monospace;
}

body{
    background-image: url('./images/background.jpg');
}

.top{
    font-size: 30px;
    margin: auto;
    margin-bottom: 20px;
    width: var(--container-width);
}

input[type='range']{
    accent-color: black;
}

button#rainbow{
    font-size: 30px;
    margin-top: 10px;
}

button#rainbow.checked{
    background-color: black;
    color: white;
}

.container{
    background-color: white;
    box-sizing: border-box;
    border: 1px black solid;
    margin: auto;
    width: var(--container-width);
}

h1{
    font-size: 50px;
    text-align: center;
}

.row{
    display: flex;
    height: var(--row-height);
}

.col{
    box-sizing: border-box;
    width: var(--col-width);
}