@font-face {
  font-family: 'DIN';
  src: url('./../font/D-DINCondensed-Bold.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'IBMPlex';
  src: url('./../font/IBMPlex.ttf') format('opentype');

}

* {
	box-sizing: border-box;
	font-family:  'IBMPlex', sans-serif;
}

.din {
    font-family: 'DIN', sans-serif !important;
	font-weight: bold;
	font-style: normal;
	text-transform: uppercase;
}

@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;
}

body {
	text-align: center;
	margin: 0;
	background-color: #0F172A;
    font-family: 'IBMPlex', sans-serif;
    background-color: white;
	min-height: 100vh;
}

p {
	margin: 0;
}

:root {
	--d: 2500ms;
	--angle: 90deg;
	--gradX: 100%;
	--gradY: 50%;
	--c1: #42C878;
	--c2: #a8efff1a;
}

.wrapper {
	min-width: min(40rem, 100%);
    width: 100%;
    height: calc(100vh - 32px);
    
}

.box {
	height: calc(100vh - 32px);
	border: 2px solid;
	background-color: #fff;
    /* background-image: url(../img/mask-3.png);
    background-size: contain;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat; */
    padding: 16px;
    text-align: start;
    display: flex;
    flex-direction: column;
    justify-content: space-between;    
	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;
	}
}

@keyframes borderRadial {
	20% {
		--gradX: 100%;
		--gradY: 50%;
	}
	40% {
		--gradX: 100%;
		--gradY: 100%;
	}
	60% {
		--gradX: 50%;
		--gradY: 100%;
	}
	80% {
		--gradX: 0%;
		--gradY: 50%;
	}
	100% {
		--gradX: 50%;
		--gradY: 0%;
	}
}

.main-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}