@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

*{
   margin: 0;
   /*margin: 10px;*/
   /*margin: 1.5rem;*/
   /*margin: 1.5em;*/
}



#backColor{
   background-color: tan;
}
body{
   background-color: lightblue;
   font-family: Arial, Helvetica, sans-serif;
}
#bcolour{
   background-color: yellow;
}
#idatt{
   background-color: lightblue;
}
.ccolour{
   color: blue;
}
ol{
   list-style-type: decimal-leading-zero;
}
ul{
   list-style-type: square;
}
.loremp{
   font-family: "Times New Roman", Times, serif;
}
/*#lorem{*/
/*   color: red;*/
/*}*/
/*h3.loremp{*/
/*   color: red;*/
/*}*/
#loremSection>h3{
   color: red;
}
#loremSection>h3+p+p,section>h3+p{
   background-color: pink;
}
#loremSection p:hover{
   background-color: yellow;
}
#loremSection>h3:first-letter{
   font-size: 150%;
   color: purple;
}
/*[href]{*/
/*   background-color: lightblue;*/
/*}*/
[href="https://www.w3schools.com"]{
   background-color: lightblue;
}
[href^=".."]{
   border: 4px dotted red;
}
[href$="wk02.html"]{
   background-color: white;
}
li>ul>li:first-child{
   color: red;
}
li>ul>li:last-child{
   color: green;
}
li>ul>li:nth-child(2){
   color: orange;
}
li>ul>li:nth-child(3){
   color: yellow;
}
/*************************************************/
body{
   background-image: url("../img/ahmed-abbas-dPrVq_7xbm8-unsplash.jpg");
}
#wrapper{
   background-color: rgba(52, 45, 36, 0.85);
   color: tan;
}
header, main, footer{
   /*border: white dotted 4px;*/
   margin: 0 1.5em;
   padding: 2em;
}
h1{
   font-size: 450%;
   text-shadow: 4px 4px 8px black;
}
h2,h3, h4, h5, h6{
   color: purple;
}
.buttons{
   color: tan;
   text-decoration: none;
   border: 4px purple solid;
   padding: 10px;
   margin: .5em;
   border-radius: 30px;
   background-image: linear-gradient(to bottom, rebeccapurple, violet);
   box-shadow: 4px 4px 8px black;
}

header p{
   font-size: 10px;
}
header{
   height: 100vh;
   text-align: center;
   position: relative;
}
header>img{
   position: absolute;
   bottom: 100px;
   right: 10px;
}
header>section{
   border: saddlebrown 6px solid;
   width: fit-content;
   position: relative;
   top: 30%;
   left: 10%;
   background-image: linear-gradient(to bottom, tan, saddlebrown);
   padding: 2em;
   border-radius: 40px 0;
   box-shadow: 8px 8px 10px black;
}
footer,#linkSection,#listSection,#loremSection,#imageSection,#infoSection{
   height: 100vh;
   padding-top: 3.5em;
}
#linkSection p,#linkSection h3,#linkSection a{
   margin: 1em;
}
/*****************************************/
@font-face {
   font-family: myFonts;
   src: url("../fonts/Roboto-Regular.ttf");
}
header{
   font-family: myFonts, sans-serif;
}
.roboto-regular-italic {
   font-family: "Roboto", serif;
   font-weight: 400;
   font-style: italic;
}
nav{
   /*text-align: center;*/
   position: sticky;
   /*top:18px;*/
   top: 0;
   background-color: rgba(128, 0, 128, 0.7);
   z-index: 1;
}
nav>ul{
   list-style-type: none;
   padding: 0;
   text-align: center;
   /*border:dotted red 4px;*/
   overflow: hidden;
   margin: 0 auto;
   width: fit-content;
}
nav>ul>li>a{
   color: tan;
   text-decoration: none;
   text-align: center;
   padding: 14px 16px;
   display: block;
}
nav li{
   float: left;
}
nav>ul>li>a:hover{
   background-color: rebeccapurple;
}
#listSection>h4+ul>li:nth-child(2n-1){
   background-color: #9da0a7;
}
/*#imageSection h2+a,#imageSection h2+a+img,#imageSection h2+a+img+img{*/
/*   float: right;*/
/*}*/
#imageSection>h2+figure{
   float: right;
}
/*figure{*/
/*   clear: both;*/
/*}*/