.banner {
    background-image: url("../src/banner.jpg");
    width:100%;
    height:55vh;
    background-size: contain;
    background-repeat: no-repeat;
    background-size: 100vw 55vh;
    border-bottom: 1px solid lightblue;
}

.overlay {
    background-color: black;
    opacity: 40%;
    width:100%;
    height:55vh
}

.left-side-group {
    width:100%;
    margin:0;
    padding:0;
}

.left-side-group * {
    border: 0.01% solid lightblue
}

.left-side-group .left-side {
    width:49.99%;
    height:40vh;
    background-color: white;
    float:left;
    margin:0;
    padding:0
    
}

.left-side-group * p {
    padding-left: 10%;
    padding-right: 10%;
}

.right-side-group * p {
    padding-left: 10%;
    padding-right: 10%;
}

.left-side p {
    color:black;
    font-size: 22px;
    text-align: center;
    font-family: sans-serif;
}

.left-side h3 {
    color:black;
    font-size: 33px;
    font-family: sans-serif;
    text-align: center;
}

.left-side-group .right-side {
    width:49.99%;
    height:40vh;
    background-image: url("../src/hedgehog-banner.jpeg");
    background-size: contain;
    background-repeat: no-repeat;
    background-size: 50vw 55vh;
    float:right;
    margin:0;
    padding:0
}

/* RIGHT SIDE */
.right-side-group {
    width:100%;
    margin:0;
    padding:0;
}

.right-side-group * {
    border: 0.01% solid lightblue
}

.center { /* can't check in library inspect element does not work leave for later */
    margin-left: auto;
    margin-right: auto;
    width:25vw;
    opacity: 0;
    height: 20vh;
    background-color: black;
    position: fixed;
    top:10%
}

.right-side-group .right-side {
    width:49.99%;
    height:40vh;
    background-color: white;
    float:right;
    margin:0;
    padding:0
    
}

.right-side p {
    color:black;
    font-size: 20px;
    text-align: center;
    font-family: sans-serif;
}

.right-side h3 {
    color:black;
    font-size: 33px;
    font-family: sans-serif;
    text-align: center;
}

.right-side-group .left-side {
    width:49.99%;
    height:40vh;
    background-image: url("../src/image2.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    background-size: 50vw 55vh;
    float:left;
    margin:0;
    padding:0
}

footer {
    bottom: -52.8vh
}

/* MOBILE PAGE */
@media only screen and (max-width: 600px) {
    .banner {
        width:100%;
        height:40vh;
        background-size: 100vw 55vh;
    }
    
    .overlay {
        width:100%;
        height:40vh
    }
    
    .left-side-group {
        width:100%;
    }
    
    .left-side-group .left-side {
        width:49.99%;
        height:26vh;
    }
    
    .left-side-group * p {
        padding-left: 10%;
        padding-right: 10%;
    }
    
    .right-side-group * p {
        padding-left: 10%;
        padding-right: 10%;
    }
    
    .left-side p {
        font-size: 0.7em;
    }
    
    .left-side h3 {
        font-size: 1.5em;
    }
    
    /* RIGHT SIDE */
    .right-side-group {
        width:100%;
    }
    
    .center { /* can't check in library inspect element does not work leave for later */
        width:25vw;
        height: 20vh;
        top:10%
    }
    
    .right-side-group .right-side {
        width:49.99%;
        height:34vh;
    }
    
    .right-side p {
        font-size: 0.7em;
    }
    
    .right-side h3 {
        font-size: 1.5em;
    }

    footer {
        bottom:-18vh
    }
    
    .left-side-group .left-side {
        width:100vw;
    }

    .right-side-group .right-side {
        width:100vw;
    }

    .left-side-group .right-side {
        display: none;
    }

    .right-side-group .left-side {
        display: none;
    }

}