@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
@font-face {
    font-family: 'viaRegular';
    font-style: normal;
    font-weight: 400;
    src: local(''),
         url('../fonts/ViaSans/Via\ Sans.otf') format('otf'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('../fonts/ViaSans/Via\ Sans.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  @font-face {
    font-family: 'viaBold';
    font-style: normal;
    font-weight: 400;
    src: local(''),
         url('../fonts/ViaSans/Via\ Sans\ Bold.otf') format('otf'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('../fonts/ViaSans/Via\ Sans\ Bold.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  @font-face {
    font-family: 'viaduct';
    src: url(../fonts/Viaduct.ttf);
  }
  body{
    background: #cec0c3;
    background-image: url("../images/bg.png");
    background-size: cover;
    display: flex;
  }
  .logo img{
    width: 300px;
  }
  .textOne h2{
    font-family: viaduct;
    font-size: 41px;
    color: #3f3031;
    font-weight: 400;
    margin: 0;
   
  }
  .textTwo p{
    font-family: 'Open Sans', sans-serif;
    font-size: 24px;
    color: #3f3031;
    margin-top: 10px;
    
  }
  .button a{
    font-family: viaRegular;
    background-color: #3f3031;
    color: #cec0c3;
    font-size: 24px;
    padding: 15px 24px;
    border-radius: 5px;
    text-decoration: none;
   
  }
  .main{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1150px;
    margin: 0 auto;
    
  }
  .mainRight{
    margin-left: 70px;
  }
  /*
 * Author: http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/
 */

 @media (min-width:0px) and (max-width: 768px){ 
  .main{
    display: block;
    justify-content: initial;
    width: 100%;
  }
  .mainRight{
    display: block;
    margin-left: 20px;
    margin-top: 30px;
  }
  .mainLeft{
    display: block;
    margin-left: 20px;
    margin-top: 30px;
  }
  .logo img{
    width: 220px;
  }
  .textOne h2{
    font-size: 38px;
  }
  .textTwo p{
    font-size: 24px;
    margin-top: 27px;
  }
  .button a{
    font-size: 26px;
  }
  .button{
    margin-top: 8px;
    display: inline-block;
  }
}


/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {

/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}