html,
body {
    overflow-x: hidden;
    height: 100%;
    width: 100%;
    margin: 0%;
    background: url(/images/Background.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 100vh;
    margin: 0;
font-family: "Futara";
}

@font-face {
  font-family: "Futara";
  src: url(/Font/FuturaCyrillicBold.ttf);
}

h2 {
    color: #ffffff;
    font-size: 1.5vw;
}

header {
  background-color: #405e65;
  width: 100vw;
  height: fit-content;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
}


h1 {
    color: white;
    margin-left: 5%;
    font-size: 2vw;
}

.base {
    background-color: #263548;
    gap: 1vw;
    margin-top: 5%;
    margin-left: 5%;
    width: clamp(50px, 90vw, 5000px);
    height: 40vh;
    border-radius: 30px;
    display: flex;
    grid-auto-columns: 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 20% 45% 30%;
    gap: 0px 0px;
    flex-direction: column;
}

.title {
    grid-area: title;
    margin-top: 2%;
    margin-bottom: 3%;
}


.base:hover, #base2:hover{
  background-color: #48575a;
  transition: 0.3s;
}

.base:active, #base2:active{
  background-color: #272e30;
  transition: 0.3s;
}

p {
    color: #ffffff;
    font-size: 2vh;
}

nav {
  color: #d9d9d9;
  display: flex;
  flex-direction: row;
  text-decoration: none;
  font-family: "Futara";
  margin-top: 5vh;
  margin-right: 5vw;
  gap: 2vw;
}


.link {
  font-size: 1.5vw;
  text-decoration: none;
  color: #ffffff;
}

.link:hover {
  color: #58bbcfd4;
  text-decoration: wavy;
  text-decoration: none;
  transition: 0.3s;
}

.link:active {
  color: #52657f;
  text-decoration: none;
}

.link:visited {
  color: #ffffff;
  text-decoration: none;
}

li{color: #fffdfd;
margin-left: 3%;
margin-bottom: 1%;}

label {
    display: flex;
    flex-direction: column;
    color: #ffffff;
    font-size: 2vw;
    width: 100%;
    margin-left: 3%;
    margin-bottom: 1%;
}

input {
    background-color: #405e65;
    color: #C5BABA;
    font-size: 1vh;
    border-radius: 33px;
    width: 95%;
    height: 6vh;
    margin-bottom: 3%;
    font-family:"Futara";
}

input:focus{
    border-radius:5px;
    transition:0.2s;
}

textarea {
  background-color: #405e65;
    color: #C5BABA;
    font-size: 1vh;
    border-radius: 10px;
    width: 95%;
    height: 12vh;
    resize:none;
    font-family:"Futara";
}

textarea:focus{
    border-radius:5px;
    transition:0.2s;
}


.bevestig {
   background-color: #405e65;
    color: #ffffff;
    font-family: "Futara";
    font-size: 2vh;
    height: 6vh;
    width: 80%;
    border-radius: 33px;
    grid-area: button;
    margin-left: 10%;
    margin-top: 2%;
}

.bevestig:hover {
    color: #fffdfd;
    background-color: #272e30;
    transition:0.4s;
}

.bevestig:active {
    background-color: #384346;
    transition:0.2s;
}

#base2 {
    display: grid;
    background-color: #263548;
    gap: 1vw;
    margin-top: 5%;
    margin-left: 5%;
    margin-bottom: 2%;
    width: clamp(50px, 90vw, 5000px);
    border-radius: 30px;
    height: 70vh;
    grid-auto-columns: 1fr;
    grid-template-columns: 1fr;
    grid-template-rows: 20% 1fr;
    gap: 0px 0px;
    grid-template-areas:
        "title "
        " label1 "
    ;
    justify-items: stretch;
}

.label1 {
    grid-area: label1;
}

.label2 {
    grid-area: label2;
}

.title2 {
    grid-area: title;
    margin-left: 5%;
}

::-webkit-scrollbar {
  background-color: #405e65;
}

::-webkit-scrollbar-thumb {
  background-color: #263548;
  border-radius: 10px;
}

@media screen and (max-width:1500px){
    .base{height: 20vw;}
}

@media screen and (max-width:600px) {
    nav{flex-direction: column; 
    margin-top: 4%;}


  h1 {
    font-size: 4.5vw;
    text-align: center;
  }

  p {
    font-size: 3.5vw;
    text-align: center;
  }

  .link {
    font-size: 3vw;
  }

    .base{text-align: center;
    height: fit-content;}

    .title{margin-top: 5%;
    margin-left:0%;}

    li{padding: 5%;
    margin-left:0%;}

    #base2{height: 70%;}

    .label1,.label2,.label3{font-size:3vw;
    margin-left:1%;}

    input, textarea, button{margin-left:0%;
    padding: 5%;
    width: 80%;}

    input{height: 2vw;
    margin-left: 4%;}

    textarea{margin-left: 4%;}


    .bevestig {
        margin-left: 0%;
        padding: 5%;
        width: 80%;
    }
  
    .btntxt{margin-top: -3%;}
    
}

@media screen and (max-width:500px) {
    ::-webkit-scrollbar{display: none;}
}

@media screen and (min-height:1000px){
    #base2{height:50vh;}
}