:root { /*-- colour settings --*/
  --body-back: #e0e0e0;   /* body background */
  --body-text: black;   /* body text */
  --tab-back: #000066;  /* tab background */
  --tab-text: white;    /* tab text */
  --title-border: #001e43;  /* line between tabs and common title */
  --title-back: #003f8e;    /* graduation between tabs and common title */
  --subtitle-back: #00bfff; /* subtitle background */
  --subtitle-text: #00008b; /* subtitle text */
}



/*---------------------------------------------
              Whole layout
---------------------------------------------*/
#tab-container{ /*-- Box for tabs --*/
    width: 1000px;              /* Box width */
    height: 40px;               /* Box height */
    margin: auto;               /* Horizontaly centring the box */
}


<!-- #title-container{ /*-- Box for title & date --*/
    width: 100%;            /* Box width : full screen */
    height: 170px;          /* Box height 120*/
    margin: auto;           /* Horizontaly centring the box */
    margin: -3px 0px 0px 0px;   /* Box outside margin : Shifting the box upward */
    text-align: center;     /* Horizontaly centring the text in the box */
    border-style: solid;    /* Box frame style : solid line */
    border-color: var(--title-border) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);     /* Box frame colour : dark-wine-red at the top, transparent(white-based) at the rest*/
    border-width: 0.5px;    /* Box frame width */
    background-image: url('EAALMA-SW2025banner.png');    /* Common title background */
    /*background-size: 100% auto;                     /* background image size */
    background-size: 100% 100%;                     /* background image size */
    background-repeat: no-repeat;                   /* Image repetition */
}-->
#title-container {
    width: 100%;
    aspect-ratio: 3 / 1;   /* ← 画像の縦横比に合わせて調整してください */
    margin: -3px auto 0 auto;
    text-align: center;
    border-style: solid;
    border-color: var(--title-border) transparent transparent transparent;
    border-width: 0.5px;
    background-image: url('EAALMA-SW2025banner.png');
    background-size: contain; 
    background-position: center;
    background-repeat: no-repeat;
    background-color: #fff;           /* 背景色を追加しておくと、空白部分が白に */
}


<!-- #title-background{ /*-- Putting a background band at the top of the title-container --*/
    width: 100%;            /* Background band width */
    height: 30px;           /* Background band height */
    position: absolute;     /* Taking the absolute position */
    margin: 1px 0px 0px 0px;        /* Margin btw own top and mother-box(title-container) top */
    background: linear-gradient(to top,rgba(255, 255, 255, 0) 30%,var(--title-back));   /* Background colour and gradation : mid-wine-red -> transparent as top -> bottom */
}-->


#main-container{ /*-- Box for body contents : The tab click switches the contents of this box */
    width: 1000px;      /* Box width : no height setting -> flexible height w.r.t the contents long */
    margin: auto;       /* Horizontaly centring the box */
    margin-top: 2px;    /* Margin btw own box and title-container */
}






/*---------------------------------------------
                Tab layout
---------------------------------------------*/
#tabcontrol a { /*-- Settings for tab parts --*/
  
   display: inline-block;            /* To insert tabs avoiding auto new line and spacing */
   height: 30px;                     /* Tab height */

   border-width: 1px 1px 1px 1px;    /* Tab frame width */
   border-style: solid;              /* Tab frame style : solid line */
   border-color: var(--tab-back);    /* Tab frame colour : dark-red */
   padding: 6px 20px 0px 25px;       /* Margin inside the tab : Here it's adjusting the tab title vertical centring and the touching of the tab to the main-container box */
   background-color: var(--tab-back);        /* Background colour */

   color: var(--tab-text);           /* Text colour */
   font-size: 14px;                  /* Text size */
   position: relative;               /* Taking the position w.r.t. the mother-box(tab-container) */
   text-align: center;               /* Horizontaly centring the text in the tab */
   text-decoration: none;            /* Deletting the underline of the link name */

   z-index: 1;                       /* Index to pile up the marker on the tab */
}


