/* fonts  */

@font-face {
    font-family: "OldRound";
    src: url(/resources/fonts/OldRound-30-1-1.ttf);
}

@font-face {
    font-family: "Moonlight";
    src: url(/resources/fonts/Basteleur-Moonlight.woff);
}

@font-face {
    font-family: "FlorFlor";
    src: url(/resources/fonts/FlorDeRuina-Flor.otf);
}

@font-face {
    font-family: "FlorSemilla";
    src: url(/resources/fonts/FlorDeRuina-Semilla.otf);
}


html{
	max-height: 100vh;
}

/* responsivity */

.container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* grid-template-rows: 1fr 1fr; */
	grid-gap: 10px;
	grid-auto-rows: minmax(20px, auto);

}

@media screen and (orientation: landscape) { /* desktop */

	.hdr {
	    grid-column: 1;
	    grid-row: 1;
	}
	
	.content {
	    grid-column: 2 / 5;
	    grid-row: 1;
	    padding:10px 100px !important;
	}
		
	.guestbook {
		grid-column: 5;
	    min-height: 50vh;
	    grid-row: 1;
	}			
}


@media screen and (orientation: portrait) { /* desktop */

	.hdr {
	    grid-column: 1/6;
	    width:100%;
	    /* grid-row: 1; */
	}
	
	.content {
	    grid-column: 1/6;
	    /* grid-row: 1; */
	    padding: 10px 35px;
	}
		
	.guestbook {
		grid-column: 1/6;
	    min-height: 50vh;
	    /* grid-row: 1; */
	}			
}


/* styling  */

body {
    background-image: url("resources/cover.png");
    background-size: auto;
    font-family: "OldRound";
    font-size: 20px;
    line-height: 1.5;
    color: darkslategray;
}

h1 {
    text-align: center;
    margin: 20px;
    color: darkslategray;
    /* text-shadow: 0px 0px 15px rgb(0, 97, 18); */
}

h2 {
    color: violet;
    letter-spacing: 0.05em;
    font-size: 2em;
}

h3, h4{
    font-size: 1.2em;
    letter-spacing: 0.05em
}

strong {
    font-size: 1.1em;
}

.fix-stroke {
    paint-order: stroke fill;
}

.fanon {
    text-align: left;
    margin: 0;
    color: rgb(247, 247, 247);
    font-size: 3em;
    line-height: 1.1;
    font-family: "FlorFlor";
    -webkit-text-stroke: 25px violet;
    font-weight: normal;
    padding:20px 0px 0px 20px;
}

img {
    width: 100%;
    /* max-width: 80vw; */
}

h1, h2, h3, h4{
    font-family: "FlorSemilla";
    /* font-weight: normal; */
    line-height: 1;
}

audio {
    width: 95%;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}


.column {
    max-height: 80vh;
    /* background-color: aliceblue; */
    /* display: inline-block; */
}

.rounded {
    border-radius: 3%;
}

.bg {
	margin-top: 10px;
	background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, aliceblue 44%, rgba(250, 255, 207, 1) 140%);
	box-shadow: 0px 0px 15px violet;
	padding:15px;
}

.scroll {
    overflow: scroll;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: violet transparent;
}

.filter {
    filter: hue-rotate(220deg);
    max-width: 90vw;
}

.highlight {
    border-radius: 20px;
    padding: 0px 15px 0px 15px;
    background-color: violet;
    color: rgb(247, 247, 247);
}

.btn {
    text-align: center;
    width: 45%;
    padding: 0px;
    text-decoration: underline;
    background-color: violet;
    border-radius: 20px;
    padding: 5px 15px 0px 15px;
    font-size: 2em;
}

.player {
    width: 100%;
    height:80%;
    grid-column: 1 / 6;
    grid-row: 2;
    /* position: fixed; */
    /* bottom: 0; */
}

.btn>a {
    color: rgb(247, 247, 247);
}

button {
    background-color: violet;
    padding: 5px;
    margin-bottom: 10px;
    width: 31%;
    border: none;
    color: violet;
    font-weight: bold;
    font-size: 0.9em;
    font-family: "OldRound";
}

button>a {
    color: rgb(247, 247, 247);
}