@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&family=Oswald:wght@500&display=swap');


 *{
    box-sizing: border-box;
    margin: auto;
    padding: 0;
}
body{
    background: linear-gradient(to right, rgb(71, 70, 70)0%,rgb(119, 117, 170)100%,rgb(66, 66, 66)50%);
}

li,a,button,.table{
    font-family: 'Montserrat', sans-serif;
    font-weight: 1000;
    font-size: 20px;
    color:rgb(252, 252, 252);
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

header{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 30px 10%;
   background-image:url(/pictures/programming-pic.png);
   background-color: rgb(101, 84, 148);
   background-position: center;
    background-repeat: no-repeat; 
    background-size: cover; 
}

.logo{
    cursor: pointer;
    margin-right: auto;
}

.logoHome{
    padding: 10px;
    background-color: #00000000;
}

.logoHome:hover{
    background-color: #00000000;
}

.nav__links{
    list-style: none;
}

.nav__links li{
    display: inline-block;
    padding: 0px 20px;
}


.nav__links li a{
    transition: all 0.3s ease 0s;
}


.nav__links li a:hover{
    color:rgba(252, 252, 252,0.5);
}

button{
    padding: 9px 25px;
    background-color: rgb(187, 187, 187);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease 0s;
}

button:hover{
    background-color: rgba(187, 187, 187,0.7);
}


p{
    font-family: 'Oswald', sans-serif;
}

div{
    font-family: 'Oswald', sans-serif;
}

.table{
    text-align: left;
    position: relative;
    border-collapse: collapse; 
    background-color: #f6f6f6;
    font-size: 18px;
}

td, th {
    border: 1px solid #7c7c7c;
    padding: 20px;
    
  }

th{
    background-color: rgba(106, 104, 134, 0.712);
    color: rgb(156, 156, 156);
    border-radius: 0;
    position: sticky;
    top: 0;
    padding: 10px;
}

tfoot > tr  {
    background: black;
    color: white;
  }
  
  tbody > tr:hover {
    background-color: rgba(46, 165, 95, 0.3);
  }

.headers{
    background-color: rgba(51, 51, 51, 0.514);
    font-family: 'Oswald', sans-serif;
    padding: 25px;
}

.paragraph{
    padding : 10px;
    padding-left : 25px;
    color: rgb(0, 0, 0);
    font-family: 'Oswald', sans-serif;
    font-size: 25px;
    background-color: rgba(61, 61, 61, 0.445);
}

.paraHead{
    padding : 10px;
    padding-left : 25px;
    color: rgb(0, 0, 0);
    font-family: 'Oswald', sans-serif;
    background-color: rgb(39, 39, 39);
}

.mainwrapper{
    width: 100vw;
  height: 100vh;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.box {
    width: 800px;
    height: 1200px;
    margin: 0 auto;
    background-color: rgba(120, 122, 238, 0.4);
    padding: 20px;
  }
  .title{
    padding : 10px;
    text-align: center;
    color: rgb(0, 0, 0);
    font-family: 'Oswald', sans-serif;
    font-size: 50px;
    background-color: rgb(39, 39, 39);
}