.tabmarker{ /*-- Settings for the tab marker on the left-top corner of the tab --*/
    display: inline-block;                      /* To insert tabs avoiding auto new line and spacing */
    _display: inline;                           /* To force the contents go inline : This helps to not go a new line when <div> is used */
    position: absolute;                         /* Taking the position w.r.t. the mother-box(tabcontrol a) */
    width: 22px;                                /* Picture width */
    height: 22px;                               /* Picture height */
    background-image: url("data/cornerNoStar.png");   /* Default piscure */
    z-index: 2;                                 /* Index to pile up the marker on the tab : Z_tab < Z_marker */
}



#tabbody div { /*-- Setting for the body page connected to the tab --*/
    width: 100%;                    /* Width：Same as the mother-box(main-container) */
    height: 100%;                   /* Height : Same as the mother-box(main-container) = flexible */
    position: relative;             /* Taking the position w.r.t. the mother-box. */
    z-index: 0;                     /* Index to pile up the all body pages and switch the 'most top one' to show */
}





/*---------------------------------------------
       Subtitle layout in the body pages
---------------------------------------------*/
.subtitle { /*-- Setting for the subtitle box --*/
    display: inline-block;      /* To insert tabs avoiding auto new line and spacing */
    width: 100%;                 /* Box width : Same as the mother-box(main-container) */
    position: relative;         /* Taking the position w.r.t. the mother-bos : Where to use this box reflects where to appear the subtitle */
    text-align: center;         /* Horizontaly centring the text in the box */
    background-size: 5px 5px;    /* The narrowness of the background diagonal lines */
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0) 25%, var(--subtitle-back) 25%, var(--subtitle-back) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 75%, var(--subtitle-back) 75%, var(--subtitle-back)); /* Diagonal lines background */
    font-size: 20px;             /* Text size */
    font-family: sans-serif;    /* Text font */
    font-wright: bold;          /* Test style */
    color: var(--subtitle-text);             /* Test colour */
}
.cover{ /*-- Setting for the subtitle cover box : Making the subtitle background in dragation --*/
    display: inline-block;      /* To insert tabs avoiding auto new line and spacing */
    width: 100%;                 /* Box width : Same as the mother-box(subtitle) */
    height: 100%;               /* Box height : Same as the mother-box(subtitle) */
    background: linear-gradient(to top,var(--body-back),rgba(255, 255, 255, 0));   /* Background colour and gradation : transparent(white-based) -> while as top -> bottom */
    position: relative;         /* Taking the position w.r.t. the mother-box(subtitle) */
}





/*---------------------------------------------
        Text settings of every box
---------------------------------------------*/
body{ /*-- Settings for the body --*/
    font-family: serif;         /* Text font */
    color: var(--body-text);    /* Text colour */
    font-size: 20px;            /* Text size */
    line-height: 1.6;           /* Line space : 1.6 times large */
    background-color: var(--body-back);     /* Background colour */
}

ul{ /*-- Using a picture as a dot to line up using <ul><li> --*/
    list-style-image: url(data/listStar.png);       /* Picture for the listing dot */
}






#maintitle{
    font-family: Arial;             /* Text font */
    color: var(--body-text);    /* Text colour */
    font-size: 30px;                /* Text size */
    font-weight: 900;               /* Text bold width */
}

#maindate{  /*-- span of the date in common title --*/
    font-family: Arial;             /* Text font */
    color: var(--subtitle-text);    /* Text colour */
    font-size: 24px;                /* Text size */
}

#home1{
    font-size: 24px !important;
    font-family: Georgia;
}
#home1sub{
    font-size: 24px;
    color: rgb(0, 95, 170);
    font-weight: bold;
}

#update{
    font-size: 15px;
    color: violet;
}


#prog1{
    width: 360px; 
    text-align: center; 
    font-size: 15px;
}

#deadline{
    font-size: 25px;
    font-family: san-serif;
    color: red;
}