@import url("https://fonts.googleapis.com/css?family=Raleway:400");@property --angle{syntax:"<angle>";initial-value:90deg;inherits:true}@property --gradX{syntax:"<percentage>";initial-value:50%;inherits:true}@property --gradY{syntax:"<percentage>";initial-value:0;inherits:true}:root{--d:2500ms;--angle:90deg;--gradX:100%;--gradY:50%;--c1:#00677e;--c2:#15b1fe}.wrapper{min-width:min(40rem,100%)}.box{font-size:3vw;margin:max(1rem,3vw);border:.1rem solid;padding:3vw;-o-border-image:conic-gradient(from var(--angle),var(--c2),var(--c1) 36deg,var(--c1) 54deg,var(--c2) 90deg) 30;border-image:conic-gradient(from var(--angle),var(--c2),var(--c1) 36deg,var(--c1) 54deg,var(--c2) 90deg) 30;animation:borderRotate var(--d) linear infinite forwards}.box:nth-child(2){-o-border-image:radial-gradient(ellipse at var(--gradX) var(--gradY),var(--c1),var(--c1) 10%,var(--c2) 40%) 30;border-image:radial-gradient(ellipse at var(--gradX) var(--gradY),var(--c1),var(--c1) 10%,var(--c2) 40%) 30;animation:borderRadial var(--d) linear infinite forwards}@keyframes borderRotate{to{--angle:420deg}}@keyframes borderRadial{20%{--gradX:100%;--gradY:50%}40%{--gradX:100%;--gradY:100%}60%{--gradX:50%;--gradY:100%}80%{--gradX:0%;--gradY:50%}to{--gradX:50%;--gradY:0%}}.hover-underline-animation{display:inline-block;position:relative;color:#0087ca}.hover-underline-animation:after{content:"";position:absolute;width:100%;transform:scaleX(0);height:2px;bottom:0;left:0;background-color:#0087ca;transform-origin:bottom right;transition:transform .25s ease-out}.hover-underline-animation:hover:after{transform:scaleX(1);transform-origin:bottom left}