@import "https://fonts.googleapis.com/css?family=Raleway:200";
html,body{height:100%}body{background:#242626;justify-content:center;align-items:center;height:100%;display:flex}.logo{border-radius:50%;padding:15px;overflow:hidden;box-shadow:0 0 10px #0000004d}.logo img{aspect-ratio:1;object-fit:cover;width:100%}.logo:hover{transition:transform .3s ease-in-out;transform:scale(1.1)}.logo:not(:hover){transition:transform .3s ease-in-out;transform:scale(1)}.gradient-box-border{--borderWidth:2.5px;--borderRadius:2px;background:0 0;border-radius:2px;position:relative}.gradient-box-border:after{content:"";top:calc(-1*var(--borderWidth));left:calc(-1*var(--borderWidth));height:calc(100% + var(--borderWidth)*2);width:calc(100% + var(--borderWidth)*2);background:linear-gradient(to left in oklch,var(--color-1),var(--color-2));border-radius:calc(2*var(--borderRadius));z-index:-1;background-size:300% 300%;animation:3s linear infinite alternate gradient-change-img;position:absolute}@property --color-1{syntax:"<color>";inherits:false;initial-value:#07b39b90}@property --color-2{syntax:"<color>";inherits:false;initial-value:#0a4075e6}@keyframes gradient-change-img{to{--color-1:#3f3aaf70;--color-2:#b74ffb70}}.gradient-border{--borderWidth:2.5px;--borderRadius:50%;background:0 0;border-radius:50%;position:relative}.gradient-border:after{content:"";top:calc(-1*var(--borderWidth));left:calc(-1*var(--borderWidth));height:calc(100% + var(--borderWidth)*2);width:calc(100% + var(--borderWidth)*2);background:linear-gradient(to left in oklch,var(--color-1),var(--color-2));border-radius:calc(2*var(--borderRadius));z-index:-1;background-size:300% 300%;animation:3s linear infinite alternate gradient-change-img;position:absolute}@keyframes animatedgradient{0%,to{background-position:0%}50%{background-position:100%}}