@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;1,300&display=swap');

*,
*::after,
*::before{
    margin: 0px;
    padding: 0px; 
    box-sizing: border-box;
}

body{
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: 1em;
    line-height: 1.7;
    color: rgba(129, 138, 53, 0.87);
    padding:30px;
    /*background-color: #f3f5f3;*/
  
}


/*navigationsbar i index*/
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  
  li {
    float: right;
  }
  
  li a{
    display: block;
    padding: 8px;
    color:rgba(129, 138, 53, 0.87);
    text-decoration: none;

  } /*visited link farven skal ændres... lave navigationbar anderledes?*/

  li a:hover{
    transform: scale(1.2);
    text-decoration: underline;
  }

header{
   height: 100vh;

    background-image: linear-gradient(to right bottom,
    rgba(222, 231, 205, 0.897), 
    rgba(129, 138, 53, 0.87)
    )
    ,url("img/yoga1.jpg");
    background-size: cover;
    position:relative;
    display:block;
}

 /*Kode til logo*/
.logo-box{
  position: absolute; /*så man eks. kan indsætte noget ind på et billede, kræver at parent er relative*/
  top:1em;
  left:2em;
}

.logo{
  width: 7em; 
  opacity: 0.7;
}



.text-box{
    position: absolute;
    top:45%;
    left:50%; /*top og left bruges til placering, hvor transform justere sig efter den*/
    transform: translate(-50%,-50%); /*50% flytter teksten af sig selv*/
    text-align: center;
}

h1{
    margin-bottom: 3em;
    font-weight: 300;
}


div.primary-main{
    color:rgba(129, 138, 53, 0.87);
    text-align: center;
    font-size: 2.5em;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-top: 1.2em;
    font-weight: 300;
    animation-name: moveInLeft;
    animation-duration: 1s;
    animation-timing-function: ease-out;
}

div.primary-sub{
    color: cornsilk;
    font-size: 0.7em;
    font-style: italic;
    font-weight: 300;
    /*animation: moveInRight 3s ease-out;*/
}

.btn,
.btn:link,
.btn:visited{
    text-transform: uppercase;
    text-decoration: none;
    padding: 1em 2em; 
    margin-top: 1em;
    margin-bottom: 1em;
    display: inline-block;
   
    border-radius: 2em;
    font-size: 0.7em;
    position: relative;
    border: none;
    background-color:#393D11; /*#65348A*/
    color: cornsilk;
    font-weight: 700;
    width: 300px;
    transition: width 0.5s;
}

.btn:hover{
    width: 500px;
}

.footer-distributed .footer-left, /*dette gør at man specifikt vælger footer-left inde i footer-distributed*/
.footer-distributed{
    text-align: center;
}

.footer-distributed{
    background-color: none;
    box-shadow: 0 0 0 0;
    width: 100%;
    text-align: left;
    font: normal 1em sans-serif;
    padding: 50px 50px;
}

.footer-distributed p.footer-links{
    font-size: 1em;
    font-weight: 200;
    color: darkgray;
    margin: 0 0 10px;
    padding: 0px;
}

.footer-distributed p.footer-links a{
    display: inline-block;
    padding: 20px;
    line-height:1.8;
    text-decoration: none;
    color: rgba(129, 138, 53, 0.87) ;
}

.footer-distributed p.footer-links a:hover{
    transform: scale(1.2); /*teksten bliver lidt større når man hover*/
    text-decoration: underline;
}


