@font-face{font-family:'icons';font-display:swap;src:url(/icon.woff) format('woff2');}
*,::before,::after{margin:0;padding:0;box-sizing:border-box;font-family:sans-serif;list-style:none;text-decoration:none;outline:0;border:none;scroll-behavior:smooth;-webkit-tap-highlight-color:transparent;-webkit-user-select:none!important;-ms-user-select:none!important;user-select:none!important;--hfhit:75px;--row_widh:10vw;}

body{overflow:hidden scroll;background:#f2f2f2;}
a{cursor:pointer;}
h1{font-family:serif;font-family:Georgia;font-size:40px;}

ic,.ic{font-family:'icons'}
[data-il]::before,[data-ir]::before{content:attr(data-il);font-family:'icons';display:flex;align-items:center;justify-content:center;font-size:20px;transition:.3s ease transform;transform:rotate(0);}
    
#bw_bg{width:100vw;height:100vh;background:#000;position:fixed;top:0;left:0;opacity:0;visibility:hidden;transition:.3s ease;transition-property:visibility,opacity;z-index:1;}
#hedr{position:relative;z-index:2;padding:15px var(--row_widh);}
.m_activ #hedr{position:sticky;top:0}
#hedr,#fotr{display:flex;height:var(--hfhit);background:white;align-items:center;}
#m_btn{display:none;cursor:pointer;}
#logo{display:flex;margin-right:10px;height:100%;align-items:center;font-weight:bold;color:#1a73e8;font-family:Georgia;font-size:20px;}
#nav{margin-left:auto;display:flex;}
#nav a{color:hsl(0, 0%, 20%);letter-spacing:1px;padding:8px 20px;font-weight:bold;font-size:14px;}
#nav a::before{display:none;}
#nav a:hover{color:hsl(0, 0%, 40%);}

#hese{padding-bottom:10px;background:linear-gradient(90deg,hsl(0, 100%, 50%),hsl(25, 100%, 50%),hsl(50, 100%, 50%),hsl(75, 100%, 50%),hsl(125, 100%, 50%),hsl(175, 100%, 50%),hsl(200, 100%, 50%),hsl(225, 100%, 50%),hsl(275, 100%, 50%),hsl(300, 100%, 50%),hsl(360, 100%, 50%));clip-path: ellipse(calc(400px + 80vw) 100% at 50% 0%);animation:gret 10s ease infinite;background-size:500% 500%;}
@keyframes gret{0%{background-position:0%;}50%{background-position:100%;}100%{background-position:0%;}}
#hese>div{width:100%;padding:calc(100px + 2vw) var(--row_widh);clip-path:ellipse(calc(400px + 80vw) 100% at 50% 0%);flex-direction:column;color:white;text-align:center;position:relative;background:center/cover no-repeat white;}
#hese h2{font-size:calc(15px + 1vw);}
#hese h1,#hese span{font-size:calc(30px + 3.5vw);position:relative;font-family:Georgia;margin:20px 0;}
#hese span::after{content:'';height:50%;width:70%;background:#4385f5;position:absolute;bottom:0;z-index:-1;right:-5%;}
#hese>div>div{margin-top:20px;}
#hese div>a{margin:5px;padding:10px 15px;border-radius:5px;background:#4385f5;color:white;font-weight:bold;display:inline-flex;align-items:center;}
#hese div>a:last-child{background:#28D146}
#hese div>a:hover{color:black;background:white}
#hese b{position:absolute;bottom: 20px;left: 50%;transform: translateX(-50%);}
#hese b a{color:#cccccc;}
#hese b a:hover{color:white;}

#abut{padding:50px var(--row_widh);}
#abut h1,#galry h1{text-align:center;font-size:40px;font-family:Georgia;position:relative;z-index:0;}
#galry h1{color:white;}
#abut h1::after,#galry h1::after{content:'';height:15px;width:100px;background:#4385f5;position:absolute;bottom:0;z-index:-1;transform:translateX(-95px);}

.ytjy a{color:#1a73e8;background:hsl(218, 100%, 97%);padding:10px;border-radius:10px;text-align:center;}
.ytjy a:hover{background:hsl(218, 100%, 92%);}

#fotr{justify-content:center}
@media (max-width:1000px){
  *{--hfhit:60px;--row_widh:3vw;}
  #hedr{padding:10px var(--row_widh)}
  #nav a{padding:8px 10px;}
}
@media (max-width:720px){
  #hedr{padding:10px;}
  #m_btn{width:40px;display:flex;border-radius:5px;place-content:center;padding:10px;margin-right:10px;}
  .m_activ #m_btn,#m_btn:hover{background:#f1f1f1;}
  .m_activ #m_btn::before{content:'';transform:rotate(90deg);}
  #nav{position:fixed;width:70vw;top:var(--hfhit);left:-70vw;transition:.3s ease left;flex-direction:column;}
  #nav a{padding:15px 0;display:flex;align-items:center;}
  #nav a::before{padding:0 15px;font-weight:initial;display:flex;}
  #nav a:hover{background:#e6e6e6;color:#333333;}
  #m_bg{width:70vw;height:100vh;background:#f1f1f1;top:0;left:-70vw;position:fixed;transition:.3s ease;transition-property:visibility,left;z-index:1;visibility:hidden;}
  .m_activ #nav,.m_activ #m_bg{left:0;visibility:visible;}
  .m_activ #bw_bg{opacity:.5;visibility:visible;}
}
