:root {
--night:#020a12ff;
--night2:#0e141bff;
--night3:#151e28ff;
--night4:#1c2835ff;
--dark:#233243ff;
--blue-light:#294b6bff;
--white-light:#FFF5EB;
--bg-light:#FFF;
--grey-light:#d4d5d9;
--fresh:#ffc482ff;


  /* --blue-ncs:#0087adff;
  --sage:#b3af8fff;
  --peach:#ffc482ff; */

}

*{box-sizing: border-box;}

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(material.otf) format('opentype');
}
@font-face {font-family:'f-serif'; src:url('playfair.ttf') format('truetype'); }

@font-face {font-family:'recall'; src:url('recall.ttf') format('truetype'); }
@font-face {font-family:'f-bold'; src:url('roboto_bold.ttf') format('truetype'); }
@font-face {font-family:'f-med'; src:url('roboto_med.ttf') format('truetype'); }
@font-face {font-family:'f-light'; src:url('roboto_light.ttf') format('truetype'); }
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  letter-spacing: normal;
  text-transform: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings:'liga';
  -webkit-font-smoothing:antialiased;
}


::-webkit-scrollbar {
  display: none;
}

*{overscroll-behavior:none;}
html{font-family:f-med;}
*, *:active, *:hover, *:focus{-webkit-appearance:none;outline:none;}

body{margin:0;padding:0;}
.framework{display:flex;justify-content:center;left:0;right:0;top:0;}
.container{position:relative;top:0;left:0;right:0;overflow:scroll;}
.carousel{position:relative;top:0;left:0;right:0;bottom:0;overflow-x:scroll;display:flex;flex-direction:row;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;}
  .project{position:relative;top:0;left:0;right:0;width:320px;height:100vh;scroll-snap-align:start;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-content:center;flex-shrink:0;flex-basis:100%;background-position:center center;background-repeat:no-repeat;background-size:cover;gap:20px;}
    .info{margin-top:-10px;position:relative;width:320px;z-index:9;display:flex;gap:20px;align-items:center;justify-content:center;flex-direction:column;}

.nav{position:fixed;bottom:40px;min-width:320px;max-width:75vw;height:100px;background:#111;color:#f5f3f1;z-index:10;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;border-radius:20px;}
  .frost{background:rgba(0, 0, 0, 0.5);box-shadow:0 4px 30px rgba(0, 0, 0, 0.3);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);}
