html {
font-family: 'Gruppo', cursive, lato, sans-serif;
font-size: 12px;
font-weight: bold;
background: #6699cc;
background: linear-gradient(to bottom, #cb60b3+0 0%,#ed9017 100%);
background-image: url("media/junicorn1.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover; }
body {
display: flex;
height: 100vh;
}
main {
width: 80%;
font-family: 'Gruppo', cursive, lato, sans-serif;
margin: auto;
}
h1 {
color: #fff;
writing-mode: vertical-rl;
font-size: 7.8vw;
float: right;
margin: 0;
}
.button{
padding:3px 9px 3px 9px;
text-decoration: none;
display: inline-block;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
border-bottom: 1px solid rgba(0,0,0,0.25);
font-family: "Gruppo",Lucida,Verdana,sans-serif;
font-size: 30%;
outline:none;
position: fixed;
font-size: 22px;
margin:10px;
background:transparent url(buttonover.png) repeat-x top left;
white-space:nowrap;
}
.button:hover{
background-color: #777;
}
.button:active{
top: 1px;
left:1px;
}
.rose{
background-color: #F07FD0;
color: #FFF;
font-family: "Palatino Linotype";
font-style: italic;
letter-spacing:-1px;
text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
}
.rose:hover{
background-color: #B07FA0;
}
img {
display: block;
max-width: 85%;
max-height: 90vh;
}
ul {
font-family: 'Gruppo', cursive, lato, sans-serif;
font-size: 2rem;
font-weight: bold;
color: #fff;
margin: 0;
padding: 10px;
background: #26558b;
list-style-type: none;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7abcff+0,60abf8+44,4096ee+100;Blue+3D+%2314 */
background: #7abcff; /* Old browsers */
background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
}
main {
width: 80%;
font-family: 'Gruppo', cursive, lato, sans-serif;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
box-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
border: solid 1px white;
opacity: 0.75;
margin: auto;
}
h1 {
color: #fff;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
writing-mode: vertical-rl;
font-size: 7.8vw;
float: right;
position: fixed;
margin: 0;
}
img {
display: block;
opacity: 1;
max-width: 100%;
max-height: 98vh;
border: solid 1px #D092CC;
box-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
ul {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d6f9ff+0,9ee8fa+100;Blue+3D */
background: #d6f9ff; /* Old browsers */
background: -moz-linear-gradient(top, #d6f9ff 0%, #9ee8fa 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #d6f9ff 0%,#9ee8fa 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #d6f9ff 0%,#9ee8fa 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6f9ff', endColorstr='#9ee8fa',GradientType=0 ); /* IE6-9 */
opacity: 0.9;
background-color: #DFDBE5;
background-color: #DFDBE5;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 28' width='56' height='28'%3E%3Cpath fill='%239C92AC' fill-opacity='0.38' d='M56 26v2h-7.75c2.3-1.27 4.94-2 7.75-2zm-26 2a2 2 0 1 0-4 0h-4.09A25.98 25.98 0 0 0 0 16v-2c.67 0 1.34.02 2 .07V14a2 2 0 0 0-2-2v-2a4 4 0 0 1 3.98 3.6 28.09 28.09 0 0 1 2.8-3.86A8 8 0 0 0 0 6V4a9.99 9.99 0 0 1 8.17 4.23c.94-.95 1.96-1.83 3.03-2.63A13.98 13.98 0 0 0 0 0h7.75c2 1.1 3.73 2.63 5.1 4.45 1.12-.72 2.3-1.37 3.53-1.93A20.1 20.1 0 0 0 14.28 0h2.7c.45.56.88 1.14 1.29 1.74 1.3-.48 2.63-.87 4-1.15-.11-.2-.23-.4-.36-.59H26v.07a28.4 28.4 0 0 1 4 0V0h4.09l-.37.59c1.38.28 2.72.67 4.01 1.15.4-.6.84-1.18 1.3-1.74h2.69a20.1 20.1 0 0 0-2.1 2.52c1.23.56 2.41 1.2 3.54 1.93A16.08 16.08 0 0 1 48.25 0H56c-4.58 0-8.65 2.2-11.2 5.6 1.07.8 2.09 1.68 3.03 2.63A9.99 9.99 0 0 1 56 4v2a8 8 0 0 0-6.77 3.74c1.03 1.2 1.97 2.5 2.79 3.86A4 4 0 0 1 56 10v2a2 2 0 0 0-2 2.07 28.4 28.4 0 0 1 2-.07v2c-9.2 0-17.3 4.78-21.91 12H30zM7.75 28H0v-2c2.81 0 5.46.73 7.75 2zM56 20v2c-5.6 0-10.65 2.3-14.28 6h-2.7c4.04-4.89 10.15-8 16.98-8zm-39.03 8h-2.69C10.65 24.3 5.6 22 0 22v-2c6.83 0 12.94 3.11 16.97 8zm15.01-.4a28.09 28.09 0 0 1 2.8-3.86 8 8 0 0 0-13.55 0c1.03 1.2 1.97 2.5 2.79 3.86a4 4 0 0 1 7.96 0zm14.29-11.86c1.3-.48 2.63-.87 4-1.15a25.99 25.99 0 0 0-44.55 0c1.38.28 2.72.67 4.01 1.15a21.98 21.98 0 0 1 36.54 0zm-5.43 2.71c1.13-.72 2.3-1.37 3.54-1.93a19.98 19.98 0 0 0-32.76 0c1.23.56 2.41 1.2 3.54 1.93a15.98 15.98 0 0 1 25.68 0zm-4.67 3.78c.94-.95 1.96-1.83 3.03-2.63a13.98 13.98 0 0 0-22.4 0c1.07.8 2.09 1.68 3.03 2.63a9.99 9.99 0 0 1 16.34 0z'%3E%3C/path%3E%3C/svg%3E");
}
li.card {
padding: 0.5em;
background: #76C4BB;
opacity: 0.9;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
border: solid 1px #D092CC;
}
li:nth-child(3),
li:nth-child(4),
li:nth-child(7),
li:nth-child(10),
li:nth-child(14),
li:nth-child(16),
li:nth-child(21),
li:nth-child(24),
li:nth-child(26),
li:nth-child(30){
opacity: 0.95;
background: #cb60b3+0;
border: solid 1px #83c4c3;
}
li:nth-child(3) {
grid-column: span 2;
}
li:nth-child(4) {
grid-row: span 2;
}
li:nth-child(7) {
grid-column: span 2;
grid-row: span 2;
}
li:nth-child(10) {
grid-column: span 2;
}
li:nth-child(14) {
grid-row: span 2;
}
li:nth-child(16) {
grid-column: span 2;
grid-row: span 2;
}
li:nth-child(21) {
grid-column: span 2;
grid-row: span 2;
}
li:nth-child(24) {
grid-row: span 2;
}
li:nth-child(26) {
grid-column: span 2;
grid-row: span 2;
}
li:nth-child(30) {
grid-column: span 3;
}
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px,2fr));
grid-gap: 2rem;
opacity: 0.95;
}