/* universal style */
body {
    background-image: linear-gradient(to bottom, #87EBD6, skyblue, #879CEB);
    font-family: arial;
    margin: 0;
    padding: 0;
}
/* header and footer design */
header, footer {
    background-color: skyblue;
    border-color: blue;
    font-family: arial;
    padding: 1%;
    border-width: 1mm;
    text-align: center;
}
    /*different border designs*/
header {border-bottom-style: solid;}
footer {border-top-style: solid;}

    /*header text organization*/
nav menu {
    display: flex;
    margin: 0; 
    padding: 0;
    
}
nav menu li {
    margin-inline: auto; 
    list-style-type: none;
}
    /*dropdown menu design; try to make it float*/
.articles_menu {overflow: hidden;} 
.articles_links {overflow: hidden; display: none;}
.dropdown {overflow: hidden;}

.articles_menu:hover .articles_links{ /*physical dropdown menu*/
    display: block; 
    position: absolute; 
    background-color: #879CEB; 
    border: solid blue; 
    border-width: 1mm;
    text-align: left;
    border-radius: 1mm;
    padding: 1mm;
}
.articles_menu:hover .articles_links a { /*dropdown menu links*/
    color: whitesmoke;
    font-size: medium;
    font-weight: lighter;
    text-decoration: none;
}
    /*footer text organization*/
menu li {
    list-style-type: none;
    display: flex;
    justify-content: center;
}
    /*header and footer link interaction*/
menu li a {
    text-decoration: none;
    color:rgb(5, 28, 26);
    font-weight: bold;
}
menu li a:hover {
    border-style: solid;
    border-width: 0.5mm;
    border-color: blue;
}
/* content styling */
section {
    margin-left: 5mm;
    margin-right: 5mm;
    margin-bottom: 2.5mm;
    margin-top: 2.5mm;
    border-style:dashed;
    border-width: 1mm;
    border-color: blue;
}
article {
    background-color: rgb(255, 255, 255, 0.75);
    padding: 2%;
    margin-left: 5mm;
    margin-right: 5mm;
    margin-bottom: 5mm;
    border-style: solid;
    border-color: blue;
    text-align: left;
}
/*images and video*/
img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: auto;
    justify-content: center;
}
svg {
    max-width: 100%;
    height: auto;
    display: block;
    margin: auto;
    justify-content: center;
    font-family: arial;
}
video, iframe {
    display: block;
    margin: auto;
    border-style: groove;
    border-radius: 5mm;
    border-width: 3mm;
    border-color: #EB87CE; /*#EB879C alt color*/
}
 /* text */
    /* FONTS
    BASE FONT: Arial = paragraphs, headers, footers, table content, labels, ol, ul
    Calibri = headings one through five, datalist for range
    Cambria = fieldset, legendss
    monospace = table header
    */ 
 h1 { /*largest*/
    font-family: Calibri;
    font-weight: 100;
    font-weight: bold;
    text-align: center;
 }
 h2 { /*article headers*/
    font-family: Calibri;
    margin-left: 1%;
    text-indent: 2.5mm;
    white-space: nowrap;
 }
 h3 { /*smaller, touches content below it*/
    font-family: Calibri;
    text-align: left;
    margin-bottom: 0%;
 }
 h4 { /*underlined*/
    font-family: Calibri;
    font-size: x-large;
    text-align: center;
    margin-top: 5mm;
    margin-bottom: 1mm;
    text-decoration: underline;
 }
 h5 { /*smaller, fire alpaca subtitle*/
    font-family: Calibri;
    font-size: large;
    text-align: center;
    margin-top: 1mm;
    margin-bottom: 1mm;
 }
 p { /*paragraph*/
    font-family: arial;
    font-size: medium;
    padding: 0%;
    margin-top: 0;
 }
small { /*used in form submission*/
    color: blue;
    font-family: monospace;
}
/* Table styling */
table {
    background-color: rgb(255, 255, 255, 0.75);
    border-style: groove;
    border-radius: 5mm;
    border-width: 3mm;
    border-color: #EB87CE;/*#EB879C*/
    padding: 0.25%;
    font-family: arial;
}
td, tr {
    border: 0.5mm solid;
    border-color: blue;
    text-align: center;
}
th {
    font-family: monospace;
}
table a {
    color: #FF00B5;
    text-decoration: none;
}
table a:hover {
    text-decoration: underline;
}
/* form styling */
fieldset {
    background-color: rgb(255, 255, 255, 0.75);
    border-style: groove;
    border-radius: 5mm;
    border-width: 2.5mm;
    border-color: #EB87CE;
}
fieldset legend {
    font-family: cambria;
    font-weight: bolder;
    font-size: 125%;
    color: #FF00B5;
}
label {
    font-family: arial;
    color:rgb(5, 28, 26);
}
textarea {
    resize: vertical;
    font-family: arial;
    accent-color: #EB87CE ;
}
datalist {
    font-family: calibri;
    font-weight: bold;
    color: blue;
    display: flex;
    margin-top: 0;
    margin-left: 2.5mm;
    justify-content: space-between;
    width: 150px;
    line-height: 0;
}
input[type="checkbox"], input[type="text"], input[type="radio"] {accent-color:#FF00B5}

input[type="range"] { /*stying Q3 range slider*/
    appearance: none;
    background-image: radial-gradient(300px 50px, #EB87CE, #FF00B5);
    border-style: solid;
    border-radius: 5mm;
    border-width: 1mm;
    border-color: #FF00B5;
    margin-bottom: 0;
}
[type="range"]::-moz-range-thumb {
    appearance: none;
    background-image: linear-gradient(to bottom, #87EBD6, skyblue, #879CEB);
    /*border*/
    border-style: solid;
    border-color: blue;
    border-radius: 50%;
    border-width: 0.5mm;
    cursor: grab;
}
[type="range"]::-moz-range-progress {
    appearance: none;
    height: 5mm;
    background-image: linear-gradient(90deg, #879CEB, skyblue, #87EBD6);
    border-style: none;
    border-width: 1mm;
    border-radius: 5mm;
}
[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background-image: linear-gradient(to bottom, #87EBD6, skyblue, #879CEB);
    width: 20px;
    height: 20px;
    /*border*/
    border-style: solid;
    border-color: blue;
    border-radius: 50%;
    border-width: 0.5mm;
    cursor: grab;
}
/* sorted by operation system; article lists styles */
ul {
    list-style-type: none;
}
h2 + ul li a {
    text-decoration: none;
    color: blue;
}
h2 + ul li a:hover {
    border-style: solid;
    border-width: 0.5mm;
    border-color: blue;
}
/* div & class styling */
 #container {
    display: flex;
}
 .box {
    margin: 1mm;
}
 .center {
  margin-left: auto;
  margin-right: auto;
}
 .absolute-center {/*used on by-operating system page*/
    padding: 1%;
    margin: auto;
}
.hero-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    margin: 0;
}
/*screen orientation*/
@media screen and (orientation: portrait) {
    h2 { /*article headers*/
        font-family: Calibri;
        margin-left: 1%;
        text-indent: 2.5mm;
        white-space: normal;
    }
    iframe {/*original width & height width="560" height="315"*/
    width: 320px;
    height: 180px;}
    #container {display: block}
    .box {margin: 1mm;}
}