/*main file for every page on the web, if you want to add something you have to add them on the own page css file*/

/*
link this on every html file
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Orbitron&display=swap" rel="stylesheet">
*/

/*main body, apply for every page*/
body {
    background-color: rgb(23, 23, 23);
    margin: 0;
    font-family: "Orbitron", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

/*main content, also apply for every page*/
main {
    color:white;
    padding: 20px;
    box-sizing: border-box;

    /*
    add this in page css file if you have sidebar
    margin-left: 80px;
    */

    /*
    add this in page css file if you have navbar
    margin-top: 60px;
    height: calc(100vh-60px);
    add this in page css file if you dont have navbar
    height: calc(100vh);
    */

    /*
    also if you dont have too much item on your web you can compact them using
    margin-left: 22.5%; if you dont have sidebar
    margin-left: calc(80px + 20%); if you have sidebar
    there will be a background for this later on
    */
}

/*
2 types of button, [button] and [a]
use [button class=btn_button] when you need to use it in a form
use [a=btn_a] otherwise
when adding own attribute, make sure you add another class.
For example <button style="btn_button your_own_button_name">
add the own button place,size,font-size,letter-spacing,border-radius,... in the page css file
*/
.btn_button { 
    background: transparent;
    color: white;
    border: 2px solid lightgray;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
}

.btn_a {
    background: transparent;
    color: white;
    border: 2px solid lightgray;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
}

.btn_button:hover, .btn_a:hover {
  color: skyblue;
  border-color: red;
  box-shadow: 0 0 20px red;
  text-shadow: 0 0 20px skyblue;
}

/* 
textarea for text input
add the width, font_size, line_height,... as well as the placeholder if you want
*/
.field textarea {
    background: rgb(50, 50, 50);
    color: white;
    box-sizing: border-box;
    field-sizing: content;
    resize: none;
}

.field textarea:focus {
    outline: none;
    border: 1px solid blue;
}

.field textarea::placeholder {
    color: #9e9e9e;
}