@font-face {
   font-family: 'open sans';
   src: url('/font/WorkSans-VariableFont_wght.ttf') format('truetype');
}
html * {
   font-family: 'open sans';
}
.header{
   color:var(--text);
   font-size: 70px;
   text-align: center;
   text-shadow: -1px 1px 2px var(--secondary),
      1px 1px 2px var(--secondary),
      1px -1px 0 var(--secondary),
      -1px -1px 0 var(--secondary);
}
section{
   position: relative;
   display: block;
   flex-direction: column;
   align-items: center;
   margin-bottom: 40px;
}
body{
   background: #181e36;
   /* background: #ff80a0;  // Use this for a pink background instead */
   font-size: 25px;
   font-family:sans-serif;
   overflow:auto;
   color:var(--text);
   margin-left: 0.5%;
   text-align: center;
   margin: 0px;
@keyframes animated-bg {
   0% { background-position: 0% 50%; }
   50% { background-position: 100% 50%; }
   100% { background-position: 0% 50%; }
}
}
.bento-container {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   margin-top: 40px;
}
.bento{
   width: 320px;
   background: linear-gradient(135deg, var(--accent) 60%, var(--primary) 100%);
   color: var(--text);
   display: inline-block;
   align-items: top;
   padding: 32px 28px 32px 28px;
   margin: 28px 18px 28px 18px;
   vertical-align: top;
   border-radius: 28px;
   box-shadow: 0 6px 32px 0 rgba(119,159,238,0.18), 0 1.5px 8px 0 rgba(255,128,160,0.10);
   box-sizing: border-box;
   transition: transform 0.18s, box-shadow 0.18s;
   border: 2.5px solid var(--primary);
}
.bento:hover {
   transform: translateY(-6px) scale(1.025);
   box-shadow: 0 12px 40px 0 rgba(255,128,160,0.18), 0 3px 16px 0 rgba(119,159,238,0.13);
}
.image{
   border-radius: 28px 28px 12px 12px;
   border: var(--primary) 4px solid;
   display: block;
   margin-left: auto;
   margin-right: auto;
   height: 320px;
   max-width: 90vw;
   margin-bottom: 28px;
   box-shadow: 0 4px 18px 0 rgba(119,159,238,0.13);
   background: #fff2;
}
.video {
   border-radius: 0 0 28px 28px;
   border: var(--accent) 4px solid;
   width: 640px;
   height: 360px;
   margin-top: -8px;
   box-shadow: 0 4px 18px 0 rgba(255,128,160,0.13);
   background: #fff1;
}

@media screen and (max-width:720px){
   .body{
      font-size: 18px;
   }
   .video{
      width:100%;
   }
   .header{
      font-size: 50px;
      
   }
}
:root{
   --text: #fafafa;
   --background: #050505;
   --primary: #ff80a0;
   --secondary: #121721;
   --accent: #779fee;
   --bone: #D7D2CB;
}
.solid {
   border-top: 5px solid var(--accent);
   margin: -1px;
   max-width: 100%;
}
.solidbone {
   border-top: 3px solid var(--bone);
   margin: 0px;
   max-width: 100%;
}
.spacer {
   aspect-ratio: 900/450;
   width:100%;
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;

}
.layer1 {
   background-image: url('./layeredwaves.svg');
}
.gradient1 {
   background-image: linear-gradient(315deg, #779fee 0%, #dea6d7 60%, #ff80a0 100%);
   display: flex;
   flex-direction: column;
   margin-bottom: 40px;
   box-shadow: 0 2px 24px 0 rgba(119,159,238,0.10);
   border-radius: 0 0 32px 32px;
   padding-bottom: 18px;
   border-bottom: none;
   position: static;
   box-sizing: border-box;
   /* For a gradient border, use below instead: */
   /* border-bottom: 6px solid; border-image: linear-gradient(90deg, #779fee, #ff80a0) 1; */
}

a:link {
   color: var(--text);
   background-color: transparent;
   text-decoration: none;
}
a:visited {
   color: var(--text);
   background-color: transparent;
   text-decoration: none;
}
a:hover {
   color: var(--primary);
   background-color: transparent;
   text-decoration: underline;
}
a:active {
   color: var(--primary);
   background-color: transparent;
   text-decoration: underline;
}
.glow-on-hover {
   width: 220px;
   height: 52px;
   border: none;
   outline: none;
   color: #fff;
   background: linear-gradient(90deg, var(--primary) 60%, var(--accent) 100%);
   cursor: pointer;
   position: relative;
   z-index: 0;
   border-radius: 16px;
   margin-bottom: 16px;
   font-size: 1.1em;
   font-weight: 600;
   letter-spacing: 0.04em;
   box-shadow: 0 2px 12px 0 rgba(255,128,160,0.10);
   transition: box-shadow 0.18s, transform 0.18s;
}
.glow-on-hover:hover {
   box-shadow: 0 6px 24px 0 rgba(119,159,238,0.18), 0 1.5px 8px 0 rgba(255,128,160,0.13);
   transform: translateY(-2px) scale(1.03);
}

.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}
.glow-on-hover:active {
    color: var(--secondary)
}
.glow-on-hover:active:after {
    background: transparent;
}
.glow-on-hover:hover:before {
    opacity: 1;
}
.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--secondary);
    left: 0;
    top: 0;
    border-radius: 10px;
}
@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}