@font-face {
    font-family: "pear-days";
    src: url(fonts/pear-days.otf);
}

body {
    background-color: #f5deb3;
}

h1 {
    background-color: #ebf5b3;
    color:black;
    text-align: center;
    /*font-family: sans-serif;*/
    font-size:2.5vw;
    border-radius: 5px;
    padding: 5px;
    margin-left: 20%;
    margin-right: 20%;
}

div {
    float: left;
    padding: 15px;
    border-style: none;
    border-radius: 5px;
}

.linear-gradient {
  background: linear-gradient(
    to right,
    white,
    pink,
    pink,
    aqua,
    black,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo
  );
}

* {
    box-sizing: border-box;
}

.container {
    display: grid;
    grid-template-columns: repeat(12, [col-start] 1fr);
    border: 1px solid gray;
    gap:10px;
    font-family: "pear-days";
    font-size:1.25rem;
    background-color: #f5bdb3;
    width: 100%;
}

.container > * {
    border: 1px solid black;
    grid-column: col-start / span 12;
}

.sidebar {
    grid-column: col-start / span 3;
    grid-row: 3;
    text-align: center;
}

.cool {
    grid-column: col-start / span 3;
    grid-row: 4 / 54;
}

.main {
    grid-column: col-start 4 / span 9;
    grid-row-end: span 50;
}

.footer {
    grid-column: col-start 4 / span 9;
}

.container div {
    background-color: #f5deb3;
}

.container div .button {
    border: 1px solid black;
    background-color: #ebf5b3;
}

a {
    color:black;
    text-decoration:none;
}

a:hover {
    text-decoration:underline;
}

a:active {
    color:white;
    text-decoration:underline;
}