* {
   box-sizing: border-box;
}
:root {
   --head-height: 45px;
   --nav-height: 40px;
   --color1: #193AFF;  
   --color2: #FFC819;  
   --color3: #4356BF;
   --color4: #AA934A;
   --color5: #4D5480;
   --color6: #555041;
   --white:  #ffffff;
   --black:  #000000;
}
body {
   margin:  0px;
   padding:  0px;
   position: relative;
   height: 1500px;
   overflow-x: hidden;
   font-family:arial;
   background-color: #eee;

}


header ul {
   display: flex;
   width: 100%;
   margin: 0px;
   position: fixed;
   right: 0px;
   padding-left: 210px;
   height: var(--head-height);
   list-style: none;
   background-color: var(--color1);
   justify-content: space-between;
   align-items: center;
   z-index: 100;
}


header ul a {
   text-decoration: none;
   color: white;
   font-size: 20px;
}

.logo {
   background-color: rgb(255, 150, 3);
   height: var(--head-height);
   padding-top: 10px;
   width: 90px;
   color: rgb(0, 0, 0);
   font-size: 20px;
   text-align: center;
}

.logout a {
  padding: 14px 10px;
  border-radius: 10px;
  background-color: #45b7d0c0; 
  font-size: 16px !important;

}
.home a{
   padding: 11.5px 8px;
}
.home :hover {
   background-color: white;
   color: blue;
}
.logout :hover{
   background-color: white;
   color: blue;
}

/*! -------------- Courses ---------------- */

.courses {
   position: absolute;
   right: 0px;
   margin-top: 80px;
   width: 75%;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(20%,300px));
   gap: 25px;
   justify-content:center;

}

.courses div {
   background-color: rgba(107, 107, 107, 0.1);
   width: 100%;
   height: 200px;
   display: flex;
   position: relative;
   align-items: center;
   justify-content: center;
   box-shadow: 0px 0px 9px  rgba(62, 62, 62, 0.3);
   border-radius: 10px;
}

.courses a {
   width: 80%;
   height: 150px;
   transition: 0.5s;
   border-radius: 10px;
   padding: 0px;
}

img  {
   width: 100%;
   height: 150px;
   border-radius: 10px;
   transition: 0.5s;
}
img:hover {
   filter: contrast(140%);
}

.courses a:hover {
   transform: scale(1.1);
   box-shadow: 0px 0px  10px 10px rgba(75, 75, 75, 0.5);
}
.courses div::before{
 content: "";
 display: block;
 position: absolute;
 left: 10px;
 top: 45px;
 background-color: red;
 border-radius: 5px;
 text-align: center;
 letter-spacing: 2px;
 box-shadow: 0px 0px 10px rgb(71, 71, 71);
}
.courses .math::before {
   content: "math2";
   padding: 10px;
   background-color: green;
   color: white;
}
.courses .elec::before {
   content: "electronic";
   padding: 10px;
   background-color: rgb(0, 136, 255);
   color: white;
}
.courses .it::before {
   content: "iT";
   padding: 10px;
   background-color: rgb(131, 60, 255);
   color: white;
}
.courses .pl::before {
   content: "PL";
   padding: 10px;
   background-color: rgb(255, 255, 255);
   color: rgb(0, 0, 0);
}
.courses .stat::before {
   content: "statistics";
   padding: 10px;
   background-color: rgb(255, 39, 60);
   color: white;
}
.courses .dis::before {
   content: "discreat";
   padding: 10px;
   background-color: rgb(238, 255, 0);
   color: rgb(0, 0, 0);
}


.bottom{
   position: absolute;
   bottom: 0px;
   right: 0px;
   width: 81%;
   height: 500px;
   background-color: var(--color3);
   
}
.bottom .container{
   padding-top: 50px;
   display: flex;
   align-items: start;
   justify-content: center;
   flex-direction: row;
}
.bottom .sec{
   width: 33%;
   color: #ffffff;
   margin: 10px 30px;
   
}
.bottom a{
   text-decoration: none;
   color: #ffffff;
   margin-bottom: 15px;
}

.sec a p {
   margin-bottom: 25px;
   
}
.sec a  :hover{
   background-color: rgb(0, 0, 255);
}
.bottom h4{
   margin-bottom: 20px;
}
.bottom hr{
   width: 30%;
}
.bottom p{
   margin-bottom: 15px;
}
.bottom img{
   border:  solid var(--black) 1px;
}
.blank{
   height: 400px;
}
#darkModeToggle {
   background-color: rgb(62, 123, 255);
   height: 45px;
   padding-left: 50px;
   border-radius: 10px;
   font-size: 15px;
   border: none;
   margin-right: 10px;
   cursor: pointer;
}
#icon {
   position: absolute;
   padding: 10px;
   color: #193AFF;
   border-radius: 50%;
   background-color: white;
   right: 255px;
}