/*
 Theme Name: Twenty Twenty-One Child
 Theme URI: https://example.com/
 Description: Ett child-tema till Twenty Twenty-One.
 Author: Ditt namn
 Author URI: https://example.com/
 Template: twentytwentyone
 Version: 1.0.0
*/

/* Importerar huvudtemats CSS */
@import url("../twentytwentyone/style.css");


html, body {
    height: 100%; /* Se till att hela sidan fyller skärmen */
    margin: 0;
    padding: 0;
}

body {
    background-image: url('https://totalmetal.se/wp-content/uploads/2025/02/total_metal_ny.jpg');
    background-size: cover;  /* Fyller hela skärmen */
    background-position: top center; /* Börjar från toppen */
    background-repeat: no-repeat; /* Ingen upprepning */
    background-attachment: fixed; /* Parallax-effekt */
}


h1, h2, h3, h4, h5, h6 {
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.7); /* Skarp skugga */
}

.background-video {
    display: block;
    width: 800px; /* Exakt bredd */
    height: 450px; /* Exakt höjd för 16:9-proportioner */
    margin: 0 auto; /* Centrerar horisontellt */
    object-fit: cover; /* Beskär videon så den fyller hela ytan */
}

.video-container {
    width: calc(100vw - 40px); /* Skärmbredd minus 20px marginal på varje sida */
    height: 450px; /* Dynamisk höjd baserat på skärmbredd */
    overflow: hidden; /* Döljer det som hamnar utanför */
    margin: 30px auto 0; /* Centrerar div:en */
    position: relative;
}



/* Anpassning för små skärmar */
@media (max-width: 1024px) {
    .background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrerar videon */
    object-fit: cover; /* Beskär i sidled */
    }
}

@media (max-width: 470px) {
h1 {
	font-size: 3rem !important;
}
}

@media (max-width: 365px) {
h1 {
	font-size: 2.5rem !important;
}
}