html {
  height:100%;
}

body {
  margin:0;
}

.bg {
    animation: slide 3s ease-in-out infinite alternate;
    background-image: linear-gradient(-60deg, #6c3 50%, #3b8 50%);
    bottom: 0;
    left: -50%;
    opacity: .5;
    position: fixed;
    right: -50%;
    top: 0;
    z-index: -1;
}

.bg2 {
  animation-direction:alternate-reverse;
  animation-duration:4s;
}

.bg3 {
  animation-duration:5s;
}


.logo {
    background-color: rgba(255,255,255,1.0);
    border-radius: 35em;
    box-sizing: border-box;
    box-shadow: 0.2em 0em 0.5em rgb(0 0 0 / 40%);
    padding: 3.5vmin;
    /* position: fixed; */
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
    /* height: 25%; */
    position: fixed;
    z-index: 1;
    outline: #ffffffb8 solid 15px;
    min-width: 180px;
    min-height: 180px;
}

.logo img {

    padding: 3.5vmin;
    /* position: fixed; */
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
    /* height: 25%; */
    position: absolute;
    z-index: 2;
    width: auto;
    height: auto;
}

.text-box p{
	position:relative;
    color: #e1e1e1;
    font-family: monospace;
	text-align: center;
	font-size:small;
}

.section{
        color: white;
        border-radius: 1.5em;
        padding-left: 5em;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
}

.text-box {
    position: relative;
    color: #84c98d;
    font-family: monospace;
    text-align: center;
    border-radius: 1.8em;
    /* padding-left: 5em; */
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 9em;
	padding-right: 2em;
    background-color: #108144d4;
    /* outline: #d9f2cd4a solid 5px; */
}
a:link, a:visited
{
	color: #e1e1e1;
    cursor: pointer;
    text-decoration: none;	
}
a:hover
{
	color: #fff;
    cursor: pointer;
    text-decoration: none;	
}
.text-box h1{
    position: relative;
    color: #fff;
    font-family: monospace;
    text-align: center;
    font-size: xxx-large;
    margin: -10px;
    margin-top: 5px;
}

.text-box h2 {
	font-family:monospace;
  	position:relative;
	text-align: center;
}


@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
}