@font-face {
    font-family: 'spirit';
    src: url(valen.otf);
}

@font-face {
    font-family: 'rainy';
    src: url(/rainyhearts.ttf);
}

@font-face {
    font-family: 'address';
    src: url(address.otf);
}

@font-face {
    font-family: 'geo';
    src: url(geogrotesque.otf);
}

body {
    background-image: url(https://i.pinimg.com/736x/82/34/81/823481fd4e5768b7a0b54359cdcd8184.jpg);
    font-family: 'rainy';
    margin: 0px;
    padding: 0px;
}

h1 {
    font-family: 'spirit';
    color: #F8BD7E;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
    font-size: 80px;
    margin: 0px;
    padding: 0px;
}

#star {
    background-image: url(star.png);
    height: 296px;
    width: 309px;
}

#bolota {
    filter: drop-shadow(-1px -1px 0 #fff)
            drop-shadow(1px -1px 0 #fff)
            drop-shadow(-1px 1px 0 #fff)
            drop-shadow(1px 1px 0 #fff);
}

.inside {
    color: #505A59;
}

::selection {
    background-color: #F4E19F;
    color: #fff;
}

#ow2 {
    position: absolute;
    right: 0px;
}

@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(20px);
	}
	100% {
		transform: translatey(0px);
	}
}

#bolota {
    animation: float 6s infinite;
}

h2 {
    font-family: 'geo';
    text-transform: uppercase;
    color: #d4fbff;
    padding: 10px;
    border: 2px solid #5fe0f4;
    border-bottom: none;
    border-radius: 10px 10px 0px 0px;
    margin-left: 30px;
    margin-bottom: 0px;
    width: 210px;
    background-image: linear-gradient(90deg, #1a596a, #273c47);
    font-size: 20px;
    font-weight: lighter;
    letter-spacing: 2px;
}

.ow1 {
    font-family: 'calibri';
    color: #d4fbff;
    padding: 10px;
    border: 2px solid #5fe0f4;
    border-radius: 10px;
    width: 920px;
    background-color: #273c47;
    margin-left: 10px;
    font-size: 16px;
    font-weight: lighter;
}

.ow1::selection, h2::selection {
    background-color: #5fe0f4;
    color: #273c47;
}