:root {
  --f: #04a51b;
  --s: #fcf9f7;
}

h1,h2,h3,h4,h5,p,ul,li,a,button {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 20px;
    font-weight: 500;
    /* margin:0;
    padding:0; */
}

h1 {
  font-size: 50px;
  font-weight: 800;
  color: white;
  margin: 0;
}

body,html {
    margin:0;
    padding:0;
}

body {
  overflow-y: scroll;
  overflow-x: hidden;
  background-color:#f9f9f9;
}

.header {
  position: fixed;
  top: 0;
  width: calc(100% - 72px);
  display: flex;
  padding: 36px;
  background-color: var(--s);
  height:100px;
  align-items: center;
  transition: 0.4s; 
  z-index: 10;
}

.logo {
    width: 25%;
}

img#logo {
  height: 100px;
  width: auto;
}

img {
  display: block;
  width:100%;
}

div#myLinks {
display: inline-block;
}

.myPage{
  flex: 1;
  margin-top: 172px;
    top:0px;
    width: 100%;    
    padding:0 20px 0 20px;
    box-sizing: border-box;
}

.mobnav {
  position: absolute;
  top: 32px;
  right: 10px;
}

.topnav {
    position: relative;
    z-index: 10;
    width:75%;
    align-items: center;
	text-align: right;
  }
  
  .topnav a {
    position: relative;
    width:fit-content;
    float: left;
    display: block;
    color: #000000;
    text-align: center;
    padding: 14px 36px;
    text-decoration: none;
    font-size: 20px;
    font-weight: 500;    
    background-color: var(--s);
  }
  
  .topnav a:after {    
    background: none repeat scroll 0 0 transparent;
    bottom: -2px;
    content: "";
    display: block;
    height: 2px;
    left: 50%;
    position: absolute;
    background: var(--f);
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    width: 0;
  }
  .topnav a:hover:after { 
    width: 100%; 
    left: 0; 
  }
  

  .topnav a.active {
    border-bottom: 2px solid var(--f);
    margin-bottom: -2px;    
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
  } 

  .topnav .icon {
    display: none;
  }
  
  .cover {
    width:100%;
    height:calc(100vh - 170px);
    background-image: url("23.jpg");
    background-size: cover;
    background-position: 50%;
    display:flex;
    align-items: center;
  }

  .covertext {
    margin:30px;
  }

  .covertext p{
    font-size:50px;
    color:white;
  }

  .scrollsnap {
    margin: 0;
    min-height: calc(100vh - 102px);
    display: flex;
    flex-direction: column;
    /* scroll-snap-type: y proximity;
    overflow-y: scroll; */
  }

  .row{
  display:flex;  
  height: calc(100vh - 100px);  
  /* scroll-snap-align: start; */
  }
  
  .row#form {
    height: max-content;
  }



.title{
  padding: 20px;
}

.rowtext {
  width: 60%;
  display: flex;
  align-items: center;
  padding: 20px;
}

.rowtext>p {
  font-size: 24px;
}

.rowimage{
  width:40%;
}

.rowimage img {
  height:100%;
  max-width: 100%;  
  object-fit: cover;
}

.row#form img {
  height: 250px;
}

.myPage .row:nth-child(2n+1){
  flex-direction:row-reverse;
    background-color: var(--f);
    color: white;
}

.footer {
  display: flex;
  padding: 36px;
  background-color: var(--s);
  height: 30px;
  align-items: center;
  transition: 0.4s;
}

h1.copyright {
  font-size: 16px;
}

span.name {
  font-weight: 600;
}

input {
  height: 30px;
  width: 150px;
}

  @media screen and (max-width: 700px) {

    .myPage{  
      margin-top: 120px;
  }

    .header, .footer {
      padding: 10px !important;
      width: calc(100% - 20px);
  }

h1 {
  font-size: 38px;
}

  .title {
    padding:20px;
  }

.rowtext {
  width: 100%;
}

.rowimage {
  width:100%;
}
    .logo {
      font-size: 69px;
    }

    img#logo {
      height: 100px !important;
    }

    .fa {
      font-size: 30px !important;
    }

    .topnav a:after {
      background-color: transparent;
    }
    
    .topnav a {
      display: none;
    }

    .topnav a.icon {
      float: right;
      display: block;
    }

    .topnav {
      position: unset;
        width:100px;
        margin-left:auto;
    }

    div#myLinks {
      display: block;      
    margin-top: 220px;
    background-color: var(--s);
    }

    .topnav.responsive a {
      float: right;
      display: block;
    }

    .cover {
      height:calc(100vh - 120px);
    }

    .covertext p{
      font-size:30px;
    }

    .row{
      display:block;
      height: 100%;
    }
    
    .row>div{
      padding-left: 0px;
      padding-right: 0px;
    }
 
    .scrollsnap {
      min-height: calc(100vh - 50px);
    }

  }

  form {
    width: 500px;
    display: flex;
    flex-wrap: wrap;
}

label {
  display: inline-block;
  width: 200px;
}

textarea, input {
  vertical-align: bottom;
  width: 200px;
  resize: none;
}

textarea {
  height: 150px;
}

button {
  padding: 7px 5px 3px 5px;
}

h3, button {
  margin:15px;
}