*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;

    /* HEADER MENU COLOR */
    --headl : #ab905d;
    --headr : #a08757;
 
    /* MENU TEXT */
    --hxa : #ffeea0;
    --hxb : #fffae2;
    --hxc : #ffe7ab; 

    /*TEZ TEXT */ 
    --XH1 : #3A2816; /* Deep Espresso Brown */
    --SH1 : #533f1e; /* Deep Espresso Brown */
    --XH2 : #5A3E22; /* Rich Dark Brown */
    --XH3 : #7A5730; /* Warm Brown */
    --XH4 : #9A7445; /* Antique Gold Brown */
    --XH5 : #fff4e6; /* Muted Gold */
    --XH6 : #C8A66A; /* Soft Champagne Gold */
    --XP  : #4A3A29; /* Elegant Brown */

    --BH3  : #AA8F5C; /* Elegant Brown */

    /* SCROLLBAR */
    --sca:#1b1500;
    --scb:#957409;
    --scc:#1b1500;

    /* SIDEPANEL */
    --sia : #9D8352;
    --sib : #66522e;
    --sic : #383621;

    /* FOOTER */
    --foa : #001118;
    --fob : #4a000a;
    --foc : #051923;

    /* IMAGES FOR MAIN BACKGROUNDS */
    --aim : url("../IOPIC/AIHOME/TOPA1.jpg"); 
}
 

