@import url('https://fonts.googleapis.com/css2?family=Finger+Paint&family=Nunito&display=swap');
@font-face {
    font-family: Minecraft;
    src: url("./../fonts/MinecraftRegular-Bmg3.otf") format("opentype");
}

html, body {
	font-family: 'Nunito', cursive;
    font-size: 1.2rem;
}

html {
  height: 100%;
}

body {
  background-color: #263238;
  background:
     url('./../bilder/bgp.png')
     top center / 100% 100% /* position / size */
     no-repeat
     fixed 
     padding-box /* origin */
     content-box /* clip */;
     background-size: cover;
}
  
header {
  background-color: #00668f;
}
  
header .my-brand {
  font-family: 'Finger Paint', cursive;
  color: white;
  text-align: center;
}

main {
  padding: 20px;
  animation: fadeInAnimation ease 3s 1 forwards;
  padding-top: 80px;
  padding-bottom: 120px;
}

main .my-minecraft {
  font-family: 'Minecraft';
  border: 1px solid #f1f1f1;
}

main .my-sub-title {
  color: white;
  font-size: 1.2rem;
  font-weight: bold;
}

main .my-sub-sub-title {
  color: white;
  font-size: 1.2rem;
}

main .my-blur-background {
  background-color: rgba(0,0,0, 0.4); /* RGBA/opacity */
  border: 3px solid #f1f1f1;
  text-align: center;
  color: white;
}
   
main .my-title {
  font-family: 'Finger Paint', cursive;
  color: white;
}

main h2.my-start {
  font-size: 32px;
  margin: 0 0 20px 0;
  color: rgb(134, 8, 8)
}
main p.my-start {
  color: white;
}

main .fadein {
  opacity: 0;
}
  
footer {
  background-color: #00668f;
  color: white;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}