@font-face{
font-family:"faseh";
src:url("https://alsaha-alelmiya.github.io/Resources/Faseh.woff2") format("woff2");
}
@font-face{
font-family:"faseh-bold";
src:url("https://alsaha-alelmiya.github.io/Resources/Faseh-Bold.woff2") format("woff2");
}
*{
margin:0;
padding:0;
-webkit-tap-highlight-color:transparent;
-webkit-font-smoothing: antialiased;
transition-duration:0.1s;
-webkit-transition-duration: 0.1s;
}
body{
display: flex;
flex-direction:column;
min-height:100vh;
position: relative;
background-color:white;
}
::selection{
background-color:#0097B2;
color:#f3eced;
}
@keyframes fade-in{
from{
opacity:0;
}
to{
opacity:1;
}
}
.logo{
position:relative;
top:-40px;
width:230px;
margin:20px auto;
border-radius:20px 60px;
}
.logo-div{
margin:40px auto -40px auto;
background-color:#a3acc444;
background-image:url('world-map.svg');
background-repeat:no-repeat;
border: 6px double white;
border-radius:10px 600px;
height:180px;
}
.thoughts-div{
display:flex;
flex-direction:column;
}
.thought{
font-family:faseh-bold;
display:block;
background-color:#a3acc4;
padding:20px 40px;
border-radius:30px 0px 30px 30px;
min-width:30%;
max-width:60%;
margin:15px;
line-height:1.8;
position:relative;
text-align:right;
}
.thought-right:before,
.thought-right:after{
content:"";
color:#f3eced;
background-color:#606880;
border-radius:50%;
display:block;
position:absolute;
z-index:-1;
}
.thought-right:before{
width:44px;
height:44px;
top:-12px;
left:28px;
box-shadow:-50px 30px 0 -12px #606880;
}
.thought-right:after{
bottom:10px;
right:26px;
width:30px;
height:30px;
box-shadow:35px -34px 0 0 #606880,
-28px -6px 0 -2px #606880,
-24px 13px 0 -6px #606880,
-5px 25px 0 -10px #606880;
}
.thought-left:before,
.thought-left:after{
content:"";
color:#f3eced;
background-color:#a3acc4;
border-radius:50%;
display:block;
position:absolute;
z-index:-1;
}
.thought-left:before{
width:44px;
height:44px;
top:-12px;
right:28px;
box-shadow:50px 30px 0 -12px #a3acc4;
}
.thought-left:after{
bottom:10px;
left:26px;
width:30px;
height:30px;
box-shadow:-35px -34px 0 0 #a3acc4,
28px -6px 0 -2px #a3acc4,
24px 13px 0 -6px #a3acc4,
5px 25px 0 -10px #a3acc4;
}
.thought-left{
border-radius:5px 30px 30px 30px;
float:left; 
background-color:#707991ef;
box-shadow:0 0 4.5px #a3acc4;
color:#f3eced;
align-self:flex-end;
min-width:fit-content;
}
.thought-right{
border-radius:30px 5px 30px 30px;
box-shadow:0 0 4.5px #707991;
background-color:#a3acc4ef;
float:right;
color:#333;
}
.mg-d-f{
width:250px;
}
ul li{
list-style-type:none;
}
ul li a{
color:#333;
}
ul li a:hover{
text-shadow:1px 1px 15px #f3eced;
cursor:pointer;
}
.break{
width:100%;
height:100px;
}
footer{
background-color:#707991ef;
background-image:url('circuit-board.svg');
background-repeat:repeat;
width:100%;
height: 40px;
border-radius: 500px 500px 0 0;
margin:auto auto;
box-shadow:0 0 4.5px #a3acc4;
position: absolute;
flex-direction:column;
display: flex;
bottom: 0;
text-align: center;
}
.copyright{
color:#f3eced;
font-family:faseh-bold;
padding-top:10px;
position:relative;
top:3px;
font-size:15px;
}
.copyright img{
width:14px;
position:relative;
top:3px;
}
.contour-lines{
width:300px;
display:inline;
z-index:-5;
opacity:0.05;
}
.contour-lines:nth-child(1){
position:fixed;
top:-210px;
left:-190px;
}
.contour-lines:nth-child(2){
position:fixed;
top:-180px;
right:-150px;
}
.contour-lines:nth-child(3){
position:fixed;
bottom:-230px;
left:-150px;
}
.contour-lines:nth-child(4){
position:fixed;
bottom:-210px;
right:-180px;
}
#loaderBox{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
background-attachment:fixed;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 1;
transition: opacity 0.5s ease-out;
z-index: 1005;
animation:fade-out 26s infinite;
}

.loader {
  width: fit-content;
  font-family: faseh;
  font-size: 15pt;
height:30pt;
padding-top:7.5pt;
position: relative;
top:-40.5px;
  color: #EE9B2700;
  background: linear-gradient(270deg,#000 calc(50% + 0.5ch),#EE9B27 0) left/calc(200% + 1ch) 100%;
  -webkit-background-clip: text;
          background-clip: text;
  animation: l7 3s ease-in-out;
}
.loader:before {
  content:"«كُلُّ إِنَاءٍ يَضِيقُ بِمَا جُعِلَ فِيهِ، إِلَّا إِنَاءُ العِلمِ يَتَّسِعُ»";
}
@keyframes l7 {to{background-position: right}}
@keyframes fade-out{
0%{
opacity:1;
}
50%{
opacity:0;
}
100%{
opacity:1;
}
}