/*---------------  BASE  ---------------*/

body {
    font-family: sans-serif;
    background-image: url(wallpaper.png);
}
textarea {
    width: calc(100% - 20px);
    min-height: 300px;
    max-height: calc(100vh - 120px);
    padding: 10px;
    border: none;
    box-shadow: 0 2px 4px 2px #00000030;
    resize: vertical;
    overflow: scroll;
}

/*---------------  TITLE  ---------------*/

.block h2 {
    color: white;
    padding: 10px;
    margin: 0;
}
.htmlTitle {background-image: linear-gradient(135deg, #f15931 240px, #f47933 240px);}
.cssTitle {background-image: linear-gradient(135deg, #007dc6 240px, #008fd5 240px);}
.htmlColor h2 {background-image: linear-gradient(135deg, #f15931 140px, #f47933 140px);}
.cssColor h2 {background-image: linear-gradient(135deg, #007dc6 140px, #008fd5 140px);}

/*---------------  BLOCK  ---------------*/

.block {
    margin: 8px;
    box-shadow: 0 2px 4px 2px #00000030;
    border-radius: 5px;
    overflow: hidden;
}
.block div {
    background-color: aliceblue;
    padding: 20px 10px;
}

/*---------------  BUTTON  ---------------*/

button {
    color: white;
    font-size: 18px;
    padding: 8px 16px;
    margin: 0 8px 8px 8px;
    border-radius: 6px;
    border: none;
    transition: all 0.5s;
}
button:hover {
    letter-spacing: 1px;
    filter: brightness(130%);
    cursor: pointer;
    transition: all 0.5s;
}
#htmlBtn {
    background-color: #f47933;
    box-shadow: 0 4px #f15931;
}
#cssBtn {
    background-color: #008fd5;
    box-shadow: 0 4px #007dc6;
}