* {
	box-sizing: border-box;
}
html,
body{
    height: auto;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    background-color: #EBEBEB;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

@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: 2000ms;
	--angle: 90deg;
	--gradX: 100%;
	--gradY: 50%;
	--c1: rgba(243, 255, 77, 1);
	--c2: rgba(168, 239, 255, 0.1);
}

section.container {
    background-color: #FFFFFF;
    padding: 50px 25px;
    border-width: 1px;  
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 75%;
    height: 40%;
    font-size: 5vw;
    text-transform: uppercase;
    border: 0.35rem solid;
	border-image: conic-gradient(from var(--angle), var(--c2), var(--c1) 0.1turn, var(--c1) 0.15turn, var(--c2) 0.25turn) 30;
	animation: borderRotate var(--d) linear infinite forwards;
}
@keyframes borderRotate {
	100% {
		--angle: 420deg;
	}
}
section.container h2 {
    text-align: center;
    color: #595959;
    font-family: monospace;
}