*{ 
	margin: 0;
    padding: 0;
	font-size: 105%;
  
}


body {
    margin: 0;
    padding: 0;
    font-family: 'Literata', serif;
    font-style: normal;
	color: #c62da0;
	font-size: 1rem;
    background-color: #2f2d2b;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    min-height: 100vh;
    background-image: url('thebuttredettes_bw.svg');
    background-size: 100vw auto;
    background-repeat: no-repeat;
    
}

@media (orientation: landscape) {
    body {
        background-position: center;
    }
  }
  
  @media (orientation: portrait) {
    body {
        background-position: bottom;
    }
  }


a {
    color: #CCC;
}

header {
    width: 100%;
    text-align: center;
	height: auto;
}



main {
	width: min(1000px, 100%);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #000000c4;
}

div {
    width: 100%;
}

header, main, footer {
    flex-shrink: 0;

}

section {
    width: 100%;
    max-width: 1000px;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

h1 {
    font-size: 10vw;
    padding: 0.5em 0 0.5em 0;
    color: #d98ac5;
    font-weight: 700;
    mix-blend-mode: hard-light;
    font-family: "UnifrakturCook", cursive;
}

h2 {
    font-size: 1.7em;
    padding: 2em 0 1em 0;
}

footer {
font-size: 70%;
text-align: center;
padding: 2em 0 1em 0;
}

.relative image {
    visibility: hidden;
}

.mainlogo {
    width: 100%;
}

@media (max-width: 768px) {
	html {
		font-size: 115%;
		
	-moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto; 
   
	}

}