.overview{position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;gap:20px;}
.legal{position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;gap:10px;}
  .entry{position:relative;font-family:f-bold;color:#EDEAE7;line-height:20px;font-size:16px;}
  #citadel{letter-spacing:5px;font-family:f-serif;}
  #solar{letter-spacing:1px;}
  #citadel-bg{background-image:linear-gradient(rgba(0, 0, 0, 0.1) 10%,rgba(0, 0, 0, 0.4) 45% ,rgba(0, 0, 0, 0.1) 90%), url('https://tse4.mm.bing.net/th?id=OIG1.QD0jUmm.M9.3OtU0OBlA&pid=ImgGn');}
  #solar-bg{background-image:linear-gradient(rgba(0, 0, 0, 0.1) 10%,rgba(0, 0, 0, 0.4) 45% ,rgba(0, 0, 0, 0.1) 90%), url('https://tse3.mm.bing.net/th?id=OIG4.GZnE_x.abBNd8HGz66Gs&pid=ImgGn');}
  .entry-legal{font-size:12px;color:#CAC4BC;font-family:f-light;letter-spacing:-.5px;}
.icon{width:80px;height:80px;border-radius:20px;box-shadow:#333 0 0 10px 1px;}

.text-l{font-family:f-bold;font-size:40px;letter-spacing:12px;mix-blend-mode:difference;color:#e5daca;text-shadow:#e5daca 0 0 5px;}
  .serif{font-family:f-serif;font-weight:600;}
  .narrow{letter-spacing:5px;}
.text-s{font-family:f-light;font-size:20px;line-height:30px;letter-spacing:1px;mix-blend-mode:difference;color:#fff;text-shadow:#111 4px 0 10px;}
.center{text-align:center;}

.button{position:relative;border:4px solid #E5DACA;font-family:f-bold;letter-spacing:1px;color:#E5DACA;width:200px;text-align:center;height:44px;line-height:36px;font-size:16px;border-radius:24px;}
.button:hover{background:#E5DACA;color:#333;}

a{color:inherit;text-decoration:none;margin:0;padding:0;}

@font-face {font-family:'f-bold'; src:url('https://compan1on.com/src/roboto_bold.ttf') format('truetype'); }
@font-face {font-family:'f-med'; src:url('https://compan1on.com/src/roboto_med.ttf') format('truetype'); }
@font-face {font-family:'f-light'; src:url('src/https://compan1on.com/src/roboto_lightt.ttf.ttf') format('truetype'); }
@font-face {font-family:'f-thin'; src:url('https://compan1on.com/src/roboto_hin.ttf') format('truetype'); }

div{box-sizing:border-box;}
.diag{position:relative;width:400px;height:400px;border:0px solid black;}
.diag-s{position:relative;width:90px;height:90px;border:1px solid #F5F2EF;border-radius:20px;background:#F9F7F3;}
.diag-l{position:relative;width:316px;min-height:316px;border:1px solid #F5F2EF;border-radius:20px;left:84px;top:-10px;background:#F9F7F3;padding:40px;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:center;gap:10px;}


.text-l{font-size:26px;line-height:32px;align-self:flex-start;font-family:"Playfair Display", sans-serif;font-weight:500;letter-spacing:8px;text-transform:uppercase;}
.text-m{font-size:20px;line-height:24px;align-self:flex-start;font-family:"Roboto", sans-serif;font-weight:400;letter-spacing:6px;}
.text-s{font-size:14px;line-height:20px;align-self:flex-start;font-family:"Playfair Display", sans-serif;font-weight:400;letter-spacing:.5px;}
.text-c{align-self:center;}
.text-wide{letter-spacing:6px;}
.text-narrow{letter-spacing:-.25px;}
.text-normal{letter-spacing:.5px;}
.button{position:relative;background:#333;color:#f0f0f0;width:236px;text-align:center;height:48px;line-height:48px;font-size:16px;border-radius:24px;}
.button:hover{background:#111;}
.input{position:relative;color:#333;background:inherit;width:236px;border:3px solid #E5E1DC;box-sizing:border-box;height:48px;line-height:48px;font-size:16px;border-radius:24px;padding:0 16px;}
input::placeholder{color:inherit;}
input:focus{background:#E5E1DC;outline:none !important;outline-width:0 !important;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;}
.text-link{text-decoration:underline;} /* or none */
.text-link::after{position:absolute;content: '\203A';margin-left:3px;}
.spacer{position:relative;}
  .double{padding:10px 0;}


  @font-face {font-family:'f-bold'; src:url('https://compan1on.com/src/roboto_bold.ttf') format('truetype'); }
@font-face {font-family:'f-med'; src:url('https://compan1on.com/src/roboto_med.ttf') format('truetype'); }
@font-face {font-family:'f-light'; src:url('src/https://compan1on.com/src/roboto_lightt.ttf.ttf') format('truetype'); }
@font-face {font-family:'f-thin'; src:url('https://compan1on.com/src/roboto_hin.ttf') format('truetype'); }

div{box-sizing:border-box;}
.diag{position:relative;width:400px;height:400px;border:0px solid black;}
.diag-s{position:relative;width:90px;height:90px;border:1px solid #F5F2EF;border-radius:20px;background:#F9F7F3;}
.diag-l{position:relative;width:316px;min-height:316px;border:1px solid #F5F2EF;border-radius:20px;left:84px;top:-10px;background:#F9F7F3;padding:40px;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:center;gap:10px;}


.text-l{font-size:26px;line-height:32px;align-self:flex-start;font-family:"Playfair Display", sans-serif;font-weight:500;letter-spacing:8px;text-transform:uppercase;}
.text-m{font-size:20px;line-height:24px;align-self:flex-start;font-family:"Roboto", sans-serif;font-weight:400;letter-spacing:6px;}
.text-s{font-size:14px;line-height:20px;align-self:flex-start;font-family:"Playfair Display", sans-serif;font-weight:400;letter-spacing:.5px;}
.text-c{align-self:center;}
.text-wide{letter-spacing:6px;}
.text-narrow{letter-spacing:-.25px;}
.text-normal{letter-spacing:.5px;}
.button{position:relative;background:#333;color:#f0f0f0;width:236px;text-align:center;height:48px;line-height:48px;font-size:16px;border-radius:24px;}
.button:hover{background:#111;}
.input{position:relative;color:#333;background:inherit;width:236px;border:3px solid #E5E1DC;box-sizing:border-box;height:48px;line-height:48px;font-size:16px;border-radius:24px;padding:0 16px;}
input::placeholder{color:inherit;}
input:focus{background:#E5E1DC;outline:none !important;outline-width:0 !important;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;}
.text-link{text-decoration:underline;} /* or none */
.text-link::after{position:absolute;content: '\203A';margin-left:3px;}
.spacer{position:relative;}
  .double{padding:10px 0;}