p {font-size: larger;}/*element {style}*/
body {background-color: rgb(22, 22, 22);}

.link:hover {
    background-color: rgb(44, 44, 44);
}/*.class_name:selector, here hover selector apply while mouse is hovering*/

.link:focus {
    filter: invert();
    border-radius: 30px;
}/*focus is helpful to focus ie only applied while userinput on the element also element is back to default if another user input is given*/

.link {color: rgb(255, 255, 255);
    background-color: rgb(22, 22, 22);
    display: inline-block;/* makes an element to become a inline block container so making it not overlap with other links */
    padding: 13px;/* space between border and text */
    text-decoration: none;
    font-size: 140%;
    border-radius: 30px;
}

.github {
    height: 30px;
    width: auto;
    float: right;
}

.github:hover {filter:opacity(30%);}

details > summary { /*> allows to go inside <details> and give acess to <summary>*/
    cursor: cell;
    border: 1px solid black;
    color:rgb(0, 0, 0);
    background-color: rgb(177, 177, 177);
    padding: 4px;
    border-radius: 20px;
    width: fit-content;
}

details > summary:hover{background-color: white;}

section > h1 {
    
    color:crimson;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    font-size:300%;
}