FreesideWeb/internal/_includes/css/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

// Non Tailwind CSS Below

.bg-primary {
 background:#fe6431
}
.bg-secondary {
 background:#525252
}
.bg-grey {
 background:#4e5b71
}
.bg-white {
 background:#F3F6FB
}
.bg-discord {
background: #5865F2;
}
.bg-project {
background-image: url("/assets/img/project-bg.png");
background-size: 70vw;
background-position: -30vw;
background-repeat: no-repeat;
}
.bg-alumni {
background-image: url("/assets/img/alumni-bg.jpg");
background-size: 70vw;
background-position: center;
background-repeat: no-repeat;
}
.color-primary {
 color:#240d09
}
.color-secondary {
 color:#fe6431
}
.color-grey {
 color:#4e5b71
}
.color-white {
 color:#F3F6FB
}
.font-base,
.font-heading {
 font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,sans-serif
}
.box-block {
 display:block
}
.box-inline-block {
 display:inline-block
}
.box-flex {
 display:flex
}
.box-grid {
 display:grid
}
.box-hidden {
 display:none
}
.mt-300 {
 margin-top:.8rem
}
.mt-400 {
 margin-top:1rem
}
.mt-500 {
 margin-top:1.25rem
}
.mt-600 {
 margin-top:1.56rem
}
.mt-700 {
 margin-top:1.95rem
}
.mt-800 {
 margin-top:2.44rem
}
.mt-900 {
 margin-top:3.05rem
}
.mt-1000 {
 margin-top:3.81rem
}
.mt-1100 {
 margin-top:4.76rem
}
.mb-300 {
 margin-bottom:.8rem
}
.mb-400 {
 margin-bottom:1rem
}
.mb-500 {
 margin-bottom:1.25rem
}
.mb-600 {
 margin-bottom:1.56rem
}
.mb-700 {
 margin-bottom:1.95rem
}
.mb-800 {
 margin-bottom:2.44rem
}
.mb-900 {
 margin-bottom:3.05rem
}
.mb-1000 {
 margin-bottom:3.81rem
}
.mb-1100 {
 margin-bottom:4.76rem
}
.ml-300 {
 margin-left:.8rem
}
.ml-400 {
 margin-left:1rem
}
.ml-500 {
 margin-left:1.25rem
}
.ml-600 {
 margin-left:1.56rem
}
.ml-700 {
 margin-left:1.95rem
}
.ml-800 {
 margin-left:2.44rem
}
.ml-900 {
 margin-left:3.05rem
}
.ml-1000 {
 margin-left:3.81rem
}
.ml-1100 {
 margin-left:4.76rem
}
.mr-300 {
 margin-right:.8rem
}
.mr-400 {
 margin-right:1rem
}
.mr-500 {
 margin-right:1.25rem
}
.mr-600 {
 margin-right:1.56rem
}
.mr-700 {
 margin-right:1.95rem
}
.mr-800 {
 margin-right:2.44rem
}
.mr-900 {
 margin-right:3.05rem
}
.mr-1000 {
 margin-right:3.81rem
}
.mr-1100 {
 margin-right:4.76rem
}
.pt-300 {
 padding-top:.8rem
}
.pt-400 {
 padding-top:1rem
}
.pt-500 {
 padding-top:1.25rem
}
.pt-600 {
 padding-top:1.56rem
}
.pt-700 {
 padding-top:1.95rem
}
.pt-800 {
 padding-top:2.44rem
}
.pt-900 {
 padding-top:3.05rem
}
.pt-1000 {
 padding-top:3.81rem
}
.pt-1100 {
 padding-top:4.76rem
}
.pb-300 {
 padding-bottom:.8rem
}
.pb-400 {
 padding-bottom:1rem
}
.pb-500 {
 padding-bottom:1.25rem
}
.pb-600 {
 padding-bottom:1.56rem
}
.pb-700 {
 padding-bottom:1.95rem
}
.pb-800 {
 padding-bottom:2.44rem
}
.pb-900 {
 padding-bottom:3.05rem
}
.pb-1000 {
 padding-bottom:3.81rem
}
.pb-1100 {
 padding-bottom:4.76rem
}
.pl-300 {
 padding-left:.8rem
}
.pl-400 {
 padding-left:1rem
}
.pl-500 {
 padding-left:1.25rem
}
.pl-600 {
 padding-left:1.56rem
}
.pl-700 {
 padding-left:1.95rem
}
.pl-800 {
 padding-left:2.44rem
}
.pl-900 {
 padding-left:3.05rem
}
.pl-1000 {
 padding-left:3.81rem
}
.pl-1100 {
 padding-left:4.76rem
}
.pr-300 {
 padding-right:.8rem
}
.pr-400 {
 padding-right:1rem
}
.pr-500 {
 padding-right:1.25rem
}
.pr-600 {
 padding-right:1.56rem
}
.pr-700 {
 padding-right:1.95rem
}
.pr-800 {
 padding-right:2.44rem
}
.pr-900 {
 padding-right:3.05rem
}
.pr-1000 {
 padding-right:3.81rem
}
.pr-1100 {
 padding-right:4.76rem
}
.text-300 {
 font-size:.8rem
}
.text-400 {
 font-size:1rem
}
.text-500 {
 font-size:1.25rem
}
.text-600 {
 font-size:1.56rem
}
.text-700 {
 font-size:1.95rem
}
.text-800 {
 font-size:2.44rem
}
.text-900 {
 font-size:3.05rem
}
.text-1000 {
 font-size:3.81rem
}
.text-1100 {
 font-size:4.76rem
}
.leading-tight {
 line-height:1.1
}
.leading-normal {
 line-height:1.6
}
.leading-loose {
 line-height:2
}
.weight-thin {
 font-weight:300
}
.weight-regular {
 font-weight:400
}
.weight-bold {
 font-weight:700
}
.width-full {
 width:100%
}
.width-screen {
 width:100vw
}
.width-half {
 width:50%
}
.width-quarter {
 width:25%
}
.width-third {
 width:33.3333333333%
}
.height-full {
 height:100%
}
.height-screen {
 height:100vh
}
.length-compact {
 max-width:25ch
}
.length-optimal {
 max-width:75ch
}
.z-20 {
 z-index:20
}
@media screen and (min-width:22.5em) {
 .mobileL\:box-block {
  display:block
 }
 .mobileL\:box-inline-block {
  display:inline-block
 }
 .mobileL\:box-flex {
  display:flex
 }
 .mobileL\:box-grid {
  display:grid
 }
 .mobileL\:box-hidden {
  display:none
 }
 .mobileL\:width-full {
  width:100%
 }
 .mobileL\:width-screen {
  width:100vw
 }
 .mobileL\:width-half {
  width:50%
 }
 .mobileL\:width-quarter {
  width:25%
 }
 .mobileL\:width-third {
  width:33.3333333333%
 }
}
@media screen and (min-width:40em) {
 .mobileXL\:box-block {
  display:block
 }
 .mobileXL\:box-inline-block {
  display:inline-block
 }
 .mobileXL\:box-flex {
  display:flex
 }
 .mobileXL\:box-grid {
  display:grid
 }
 .mobileXL\:box-hidden {
  display:none
 }
 .mobileXL\:width-full {
  width:100%
 }
 .mobileXL\:width-screen {
  width:100vw
 }
 .mobileXL\:width-half {
  width:50%
 }
 .mobileXL\:width-quarter {
  width:25%
 }
 .mobileXL\:width-third {
  width:33.3333333333%
 }
}
@media screen and (min-width:48em) {
 .tablet\:box-block {
  display:block
 }
 .tablet\:box-inline-block {
  display:inline-block
 }
 .tablet\:box-flex {
  display:flex
 }
 .tablet\:box-grid {
  display:grid
 }
 .tablet\:box-hidden {
  display:none
 }
 .tablet\:width-full {
  width:100%
 }
 .tablet\:width-screen {
  width:100vw
 }
 .tablet\:width-half {
  width:50%
 }
 .tablet\:width-quarter {
  width:25%
 }
 .tablet\:width-third {
  width:33.3333333333%
 }
}
@media screen and (min-width:64em) {
 .laptop\:box-block {
  display:block
 }
 .laptop\:box-inline-block {
  display:inline-block
 }
 .laptop\:box-flex {
  display:flex
 }
 .laptop\:box-grid {
  display:grid
 }
 .laptop\:box-hidden {
  display:none
 }
 .laptop\:width-full {
  width:100%
 }
 .laptop\:width-screen {
  width:100vw
 }
 .laptop\:width-half {
  width:50%
 }
 .laptop\:width-quarter {
  width:25%
 }
 .laptop\:width-third {
  width:33.3333333333%
 }
}
@media screen and (min-width:80em) {
 .desktop\:box-block {
  display:block
 }
 .desktop\:box-inline-block {
  display:inline-block
 }
 .desktop\:box-flex {
  display:flex
 }
 .desktop\:box-grid {
  display:grid
 }
 .desktop\:box-hidden {
  display:none
 }
 .desktop\:width-full {
  width:100%
 }
 .desktop\:width-screen {
  width:100vw
 }
 .desktop\:width-half {
  width:50%
 }
 .desktop\:width-quarter {
  width:25%
 }
 .desktop\:width-third {
  width:33.3333333333%
 }
}
@media screen and (min-width:90em) {
 .desktopL\:box-block {
  display:block
 }
 .desktopL\:box-inline-block {
  display:inline-block
 }
 .desktopL\:box-flex {
  display:flex
 }
 .desktopL\:box-grid {
  display:grid
 }
 .desktopL\:box-hidden {
  display:none
 }
 .desktopL\:width-full {
  width:100%
 }
 .desktopL\:width-screen {
  width:100vw
 }
 .desktopL\:width-half {
  width:50%
 }
 .desktopL\:width-quarter {
  width:25%
 }
 .desktopL\:width-third {
  width:33.3333333333%
 }
}
@media screen and (min-width:120em) {
 .desktopXL\:box-block {
  display:block
 }
 .desktopXL\:box-inline-block {
  display:inline-block
 }
 .desktopXL\:box-flex {
  display:flex
 }
 .desktopXL\:box-grid {
  display:grid
 }
 .desktopXL\:box-hidden {
  display:none
 }
 .desktopXL\:width-full {
  width:100%
 }
 .desktopXL\:width-screen {
  width:100vw
 }
 .desktopXL\:width-half {
  width:50%
 }
 .desktopXL\:width-quarter {
  width:25%
 }
 .desktopXL\:width-third {
  width:33.3333333333%
 }
}
:root {
 --max-width:80rem;
 --gap:1.56rem;
 --base-font-size:1rem;
 --ratio:1.1;
 --text-300:calc(var(--base-font-size)/var(--ratio)/var(--ratio));
 --text-400:calc(var(--text-300)*var(--ratio));
 --text-500:calc(var(--text-400)*var(--ratio)*var(--ratio));
 --text-600:calc(var(--text-500)*var(--ratio));
 --text-700:calc(var(--text-600)*var(--ratio));
 --text-800:calc(var(--text-700)*var(--ratio));
 --text-900:calc(var(--text-800)*var(--ratio));
 --text-1000:calc(var(--text-900)*var(--ratio));
 --text-1100:calc(var(--text-1000)*var(--ratio));
 --border-radius:.25rem;
 --border-size:.15rem;
 --transition-duration:.25s;
 --transition-timing:ease-out
}
@media (min-width:48em) {
 :root {
  --ratio:1.2
 }
}
@media (min-width:64em) {
 :root {
  --ratio:1.25
 }
}
.inner {
 width:100%;
 margin:0 auto;
 max-width:var(--max-width);
 padding-left:1.56rem;
 padding-right:1.56rem
}
.flow>*+* {
 margin-top:var(--gap)
}
@media (min-width:48em) {
 .flow>*+* {
  --gap:1.95rem
 }
}
[data-src] {
 opacity:0
}
.loaded {
 opacity:1;
 transition:opacity var(--transition-duration) var(--transition-timing)
}
.sr-only {
 position:absolute;
 width:1px;
 height:1px;
 padding:0;
 margin:-1px;
 overflow:hidden;
 clip:rect(0,0,0,0);
 white-space:nowrap;
 border-width:0
}
*,
:after,
:before {
 box-sizing:border-box
}
html {
 min-height:100%;
 scroll-behavior:smooth
}
body {
 overflow-x:hidden;
 text-rendering:optimizeLegibility;
 -webkit-font-smoothing:antialiased
}
blockquote,
body,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
ol,
p,
ul {
 margin:0
}
img {
 display:block;
 max-width:100%;
 height:auto
}
button,
input,
select,
textarea {
 font:inherit
}
@media (prefers-reduced-motion:reduce) {
 * {
  -webkit-animation-duration:NaNs!important;
  animation-duration:NaNs!important;
  -webkit-animation-iteration-count:1!important;
  animation-iteration-count:1!important;
  transition-duration:NaNs!important;
  scroll-behavior:auto!important
 }
}
ol[class],
ul[class] {
 list-style:none;
 padding:0
}
body {
 font-size:var(--text-500)
}
h1,
h2,
h3 {
 line-height:1.1;
 letter-spacing:-.01rem
}
h1 {
 --gap:1.95rem;
 font-size:var(--text-900);
 margin:0 0 var(--gap)
}
h2 {
 font-size:var(--text-800)
}
h3 {
 font-size:var(--text-700)
}
.content {
 word-wrap:break-word
}
.sub-heading {
 font-size:var(--text-700);
 line-height:1.5
}
ol,
ul {
 padding:0 0 0 1.25rem
}
a {
 text-decoration: none;
 color: #fe6431;
 transition:color var(--transition-duration) var(--transition-timing)
}
a:hover{
    text-decoration: none;
    color: #240d09;

   }
