@font-face {
    font-family: '1';
    src: url('picnic.woff') format('woff');
}

/* GENERAL */
body {
    background-color: rgb(86, 142, 160);
    color: black;
    overflow: hidden;
}

button {
    background-color: rgba(0, 0, 0, 0);
    border: none;
    position:fixed;
    top: 0; left: 0;
    font-size: 4vmin;
    font-family: 'monospace'; }
button a {
    text-decoration: none;
    color: black;
}
button:hover {
    opacity: 50%; }

/* SECTIONS */
div.container {
    display: flex;
    flex-wrap: wrap;
    font-family: '1';
    margin-top: 15min;
    padding: 2vmin; }
div.col {
    font-size: 6vmin;
    transition: 1s; }

div.text {
    text-shadow: 2px 4px 5px rgba(0, 0, 0, 0.5);
    border-radius: 100px;
    text-align: center;
    padding: 2vmin;
    margin-left: 30px;
    margin-bottom: 20px;
    background-color: rgba(255, 255, 255, 0.2);
    box-shadow: 5px 10px 6px 6px rgba(0, 0, 0, 0.8); }

h1 {
    left: 10%;
    font-size: 2vmin;
    font-family: monospace;
    position: fixed;
}

/* WIDTH */
div.w1-1 {
        width: 20%; }
div.w1-2 {
    width: 45%; }
div.w1-3 {
        width: 70%; }

div.w2-1 {
    width: 15%; }
div.w2-2 {
    width: 75%; }


/* RULES */
div.text.one{
    font-size: 4vmin;}
div.text.two {
    font-size: 7vmin; }
div.text.three {
    font-size: 10vmin;}

div.text.a{
    transform: translateX(-8vmin);}
div.text.b {
    transform: translateX(0vmin);}
div.text.c {
    transform: translateX(8vmin);}