/* CSS stylesheet for Mohammad Akhlaghi's personal webpage.  This is
the generic stylesheet that is read in all situations (by wide and
narrow screens). For wide screens, after this is read, the "wide.css"
is loaded to modify those elements/classes that need to be changed to
make a good view for wider browsers.

Copyright (C) 2016-2024 Mohammad Akhlaghi <mohammad@akhlaghi.org>

This stylesheet is free software: you can redistribute it and/or
modify it under the terms of the GNU General Public Licence as
published by the Free software foundation, either version 3 of the
License, or (at your option) any later version.

This stylesheet is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
General Public License for more details.

A copy of the GNU General Public License is available at
<http://www.gnu.org/licenses>.*/





/* Layout

   The CSS Style rules categorized as "Layout" here are to do with the
   general layout of the final page, not to with the text in it. */

/* These are HTML5 elements that will not be recognized by older
   versions, by setting their "display" to "block" we are telling the
   browser's that don't support HTML5 to put them on their own
   starting line link <p>. */
article,
aside,
figcaption,
figure,
footer,
header,
main,
nav,
copyright,
section{
    display: block;
}





/* This clearfix class will make the size of the container of several
   boxes equal to the larger of the two (mainly important for the
   height). So when the div container class contains a sidebar and
   main, its the hight of the container containing the two will be
   equal to the largest of the two. This is taken from the "HTML and
   CSS Visual Quickstart Guide" eighth edition. */
.clearfix:before,
.clearfix:after{
    content: " ";
    display: table;
}
.clearfix:after{
    clear: both;
}
.clearfix{
    *zoom: 1;
}










/* Text and figure layouts. */

/* All the elements: We want the width value to contain the padding
   and border values too. */
*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* In a narrow screen it is much easier to read fonts that are
   slightly larger than the standard size. */
body{
    font-size: 110%;		/* Default browser size.           */
    font-weight: 100;		/* Thin fonts for all pages.       */
    font-family: open_sanslight, sans-serif;
}

figure{
    margin: 0;
    border: 0;
    padding: 0;
    text-align: center;
}

/* When a figure is placed immediately after a paragraph, add a
one-line margin to separate it from the text. */
p+figure{
    margin-top: 1em;
}

/* Asides */
aside{
    margin-top: 0.4em;
    border-radius: 40px/20px;
    box-shadow: 0 0 3px #d0d0d0;
    padding: 0.6em 0.4em 0.6em 0.4em;
}
aside.importantaside{
    background-color: #d4e4f6;
}

/* Paragraphs

   By default all the paragraphs are indented, except for those that
   are immediately following a header, their indentation is set to
   zero. */
p{
    margin-top: 0;
    text-indent: 1em;
    line-height: 1.3;
    margin-bottom: 0.2em;
}
/* Paragraphs that are immediately after a header or a header and an
   image, or within dd structures must not have any indentation.*/
p.firstparagraph, dd p:first-child,
h1+p, h1+img+p, h1+figure+p,
h2+p, h2+img+p, h2+figure+p,
h3+p, h3+img+p, h3+figure+p,
h4+p, h4+img+p, h4+figure+p,
h5+p, h5+img+p, h5+figure+p,
h6+p, h6+img+p, h6+figure+p {
    text-indent: 0;
}

dd{
    padding-bottom: 1em;
}

aside p{
    font-size: 0.8em;
}

copyright, address{
    font-size: small;
}

/* Headers

   The default body font-weight is 100 (thin), so the default "bold"
   weight of these headers will make them too thick. Therefore we set
   these headings to have a font-weight or normal or 400.*/
h1, h2, h3, h4, h5, h6{
    font-weight: bold;
    margin-bottom: 0.3em;
}
h1{
    margin-top: 0;
    font-size: 1.8em;
}
aside h1{
    font-weight: 600;
    font-size: 0.7em;
}
h2{ font-size: 1.5em; }
h3{ font-size: 1.3em; }
h4{ font-size: 1.2em; }
h5{ font-size: 1.1em; }
h6{ font-size: 1.0em; }

/* Images */
img{
    border-radius: 10%;
}

/* Links

   The links are distinguished from the main text by being a brigher
   shade of gray but bolder. When they are in focus, active or the
   mouse is hovering over them, they become darker.*/
a{
    font-weight: 600;
    text-decoration: none;
}
a:link,
a:visited{ color: #1a3b9f; }
a:focus,
a:active,
a:hover{ color: #0099ff; }



/* Sub and Super scripts

   Leave line spacing unchanged when <sub> and <sup> are used. */
sub,
sup{
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sup{ top: -0.5em; }
sub{ bottom: -0.25em; }


/* Responsive embedded videos that scale with the window size. This
   solution was taken from:

   https://coolestguidesontheplanet.com/videodrome/youtube/

   This container defines the area of the container for each video.*/
.video-16-9-container {
    height: 0;
    border: 0;
    margin-top: 1em;
    overflow: hidden;
    padding-top: 30px;
    position: relative;
    padding-bottom: 56.25%;
}

/* Properties of each individual iframe, object or embed. */
.video-16-9-container iframe {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}