@keyframes moveInLeft { /*en animation, der flytter eks. tekst*/
    0%{
        opacity: 0;
        transform: translateX(-10rem); /*flytter vandret hen af x koordinaterne (i et koordinatsystem)*/
    }
    80%{
        transform: translateX(1rem);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}

/*HER ER CSS TIL YOGA_WORKSHOPS*/
/*kode til navigationsbar i workshops*/
.navigationsbar2>ul{
  
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
  
  
}

.nbli {
  float: right;
}

.nbli a{
  display: block;
  padding: 8px;
  color:rgba(129, 138, 53, 0.87);
  text-decoration: underline;

} /*visited link farven skal ændres... lave navigationbar anderledes?*/

.nbli a:hover{
  transform: scale(1.2);
  text-decoration: underline;
}

/*gradient baggrund til de forskellige workshops*/
.column{
  height: 35.6vh;
  background-image: linear-gradient(to right bottom,
  rgba(222, 231, 205, 0.897), 
  rgba(129, 138, 53, 0.87)
  )
  ,url("");
  background-size: cover;
  position:relative;
  display:block;
}

/*Kode til den første btn*/
/* Container needed to position the button. Adjust the width as needed */
#column1 {
    position: relative;
    width: 90%;
  }
  
  /* Make the image responsive */
  #column1 img {
    width: 100%;
    height: auto;
  }
  
  /* Style the button and place it in the middle of the container/image */
  #column1 .btn2 {
    position: absolute;
    top: 50%;
    left: 14%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: rgba(129, 138, 53, 0.87);
    color: white;
    font-size: 15px;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
  }
  
  #column1 .btn2:hover {
    background-color: rgb(139, 143, 123);
  }

  /*Kode til den anden btn*/
  /* Container needed to position the button. Adjust the width as needed */
#column2 {
    position: relative;
    width: 90%;
  }
  
  /* Make the image responsive */
  #column2 img {
    width: 100%;
    height: auto;
  }
  
  /* Style the button and place it in the middle of the container/image */
  #column2 .btn3 {
    position: absolute;
    top: 50%;
    left: 14%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: rgba(129, 138, 53, 0.87);
    color: white;
    font-size: 15px;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
  }
  
  #column2 .btn3:hover {
    background-color: rgb(139, 143, 123);
  }

  /*Kode til den tredje btn*/

  /* Container needed to position the button. Adjust the width as needed */
  #column3 {
      position: relative;
      width: 90%;
    }
    
    /* Make the image responsive */
    #column3 img {
      width: 100%;
      height: auto;
    }
    
    /* Style the button and place it in the middle of the container/image */
    #column3 .btn4 {
      position: absolute;
      top: 50%;
      left: 14%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      background-color: rgba(129, 138, 53, 0.87);
      color: white;
      font-size: 15px;
      padding: 12px 24px;
      border: none;
      cursor: pointer;
      border-radius: 5px;
    }
    
    #column3 .btn4:hover {
      background-color: rgb(139, 143, 123);
    }
  
 #workshop1{
    font-weight: 700; 
    color:rgba(129, 138, 53, 0.87) ;
 }

.text1{
  color: #FFF8DC;
  float:right;
  padding: 6%;
  position: relative;
  bottom: 20%;
  right:52%

}
 
/*Kode til contact*/
.contact-p{
  size: 150px;
  margin-bottom: 0.5%;
}

.contact-h{
  margin-bottom: 0.5%;
}

.forms-1{
  height: 50px;
  width: 200px;
  font-size: 14pt;
  position: relative;
  left: 40%;
  top: 7%;
  color: gray;
}


#forms-msg2{
  
  width:20%;
  height:20%;
}

#submit{
  text-transform: uppercase;
    text-decoration: none;
    padding: 1em 2em; 
    margin-top: 2em;
    margin-bottom: 1em;
    display: inline-block;
   
    border-radius: 2em;
    font-size: 0.9em;
    position: relative;
    left: 40%;
    top: 5%;
    border: none;
    background-color:#393D11; /*#65348A*/
    color: cornsilk;
    font-weight: 700;
    

}


.form-f{
  height: 80vh;
  width: 190vh;
  background-image: linear-gradient(to right bottom,
  rgba(222, 231, 205, 0.897), 
  rgba(129, 138, 53, 0.87)
  );
  background-size: cover;
  position:relative;
  left: 2%;
  right: 30%;
  display:block;
  
}

.footer-copy{
  color: #525533;
}