body {
  background-image: url("../img/background.jpg");
  background-size: cover;
}

p {

  text-align: center;
  color: white;
  font-family: 'Teko', sans-serif;
  font-size: 35px;
}

a.backlink {
  color:white;
}

h1 {
margin-block-end: 10px;color: white;
  text-align: center;
    font-family: 'Teko', sans-serif;
      font-size: 10em;
        max-width: 100%;
          text-shadow: 14px 14px 14px black;
            margin-top: 0px;
}
.B {text-transform: uppercase; text-align: center; max-width: 100%; }
.C {; text-align: right; }
.A img { width: 90%;
  -webkit-filter: drop-shadow(10px 10px 10px #222);
  filter: drop-shadow(10px 10px 10px #222);
}
.C img { width: 90%; transform: scaleX(-1);
           -webkit-filter: drop-shadow(10px 10px 10px #222);
               filter: drop-shadow(10px 10px 10px #222); }
.B h1  { 
  color: white;
    text-align: center;
      font-family: 'Teko', sans-serif;
        font-size: 10em;
          max-width: 100%;
            text-shadow: 1px 14px 14px black;
              margin-top: 0px;
            }

h1.YTtransparent {
opacity: 0.1;
margin-block-end: 10px;color: white;
text-align: center;
  font-family: 'Teko', sans-serif;
    font-size: 10em;
      max-width: 100%;
        text-shadow: 14px 14px 14px black;
          margin-top: 0px;

}

p.linkedintext {
  font-size: 18px;
  text-align: left;
  font-family: helvetica, sans-serif;
}

.p1 
{
  font-size: 25px;
  margin-block-end: 3px;
  text-align: center;
  
}

input::placeholder 

{
  opacity: 0.5;
  text-align: center;
  font-family: 'Teko', sans-serif;
  font-size: 18px;
}

textarea::placeholder
{
opacity: 0.5;
font-size: 40px;
font-family: 'Teko', sans-serif;
}

.btn {
  background-color: rgb(87, 75, 75);
  color: rgb(255, 255, 255);
  text-align: center;
  text-decoration: none;
  font-size: 65px;
  font-family: 'Teko', sans-serif;
  transition-duration: 0.4s;
  cursor: crosshair;
  text-align: center;
}

.btn:hover {
  background-color: #887c7c;
  color: rgb(214, 225, 226);
}

.messagesent

{
margin-top: 0px;
float: right;
}

.kontaktformular
{
  margin-top: -10px;
}

.firstlinkedintext {

  margin-top: 55px;
}

.linkedinlink {
display: block;
color: white;
text-align: center;
text-decoration: none;
text-align: center;
font-family: 'Teko', sans-serif;
font-size: 40px;
max-width: 100%;
}

.linkedinlinkdiv {
  padding-top: 150px;
}

h2 {
  transform: rotate(180deg);
  writing-mode: vertical-rl;
  color: black;
  text-align: left;
  font-family: 'Teko', sans-serif;
  font-size: 40px;

} 
nav {
list-style-type: none;
overflow: hidden;
background-color: #343a40;
opacity: 0.7;
margin-block-end: 3em;
text-align: center;
width: 100%; 
display: flex; 
flex-direction: row; 
justify-content: center;
}

li {
  float: left;
}

li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 0; /* Remove horizontal padding */
  margin-right: 2em;
  position: relative;
  overflow: hidden;
  transition: color 0.3s;
  text-decoration: none !important;
  font-family: 'Lato', sans-serif;
  font-size: 20px;
}

li a::after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 8px;
  height: 2px; /* Changed from 3px to 2px */
  background: white;
  transition: left 0.3s cubic-bezier(.4,0,.2,1), right 0.3s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}

li a:hover,
li a:active,
li a:focus {
  color: white;
}

li a:hover::after {
  left: 0;
  right: 0;
}

a {
  text-decoration: none;
  text-align: center;
}

li.punkterunderbilderna {
  float: none;
}

div.oculusquest {
  padding-top: 0px;
  margin-block-start: 0EM;
  margin-block-end: -0.1em;
}

h1.instagram {
  color: white;
  text-align: center;
  font-family: 'Teko', sans-serif;
  font-size: 10vw;
  max-width: 100%;
  text-shadow: 14px 14px 14px black;
  margin-block-start: -75px;
  margin-block-end: 0em;
}

h1.otherlinks {
  color: white;
  text-align: center;
  font-family: 'Teko', sans-serif;
  font-size: 10vw;
  max-width: 100%;
  text-shadow: 14px 14px 14px black;
  margin-block-start: -35px;
  margin-block-end: 0em;
}

a.bakåtknapp {
color: white;
font-family: 'Teko', sans-serif;
font-size: 4vw;
max-width: 100%;
text-shadow: 5px 5px 5px black;
border-radius: 4px;
}

.button4 {
  background-color: white;
  color: black;
  border: 2px solid #e7e7e7;
}

.button4:hover {
  background-color: transparent;
stroke-opacity: 0.5;
opacity: 0.6;
text-decoration: none;
}

.button {
  background-color: transparent;
  border: none;
  color: white;
  padding: 1px 1px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: 'Teko', sans-serif;
  font-size: 16px;
  margin: 1px 1px;
  transition-duration: 0.4s;
  cursor: pointer;
}


input {
  display: block;
  margin : 0 auto;
  position: relative;
}

textarea {
  display: block;
  margin : 0 auto;
  position: relative;
}
/*Lägger allt som har med videobakgrunderna att göra under detta för att separera skiten. :D */

* { box-sizing: border-box; }
.video-background {
  background: #000;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -99;
}
.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#vidtop-content {
	top: 0;
	color: #fff;
}
.vid-info { position: absolute; top: 0; right: 0; width: 33%; background: rgba(0,0,0,0.3); color: #fff; padding: 1rem; font-family: 'Avenir', Helvetica, sans-serif; }
.vid-info h1 { font-size: 2rem; font-weight: 700; margin-top: 0; line-height: 1.2; }
.vid-info a { display: block; color: #fff; text-decoration: none; background: rgba(0,0,0,0.5); transition: .6s 'background'; border-bottom: none; margin: 1rem auto; text-align: center; }
@media (min-aspect-ratio: 16/9) {
  .video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  .video-foreground { width: 300%; left: -100%; }
}
@media all and (max-width: 600px) {
.vid-info { width: 50%; padding: .5rem; }
.vid-info h1 { margin-bottom: .2rem; }
}
@media all and (max-width: 500px) {
.vid-info .acronym { display: none; }
}