@font-face {
    font-family: 'aljareeda-title';
    src: url("./fonts/al-jareeda-title/aljareeda-title.ttf");
}
@font-face {
    font-family: "myriad-pro";
    src: url("./fonts/myriad-pro/MYRIADPRO-REGULAR.OTF");
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
body {
    background-color: #fff;
    font-family: "myriad-pro";
}

main {
    display: grid;
    column-gap: 1rem;   
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
    text-align: center;
    justify-items: center;
}

.flex {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
    position: relative;
}
.flex > div {
    display: flex;
    flex-direction: column;
    gap: 5rem;
    justify-content: center;
    align-items: center;
}
.myriad {
	font-family: "myriad-pro";
	font-weight: normal;
	/* font-size: 2.5rem; */
	font-size: 2rem;
}
.jareeda {
	font-family: "aljareeda-title";
	font-weight: normal;
	/* font-size: 4.5rem; */
	font-size: 3rem;
}
.logo {
    /* max-width: 250px; */
    max-width: 150px;
}
.stripe {
	position: absolute;
	height: auto;
	top: 50%;
	transform: translateY(-50%);
}
/* initial stripes position */
.left-top, .left-bottom {
    inset-inline-start: 0;
}
.right-top, .right-bottom {
    inset-inline-end: 0;
}
/* stripes dimensions */
.left-top, .right-top {
    width: 143px;
}
.left-bottom, .right-bottom {
    width: 231px;
    z-index: -1;
}
/* final stripes position */
.left-top {
	translate: 67%;
}
.right-top {
	translate: -67%;
}
.loader {
    max-width: 355px;
    translate: 0 20%;
    animation: spin 15000ms infinite linear;
}
.sr-only {
    position: absolute !important; /* Outside the DOM flow */
    height: 1px; width: 1px; /* Nearly collapsed */
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE 7+ only support clip without commas */
    clip: rect(1px, 1px, 1px, 1px); /* All other browsers */
}

@media screen and (max-width: 785px) {
    .left-top, .right-top {
        width: 77px;
    }
    .left-bottom, .right-bottom {
        width: 125px; 
    }

    .left-top {
        translate: 30%;
    }
    .left-bottom {translate: -20%;}
    .right-top {
        translate: 40%;
        rotate: -2deg;
    }
    .left-top, .left-bottom {
        inset-inline-start: -8%;
    }
    .flex {justify-content: center; gap: 2rem;}
    .right-bottom { translate: 58%; rotate: -4deg;}
    .logo {max-width: 170px;}
    .flex > div {max-width: 65%;gap: 2.5rem;}
    .loader {
        max-width: 185px;
        translate: 0;
    }

    .myriad {
        font-size: 1.9rem;
    }
    .jareeda {
        font-size: 2rem;
    }
}
@media screen and (max-width: 360px) {
    .right-top, .right-bottom {
        inset-inline-end: -8%;
    }
}