/* ----------------------------------------------- HTML BASE CLASSES ---------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------*/
/* HEADER */
header {width: 100%; color: #9b9b9b; font-size: 0.85rem; padding: 0.25rem 0.75rem; background: linear-gradient(to left,#534a39,#332c1e,#372e1e,#453922); text-align: right;}
header {display: flex; justify-content: right;}
header h5 {font-size: 10px; color: #ffe3a2; padding-top: 2px; padding-right: 5px;}
header h5 span {color: #ffc949;}
header a {text-decoration: none; cursor: pointer; padding: 2px 9px; border-radius: 15px; background-color: #001118b5; border: 2px solid #d4af59; color: #fffca9; font-size: 9px; margin-left: 5px;}
@keyframes hean { 0%,100% {border: #c2bd63; background: linear-gradient(220deg,#36230e,#413d1d);}
50% {border: #211b08; background: linear-gradient(20deg,#34360e,#1d1d11);}}
header a:hover {animation: hean 900ms linear infinite;}

/* BODY */
body {background: #fff9e2;}

/* SCROLLBAR ---------------------------*/
/* ------------------------------------ */
/* ------------------------------------ */
/* ------------------------------------ */
/* width */
::-webkit-scrollbar {width: 10px;}

/* Track */
::-webkit-scrollbar-track {background: var(--scc);}

/* Handle */
::-webkit-scrollbar-thumb {border-radius: 20px; background: linear-gradient(to bottom, var(--scb), var(--sca));}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {background: linear-gradient(to top,  var(--scb), var(--sca));}

/* NAVBAR    ---------------------------*/
/* ------------------------------------ */
/* ------------------------------------ */
/* ------------------------------------ */
/* HEADER */
.HEADER {display: flex; padding: 1px 15px; align-items: center; position: relative; justify-content: space-between; background: linear-gradient(to right,var(--headl),var(--headr));}
.heapic {flex-basis: 30%; display: flex; overflow: hidden; width: min-content;}
.HEADER img {width: 200px; height: 70px; margin-top: 5px; margin-left: 50px; filter: brightness(1.2);}
.HEADER h6 {font-size: 20px; font-weight: 900; flex-basis: 40%; color: var(--cia); padding: 20px 5px; font-family: 'Megrim', cursive;}

/* NAVBAR */
nav ul {text-decoration: none; display: flex; flex-basis: 40%; padding: 10px 0 !important;}
nav ul li { list-style: none; position: relative;}
nav ul li a {text-decoration: none; color: var(--hxa); transition:all 300ms ease-in; margin-left: 10px; padding: 15px 15px; font-size: 16px; font-weight: 900;}
nav ul li a span {color: var(--hxb); font-weight: 500;}
nav a:hover { color: var(--hxb); letter-spacing: 1px; transform-origin: center;}
nav a:hover span { color: var(--hxc); font-weight: 900;}
nav ul li button {border: none; cursor: pointer; color: #4d4623; padding: 7px 20px; border-radius: 25px; border-top-left-radius: 55px; background: linear-gradient(to right,#C9A969,#ffe3aa); font-weight: 600; margin-left: 5px;}
nav ul li button span {font-weight: 500; color: #683220;}
nav ul li button {box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px; transition: all 200ms ease-in-out;}
nav ul li button:hover {box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;}

.LAN {display: inline-flex; align-items: start; border-radius: 20px; background: none; padding: 0px 10px;}
.LAN button {text-decoration: none; border-radius: 50%; transition: all 500ms ease-in; background: #A58B5A; border: 2px solid #d3bb72; cursor: pointer; margin-right: 5px; font-size: 7px; color: #fdffd0; padding: 9px;}
.LAN button:hover {background: linear-gradient(220deg,#ffc07c,#7a631d); font-weight: 900; transform: translateY(-2px); border: none;}

/* OPEN AND CLOSE BUTTON */
.openbtn, .closebtn { font-family: 'Cinzel', serif; display: none;}
 
.spez {display: none; position: absolute; bottom: 1rem; right: 1rem;}
.spez h5 {color: #686933; font-size: 0.65rem; letter-spacing: 2px;}
.spim {display: none; position: absolute; bottom: 9rem; right: 3rem; width: 5rem; height: 5rem;}
.spim img {width: 10rem; height: 13rem; display: block;}

/* MEDIA QUERY */
/* ------------------------------------------------------- */
/* ------------------------------------------------------- */
/* ------------------------------------------------------- */
/* ------------------------------------------------------- */
@keyframes anim {0% {font-weight: 400; opacity: 1; color: var(--hxa); margin-left: 7px; letter-spacing: 0px; transform: translateY(0px) scale(1);} 
40% {font-weight: 100; opacity: 0.8; color: var(--hxb); margin-left: 6px; letter-spacing: 1px; transform: translateY(-3px) scale(1.05);} 
100% {font-weight: 600; opacity: 1; color: var(--hxc); margin-left: 5px; letter-spacing: 0.5px; transform: translateY(0px) scale(1);}}

@media(max-width: 700px)
{
.openbtn {display: block;}
@keyframes closex { 50% {color: #f1ffa2; transform: scale(1.5);}
0%,100% {color: #787f52; transform: scale(0.15);}
}
.closebtn {display: flex; animation: closex 3s linear infinite;}
/* LOGO */
.heapic {flex-basis: 50%;}
.HEADER img {margin-left: 5px; aspect-ratio: 10/9;}

/* NAVBAR */
nav ul {  margin: 10px auto; display: block;}
nav ul li { margin: 30px auto;}
nav ul li a { padding: 10px 10px; font-size: 1.25rem; font-weight: 400 !important;}
nav ul li a span { animation: anim 1.5s linear forwards infinite;}
nav ul li button {margin-left: 3rem;}
.LAN {margin-left: 3rem;}

/* SIDEPANEL */
.sidepanel {width: 0px; opacity: 0; border: none; position: fixed; z-index: 5000; height: 100vh; top: 0; right: 0;
    background: linear-gradient(120deg, var(--sia), var(--sib), var(--sic)); overflow-x: hidden; transition:all 0.5s ease-in-out; padding-top: 60px;}

.sidepanel a {padding: 15px 80px 15px 50px; text-decoration: none; color: var(--hxb);  width: 190px; transition: 0.3s;}
.sidepanel a span {color: var(--hxc);}
.sidepanel .closebtn { position: absolute; top: 1rem; right: 0.5rem; font-size: 36px;}

.openbtn {font-size: 20px; cursor: pointer; background-color: rgba(45, 0, 11, 0.195); color: white; padding: 10px 15px; border: none; border-radius: 5px;}
.openbtn:hover {background-color:#444;}
.show {display: none;}
.spez,.spim {display: block;}
}
/* ENDS HERE */

/* ------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------- */
/* -----------------------------------------------HTML CLASSES A - Z ALL --------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------------------------------------------ */
/* -----------------------------------------------------AA----------------------------------------------------- */
/* -------------------------------------------------AAAAAAAAAAA------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* AVIOR MAIN MAIN MAIN --------------------------------------------------------------------------------------- */
.AVIOR {width: 100%; display: block; overflow: hidden !important; background: #fff9e2;}
.ASIA {position: relative !important;}

.MEGA {background: linear-gradient(to top, #fff9e2,#d1b582,#b49864);}

/* BASE */
.BASIL {background:linear-gradient(to top,#fffae8,#ffefd0,#fffbe9);background-size:100% 200%;animation:BASE 2s ease-in-out infinite;} 
@keyframes BASE{0%{background:linear-gradient(to top,#fff9e2,#fff0d3,#fff9e2)}50%{background:linear-gradient(to top,#fff9e2,#fff3db,#fff9e2)} 100%{background:linear-gradient(to top,#fff9e2,#ffebc3,#fff9e2)}}

/* BASE */
.BASIS {background:linear-gradient(to top,#fffae8,#ffffe2,#fffbe9);}