a:not([class]) {
 color:#F3F6FB;
 padding-bottom:.1rem;
 -webkit-text-decoration-skip:ink;
 text-decoration-skip-ink:auto
}
a:not([class]):hover {
 color: #240d09;
}
:focus {
 outline:1px solid #24e0d0;
 outline-offset:.25rem
}
.wrapper {
 min-height:100vh;
 flex-direction:column;
 background-attachment:fixed;
}
@media (min-width:40em) {
 .wrapper {
  padding-bottom:0
 }
}
.logo {
 --logo-size:1.25rem;
 font-size:var(--logo-size);
 margin:0 auto
}
@media (min-width:40em) {
 .logo {
  --logo-size:1.56rem;
  margin:0 auto 0 0
 }
}
@media (min-width:40em) {
 .header-inner {
  align-items:center;
  justify-content:space-between;
 }
}
.nav .link {
 color: #240d09;
 height:3.05rem;
 line-height:3.05rem
}
.nav .link.active,
.nav .link:hover {
 color: #fe6431;
}
.nav .link-button {
 border-radius:var(--border-radius);
 transition:background-color var(--transition-duration) var(--transition-timing)
}
.nav .link-button:hover {
 background:#525252;
 color: #fe6431;
}
.nav .link-calltoaction {
    border-radius:var(--border-radius);
    transition:background-color var(--transition-duration) var(--transition-timing)
}
   .nav .link-calltoaction:hover {
    background:#525252;
    color: #F3F6FB;
}
.mobile-nav {
 --transition-duration:.3s;
 position:fixed;
 top:0;
 left:0;
 overflow-y:auto;
 transform:translate3d(-100%,0,0);
 transition:transform var(--transition-duration) cubic-bezier(.77,0,.175,1);
 transition-delay:.1s;
 will-change:transform
}
.mobile-nav.menu-visible {
 transform:translateZ(0)
}
.mobile-nav .link {
 --gap:.25rem;
 padding:var(--gap) 0
}
.mobile-nav .link.active,
.mobile-nav .link:hover {
 color:#fe6431
}
.mobile-nav-toggle {
 position:fixed;
 bottom:0;
 height:3.05rem;
 align-items:center;
 justify-content:center;
 border:0;
 outline:0
}
.mobile-nav-toggle .mobile-nav-icon {
 flex-direction:column
}
.mobile-nav-toggle .icon-line {
 --transition-duration:.2s;
 --transition-timing:cubic-bezier(0,0,.2,1);
 height:2px;
 width:1.25rem;
 transform-origin:7px 1px;
 transition:transform var(--transition-duration) var(--transition-timing),opacity var(--transition-duration) var(--transition-timing)
}
.mobile-nav-toggle .icon-line:not(:last-child) {
 margin-bottom:.25rem
}
.mobile-nav-toggle.expanded .icon-line {
 margin:0
}
.mobile-nav-toggle.expanded .icon-line:first-child {
 transform:rotate(45deg)
}
.mobile-nav-toggle.expanded .icon-line:nth-child(2) {
 opacity:0
}
.mobile-nav-toggle.expanded .icon-line:last-child {
 transform:rotate(-45deg)
}
.main {
 flex-direction:column;
 flex:1
}
.main:focus {
 outline:0
}
.page-header {
 --gap:2.44rem;
 margin-bottom:var(--gap)
}
@media (min-width:48em) {
 .page-header {
  --gap:3.05rem
 }
}
.footer-inner {
 align-items:center;
 justify-content:space-between
}
.button {
 display:inline-block;
 background-color:#fe6431;
 border:0;
 border-radius:var(--border-radius);
 color:#525252;
 padding:.8rem 1.25rem;
 transition:background-color var(--transition-duration) var(--transition-timing);
 font-weight:700
}
.button:hover {
 background:#fe6431
}
.pagination {
 --gap:3.81rem
}
.pagination .items {
 justify-content:space-between;
 padding:0
}
.input,
.textarea {
 border:0;
 border-radius:var(--border-radius);
 padding:0 .5rem
}
.input {
 height:2.44rem
}
.textarea {
 height:4.76rem
}
.social-icons .icon-link:hover {
 color:#fe6431
}
.social-icons .icon {
 --social-icon-size:1.25rem;
 width:var(--social-icon-size);
 height:var(--social-icon-size)
}