html,body{margin:0,padding:0;scroll-behavior:smooth;}body a{text-decoration:none;color:#111;font-family:arial;}

body{background:#f7fafc;position:relative;overflow-x:hidden;}
body::before,body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;}
body::before{background:linear-gradient(145deg,rgba(42,101,174,.03) 0%,rgba(42,101,174,.03) 45%,transparent 45%),
linear-gradient(35deg,rgba(0,170,210,.05) 0%,rgba(0,170,210,.05) 40%,transparent 40%),
linear-gradient(325deg,rgba(255,190,0,.03) 0%,rgba(255,190,0,.03) 32%,transparent 32%);
clip-path:polygon(0 0,62% 0,42% 42%,0 68%);}
body::after{background:linear-gradient(215deg,rgba(42,101,174,.04) 0%,rgba(42,101,174,.04) 48%,transparent 48%),linear-gradient(120deg,rgba(0,170,210,.05) 0%,rgba(0,170,210,.05) 45%,transparent 45%);
clip-path:polygon(62% 100%,100% 100%,100% 18%,74% 46%);}
body{background-image:linear-gradient(60deg,transparent 48%,rgba(255,255,255,.08) 49%,rgba(255,255,255,.07) 54%,transparent 55%),
linear-gradient(130deg,transparent 62%,rgba(255,255,255,.13) 63%,transparent 66%);}

p,footer a, label,input, input a{font-family:arial;}nav a,time,h2,h3,h4{font-size:1.2rem;font-family:arial;}time{font-size:1rem;}h2{font-size:1.7rem;color:#111;}h3,h4{font-size:1.5rem;}h3,h4,h5,h6,time{color:#111;}
.s-nav{padding:0;width:100%;height:60px;position:fixed;top:0;right:0;z-index:1001;display:flex;justify-content:flex-start;align-items:center;background:rgba(250,250,250,0.98);}/*rgba(166,128,199,0.98);*/
.s-nav a{font-family:arial;color:#fff;font-weight:400;margin-left:20px;border-radius:12px;padding:0.3rem;}
.newbtn{position:absolute;right:10px;width:auto;height:50px;line-height:25px;padding:0.7rem;background:rgba(140,5,189,0.5);border:none;border-radius:12px;font-size:17px;font-weight:bold;justify-content:center;align-items:center;}
.newbtn::before{color:#fff;content:"\2630\0020 MENU";transition:.3s ease;}.newbtn.open::before{content:"";transition:.3s ease;}.newbtn.open::after{color:#111;content:"X \0020 SULJE";transition:.3s ease;}.newbtn{flex-shrink:0;}
.newbtn:hover{background:lightgrey;scale:1.02;transition:.3s ease;}

.menuu{display:none;position:fixed;inset:0;top:60px;left:0;width:100%;height:100svh;background:rgba(255,255,255,0.9);overflow-y:auto;z-index:1000;}
.menuu.open{display:block;}
.menu-content{position:relative;margin:0 auto;height:auto;min-width:90%;display:block;justify-content:left;padding-top:90px;transform:translateY(-100%);transition:transform .5s ease;}
.menuu.open .menu-content{transform: translateY(0);}
.menu-content > ul{list-style-type:none;}
.menu-content a{display:inline-block;margin-top:5px;text-decoration:none;font-family:arial;color:#111;border:none;padding:5px;}
.menu-content > p{color:#111;font-size:1.1rem;}.red{color:purple;}
.menu-content a:hover{background:lightgrey;transition:.3s;}

ul{list-style-type:none;display:block;gap:1rem;}li, li a{text-decoration:none;color:#fff;font-family:arial;}
section,article{scroll-margin-top:90px;}

.pusher{margin-top:120px;}
.shadows{box-shadow:0 4px 8px 0 rgba(0,0,0,0.4), 0 6px 20px 0 rgba(0,0,0,0.19);}

header{margin:0 auto;width:100%;min-height:40svh;display:flex;justify-content:center;align-items:center;text-align:center;word-wrap:break-word;background:rgba(166,128,199,0.9);background:url("site-images/bg4.webp");background-size:cover;background-position:center center;background-repeat:no-repeat; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%);mask-image: linear-gradient(to bottom, transparent 0%, black 20%);}
header div{display:flex;justify-content:center;align-items:center;padding:0.3rem;}

.logo{width:140px;height:auto;text-align:center;}.marg-0{margin:0;}
h1{margin:0;color:#fff;font-size:3rem;font-family:arial;text-shadow:2px 2px 2px #222;}
.header-p{color:#fff;font-size:1.5rem;font-family:"Comic Sans MS", cursive,"verdana";text-shadow:2px 2px 2px #222;}

.scrl-menu{margin:0 auto;margin-bottom:2rem;width:80%;overflow-x:auto;overflow-y:hidden;display:flex;padding-top:0.7rem;padding-bottom:0.7rem;gap:20px;justify-content:flex-start;align-items:center;scroll-snap-type: x proximity;scroll-behavior: smooth; -webkit-overflow-scrolling: touch;//background:linear-gradient(to right, rgba(114,22,244,0.1), rgba(114,22,244,0.3));}
.scrl-menu a{margin-left:5px;padding: 0.5rem 0.7rem;font-size:1.2rem;font-family:arial;color:#111;flex: 0 0 auto;scroll-snap-align: start;white-space: nowrap;user-select: none; -webkit-user-select: none;}.active{border-bottom:solid 1px #111;}

.general-note{margin:0 auto;border:solid 2px orange;border-radius:12px;padding:0.7rem;}

section{margin:0 auto;margin-top:4rem;margin-bottom:4rem;width:80%;display:block;justify-content:left;}

.news{width:80%;padding:1rem;}
.news-grid{margin:0 auto;display:grid;grid-template-columns: 1fr;gap:1rem;}.item{padding:0.7rem;border-radius:12px;background:rgba(255,255,255,0.45);}.item2{padding:0.7rem;background:rgba(255,255,255,0.45);}.note{border:solid 2px lightgreen;}

.with-bg{background:linear-gradient(to bottom, rgba(172,184,208,0.1), transparent 30%, rgba(172,184,208,0.3) 60%, rgba(114,22,244,0.2) 80%, transparent 100%);}
.no-bg{background:transparent;}

.article-bg{display:grid;grid-template-columns:repeat(1,1fr);padding:0.7rem;background:rgba(255,255,255,0.75);border-radius:12px;margin-top:1rem;margin-bottom:1rem;align-items:center;}

/*hoverit*/
body a:hover{background:lightgrey;scale:1.02;transition:.3s ease;}body a:focus,.item:focus{outline: 2px solid #005fcc;outline-offset:1px;transition:.3s ease;}.item:hover{scale:1.01;opacity:0.8;transition:.3s ease;}

.news-img,.news-img2{width:100%;min-height:250px;background-size:contain;background-position:center center;background-repeat:no-repeat;}
.news-img{display:flex;justify-content:flex-end;}
.regs{background:url("news-images/reg1.webp");background-size:cover;background-repeat:no-repeat;}
.meet{background:url("news-images/meet1.webp");background-size:cover;background-repeat:no-repeat;}

.p1-img{width:100%;min-height:250px;background:url("site-images/play1.webp");background-size:cover;background-repeat:no-repeat;}
.f-img{width:100%;min-height:250px;background:url("site-images/form.webp");background-size:cover;background-repeat:no-repeat;}

.img-ctrl{min-height:350px;background-size:contain;background-repeat:no-repeat;background-position:center center;}

.mbr-a{background:pink;padding:0.7rem;border-radius:20px;border:solid 2px #d6d6d6;}
.grid-two{margin:0 auto;display:grid;grid-template-columns: 1fr;}.grid-two-item{padding:0.7rem;background:#fff;border-radius:12px;}

.up{display:none;position:fixed;bottom:20px;right:20px;z-index:100;width:50px;height:50px;background:rgba(166,128,199,0.9);border:none;border-radius:20px;cursor:pointer;color:#fff;font-size:30px;font-weight:bold;box-shadow:0 4px 8px 0 rgba(0,0,0,0.4), 0 6px 20px 0 rgba(0,0,0,0.19);}.up:hover{scale:1.1;transition:.3s ease;}
#theme-toggle{margin-left:20px;background:#fff;border:none;border-radius:20px;cursor:pointer;padding:0.3rem;z-index:500;font-size:20px;align-items:center;justify-content:center;box-shadow:0 4px 8px 0 rgba(0,0,0,0.4), 0 6px 20px 0 rgba(0,0,0,0.19);}#theme-toggle:hover{color:#91fa20;scale:1.1;transition:.3s ease;}

footer{margin:0 auto;margin-top:2rem;margin-bottom:4rem;background:rgba(114,22,24,0.15);padding:1rem;}
.f-grid{margin:0 auto;width:75%;display:grid;grid-template-columns:repeat(1,1fr);align-items:center;gap:1rem;}
.a-marg a{display:block;margin-top:20px;}


@media only screen and (min-width:300px){h1{font-size:2rem;margin-top:0;}body p{font-size:1.1rem;}header div{display:block;}.scrl-menu{width:100%;}.news{width:90%;}.img-ctrl{background-size:cover;}}
@media only screen and (min-width:770px){h1{font-size:2rem;margin-top:2rem;}header,.scrl-menu,.news{width:80%;}header div{display:flex;}.news-grid,.grid2,.grid-two,.f-grid,.article-bg{grid-template-columns:repeat(2,1fr);}.img-ctrl{background-size:contain;width:98%;}}
@media only screen and (min-width:1025px){header,.scrl-menu,section,.news{width:75%;}.news-grid,.grid2,.article-bg{grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));}}
@media only screen and (min-width: 1200px){.s-nav{justify-content:left;}}
@media only screen and (min-width:1500px){header,.scrl-menu,section,.news,.f-grid{width:65%;}h1{font-size:2.3rem;}body p{font-size:1.3rem;}}
@media only screen and (min-width:2000px){body{overflow-x:hidden;}.s-nav{margin:0 auto;padding:0;}}

:root[data-theme="dark"] body {background:rgba(5,8,25);color:#d6d6d6;}
:root[data-theme="dark"] body a:hover{background:dodgerblue;scale:1.02;transition:.3s ease;}
:root[data-theme="dark"] h2{color:#d6d6d6;}
:root[data-theme="dark"] h3{color:#d6d6d6;}
:root[data-theme="dark"] h4{color:#d6d6d6;}
:root[data-theme="dark"] time{color:#d6d6d6;}
:root[data-theme="dark"] .s-nav{background:rgba(5,8,25,0.98);}
:root[data-theme="dark"] .menuu{background:rgba(0,0,0,0.9);}
:root[data-theme="dark"] .menu-content a{color:#d6d6d6;}
:root[data-theme="dark"] .newbtn{background:none;}
:root[data-theme="dark"] .newbtn.open::after{color:#fff;content:"X \0020 SULJE";transition:.3s ease;}
:root[data-theme="dark"] header {background:none;background:url("site-images/night.webp");background-size:cover;background-position:center center;background-repeat:no-repeat;}
:root[data-theme="dark"] .scrl-menu{background:rgba(5,8,25,0.55);}
:root[data-theme="dark"] .scrl-menu a{color:#d6d6d6;}
:root[data-theme="dark"] .news-grid{background:none;}
:root[data-theme="dark"] .item{background:none;color:#d6d6d6;}
:root[data-theme="dark"] .item2{background:none;color:#d6d6d6;}
:root[data-theme="dark"] .item p{color:#d6d6d6;}
:root[data-theme="dark"] .item:hover{background:rgba(255,255,255,0.1);}
:root[data-theme="dark"] .article-bg{background:none;border-bottom:solid 1px #d6d6d6;border-radius:0;}
:root[data-theme="dark"] footer a{color:#d6d6d6;}
:root[data-theme="dark"] a{color:#d6d6d6;}
:root[data-theme="dark"] .mbr-a{background:#4c15cb;}

:root[data-theme="light"]  .s-nav a{color:#fff;background:rgba(140,5,189,0.5);}
:root[data-theme="light"] p,h2,h3,h4,h5,h6,time{color:#111;}
:root[data-theme="light"] .header-p{color:#fff;}

/*jos tarvetta: .scrl-menu::-webkit-scrollbar {height: 8px;}.scrl-menu::-webkit-scrollbar-thumb {background: rgba(255,255,255,.25);border-radius: 100px;transition: background .2s ease;}.scrl-menu::-webkit-scrollbar-track {background: transparent;}.scrl-menu::-webkit-scrollbar-thumb:hover {background: rgba(255,255,255,.45);}*/