html, body {
      margin: 0;
      padding:0;
      box-sizing: border-box;
      font-family: carolineale,sans-serif;
      font-weight:200;
      line-height:32px;
      font-size:22px;
    }
   
    canvas {
      display: block;
      width:100%;
      padding:0;
      margin:0;
      box-sizing: border-box;
      height: 100%;
      z-index:-2;
      position: fixed;

    }

    ul{margin:0; margin-block-start: 0em; margin-block-end: 0em; padding-inline-start: 0px;}

    li{list-style-type: none; margin-bottom:10px;}
    li:last-child;{margin-bottom:0px;}

    a {text-decoration: none;}



    .column1-2{
      display:inline-block;
      width:46%;
      padding:4%;
      font-weight: 200;
      box-sizing: border-box;
      font-size:calc(0.5rem + 0.8vw);
    }

    .column1-2 img{border-radius:50px;}

    .gold{color:#b87757;}
    .blue{color:#0000FF;}

    a{color:#FFF;}

    h1{font-family:'Playfair',sans-serif;}
    h2,h3,h4,h5,h6{font-family: carolineale, sans-serif;}
    h2{font-size:calc(20px + 2.2vw) ; margin:150px 0 40px 0; font-family: carolineale, sans-serif;}
    h3{font-size:calc(20px + 1.3vw) ; margin:0;}
    h4{font-size:calc(20px + 1.1vw) ; margin:30px 0 30px 0;}
    .content{padding:30px;}
    .content h3{font-size:calc(20px + 1vw); margin:0 0 20px 0 ;}
    .content p{margin:0 0 0px 0; font-size:22px;line-height:26px;}

.button{background:#0000FF; color:#FFF;}


.slider-wrapper{
  position:relative;
  width:auto;
  cursor: move;
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}

.slider-wrapper:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

.slider-container {
position: relative;
max-width: 90%;
margin: 0px auto;
overflow: hidden;

}


.slider {
width: 100%;
display: flex;
transition: transform 0.5s ease-in-out;
}


.slide {
flex: 1 0 100%;
background-color: rgba(0,0,0,0.5);
backdrop-filter: blur(8px);
box-sizing: border-box;
text-align: center;
font-size: calc(0.6rem + 0.8vw);
}


.slide img {
width: 100%;
max-width: 100%;
}

.borderblurred{
  border-radius:5px;
  background-color: rgba(0,0,0,0.2);
  backdrop-filter: blur(12px);
  padding:30px;
  color:#FFF;
  box-sizing: border-box;
  margin: 0px auto;
  }


.borderblurred h2{margin-top:40px;}
.borderblurred img{max-width:100%;}

.autofit{display:inline-block; max-width:auto; width:auto; padding:40px; margin-top:40px;}

.nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
color: white;
border: none;
font-size: 24px;
padding: 10px 15px;
cursor: pointer;
z-index: 10;
background: none;
width: 40px;
height: 40px;
}


.nav.prev {
  left: calc(27.5% - 60px);
}

.nav.next {
  right: calc(27.5% - 60px);
}


.slider-dots {
text-align: center;
margin-top: 15px;
}


.slider-dots .dot {
display: inline-block;
width: 8px;
height: 8px;
margin: 0 6px;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 50%;
cursor: pointer;
transition: background-color 0.3s;
}


.slider-dots .dot.active {
background-color: white;
}


    @media screen and (width <= 768px)
    {
      .column1-2{width:100%; padding:5%; font-size:1rem;}
      .projectsmobile img{display:block;}
      .slider-container{max-width:80%;}
      .borderblurred, .autofit{max-width:80%;width:80%;}

      h1{margin-bottom:250px;}
      h2{margin:100px 0 20px 0;}
      h3{font-size:1.5rem;}
      .column1-2:last-child{margin-top:80px;}
      .desktop{display:none;}
      .mobile{display:block;}

      .nav.prev {
        left: calc(10% - 40px);
      }

      .nav.next {
        right: calc(10% - 40px);
      }
  }

     @media screen and (width > 768px)
    {
      .projectsdesktop img{display:block;}
      .projectsmobile img{display:none;}
      .slider-container{max-width:45%;}
      .borderblurred{max-width:45%;}
      .desktop{display:block;}
      .mobile{display:none;}
    }