html {
    font-size: 100%; /*Sets my font size to atleast 100%*/   
    }
 
 body { /*Creates the base for my wesbsite*/
    
    background-color: rgb#412D26; /*Sets my background color*/
    margin: 0;
    padding: 0;
    font-size: 100%;
    font-family: Arial, Helvetica, sans-serif; /*sets my fonts*/
    /*overflow: hidden;*/
    background-image: url("images/background.png");
    background-size: cover;
    min-height: 100vh;
    font-family: 'M PLUS Rounded 1c', sans-serif;

 }

 h1 { /*sets my big welcome image*/
    font-size:250%;
    color:rgb(0, 0, 0);
    
}
h2 { /*Sets my text that introduces each section*/
    font-size: 150%;
    color: rgb(0, 0, 0);
    
}

h3 { 
    font-size: 300%; /*sets my white text for my welcome*/
    color: antiquewhite;
    padding: 0 0 25px 0;
}

h4,h5,h6 {

}


p{ /*Sets my paragraph text*/
    color: rgb(31, 31, 31);
    font-size: 175%;
    line-height: 2em;
}


 .container {
    
    overflow: auto;
    box-sizing: border-box;
    padding: 1%;
    
 }

 .nav{
   width: 100%;
   display: flex;
   justify-content: center ;
   
}

.bread{
   height: 150px;
   display: inline-block;
   justify-content: center;
   
}

.mobile {
   display: none;
}

.logo{
   height: 150px;
   width: 150px;
   display: inline-block;
   
}

 .content {
    display: flex;
    

 }

 .pic {
    display: inline-block;
    margin: 1.5%;
    border-radius: 25px;
    width: 100%;
    max-width: 700px;
    min-width: 700px;
    
    
 }

 .textarrow{
    display: inline-block;
    position: relative;
    margin: 1.5%;
    min-width: 40%;
    width: 100%;
   
 }

 .text {
    background-color: rgb(255, 255, 255);
    border-radius: 25px;
    padding: 1% 4%;
    margin-bottom: 1%;
 }

 .arrow{

    height: 100px;
    width: 100%;
    margin-top: auto; 
    display: flex;
 }




.button{
color: #000000;
font-family: 'M PLUS Rounded 1c', sans-serif;
font-weight: 0;
font-size: 150%;
background-color: #efba35;
padding: 10px 80px;
border: 4px solid #ffffff;
box-shadow: rgb(0, 0, 0) 0px 0px 0px 0px;
border-radius: 25px;
transition : 1000ms;
transform: translateY(0);
display: flex;
flex-direction: row;
align-items: center;
cursor: pointer;
}

.button:hover{

transition : 1000ms;
padding: 10px 100px;
transform : translateY(-0px);
background-color: #efba35;
color: #ffffff;
border: solid 2px #efba35;
}


 .button2 {
   margin-left: auto;
 } /* Blue */


 a:link { text-decoration: none; }


 a:visited { text-decoration: none; }
 
 
 a:hover { text-decoration: none; }
 
 
 a:active { text-decoration: none; }
 




 @media (max-width: 1300px) {
   .logo {
      display: none;
      }
   .textarrow{
      flex-direction: column;
      margin: 0;
     
   }
   .pic {
      margin: 0;
      min-width: 100%;
      max-width: 100%;
   }
   .content{
   flex-direction: column;
}
   p {
      font-size: 150%;
   }
   .nav {
      justify-content: center;
   }
   .container{
      padding: 0;
   }
 }

 @media (max-width: 800px) {
   .desk {
      display: none;
   }
   .mobile {
      display: block;
   }
 }

 @media (max-width: 460px) {
   .button {
      padding: 10px 60px;
   }
 }