/*Stylesheet for Goopy.fish*/

html {
    font-size: 16px;

}

* {
    box-sizing: border-box;
}


body {
    background-color: #1a3c51;
    background-image: linear-gradient(#7495ac, #1a3c51);
    /*background-repeat: no-repeat;*/
    background-position: center;
    background-size: cover;
    overflow: hidden;
}

.container {
    display: grid;
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    grid-template-areas: "b1 m1 b2"
                         "s1 stage s2"
                         "b3 m2 b4";
    grid-template-columns: 20% 60% 20%;
    grid-template-rows: 20% 60% 20%;
}

b1 {
   grid-area: b1;
   justify-self: start;
   align-self: start;
   margin:10%;
}

m1 {
   grid-area: m1;
}

b2 {
   grid-area: b2;
   justify-self: end;
   align-self: start;
   margin:10%;
}

s1 {
   grid-area: s1;
}

stage{
    grid-area: stage;
    text-align: center;
}

s2 {
    grid-area: s2;
}

b3 {
    grid-area: b3;
    justify-self: start;
    align-self: end;
    margin:10%;
}

m2 {
    grid-area: m2;
}

b4 {
    grid-area: b4;
    justify-self: end;
    align-self: end;
    margin:10%;
    display:inline-block;
}


.button {
    /*height:20%;
    width: 30%;*/
    padding: 10px;
    border: 2px solid #052334;
    border-radius: 50%;
    margin: 5% 3%;
    text-decoration: none;
    background-color:#052334;
    color: #e7f4f1;
    font-family: arial;
    font-size: 1rem;
    cursor: pointer;
    text-align: center;
    transition: background 50ms ease-in-out,
                transform 75ms ease;
    -webkit-appearance: none;
    -moz-appearance: none;

}

.button:hover,
.button:focus {
    background: #4f7468;
    border-color:#4f7468;
}

.button:focus {
    outline: 3px solid #052334;
    outline-offset: -4px;
}

.button:active {
      transform: scale(0.99);
}



#rightsizegoop {
    height: 100%; /*100% relative to the size of the parent container/stage */
    width: 100%;
    filter: drop-shadow(1px 1px 6px #052334)
}


@media only screen and (max-width: 600px){
    body {
        font-size: 0.5 rem;
    }

    .container {
    b1 {
        grid-area: b1;
        justify-self: start;
        align-self: start;
        margin-top:40%;
    }

    b2 {
        grid-area: b2;
        justify-self: end;
        align-self: start;
        margin-top:40%;
    }

    b3 {
        grid-area: b3;
        justify-self: start;
        align-self: end;
        margin-bottom:40%;
    }

    b4 {
        grid-area: b4;
        justify-self: end;
        align-self: end;
        margin-bottom: 40%;
        display:inline-block;
    }
    }
 }