/* ---        UTILITIES       --- */
.oblique         { font-style: oblique;        }
.straight        { font-style: normal;         }
.bold            { font-weight: bold;          }
.underlined      { text-decoration: underline; }
.justify         { text-align: justify;        }

.transition      { transition: .5s; }
.center          { position: absolute; margin: 0; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.no-select       { cursor: default; }
.no-select::selection {  }
.perspective     { perspective: 800px; transform-style: preserve-3d; }
.shadowed        { filter: drop-shadow(0 0 10px #000a); }

.tr-up-10        { transform: rotateX(10deg);  }
.tr-up-20        { transform: rotateX(20deg);  }
.tr-up-30        { transform: rotateX(30deg);  }
.tr-rg-10        { transform: rotateY(10deg);  }
.tr-rg-20        { transform: rotateY(20deg);  }
.tr-rg-30        { transform: rotateY(30deg);  }
.tr-lf-10        { transform: rotateY(-10deg); }
.tr-lf-20        { transform: rotateY(-20deg); }
.tr-lf-30        { transform: rotateY(-30deg); }
.tr-down-10      { transform: rotateX(-10deg); }
.tr-down-20      { transform: rotateX(-20deg); }
.tr-down-30      { transform: rotateX(-30deg); }

.flex-column     { display: flex; flex-direction: column; align-items: center; }
.flex-row        { display: flex; flex-direction: row;    align-items: center; }
.flex-wrap       { flex-wrap: wrap; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around;  }
.justify-center  { justify-content: center;        }
.justify-start   { justify-content: start;         }
.justify-end     { justify-content: end;           }
.align-start     { align-items: flex-start;        }
.align-center    { align-items: center;            }
.align-end       { align-items: flex-end;          }

.width-full      { width: 100vw;     }
.width-auto      { width: auto;      }
.width-150p      { width: 150px;     }
.width-100p      { width: 100px;     }
.width-300       { width: 300%;      }
.width-100       { width: 100%;      }
.width-90        { width: 90%;       }
.width-80        { width: 80%;       }
.width-70        { width: 70%;       }
.width-60        { width: 60%;       }
.width-50        { width: 50%;       }
.width-40        { width: 40%;       }
.width-30        { width: 30%;       }
.width-25        { width: 25%;       }
.width-20        { width: 20%;       }
.width-10        { width: 10%;       }
.width-min-400   { min-width: 400px; }
.width-min-300   { min-width: 300px; }

.height-full     { height: 100vh; }
.height-auto     { height: auto;  }
.height-120      { height: 120%;  }
.height-100      { height: 100%;  }
.height-80       { height: 80%;   }
.height-70       { height: 70%;   }
.height-50p      { height: 50px;  }
.height-50       { height: 50%;   }
.height-40       { height: 40%;   }
.height-10       { height: 10%;   }
.height-5        { height: 5%;    }
.height-50h      { height: 50vh;  }
.height-5h       { height: 5vh;   }

.padding-1       { padding: 1vw;  }
.padding-05      { padding: .5vw; }

.margin-top-1w   { margin-top: 1vw;      }
.margin-top-10h  { margin-top: 10vh;     }
.margin-top-30h  { margin-top: 30vh;     }
.margin-top-40h  { margin-top: 40vh;     }
.margin-top-50h  { margin-top: 50vh;     }
.margin-top-100p { margin-top: 100px;    }
.margin-top-70p  { margin-top: 70px;     }
.margin-top-50p  { margin-top: 50px;     }
.margin-top-20p  { margin-top: 20px;     }
.margin-top-10p  { margin-top: 10px;     }
.margin-left-10  { margin-left: 10%;     }
.margin-left-20  { margin-left: 20%;     }
.margin-right-50p{ margin-right: 50px;   }
.margin-bot-5h   { margin-bottom: 5vh;   }
.margin-bot-10h  { margin-bottom: 10vh;  }
.margin-bot-20h  { margin-bottom: 20vh;  }
.margin-bot-30h  { margin-bottom: 30vh;  }
.margin-bot-40h  { margin-bottom: 40vh;  }
.margin-bot-50h  { margin-bottom: 50vh;  }
.margin-bot-100p { margin-bottom: 100px; }
.margin-bot-50p  { margin-bottom: 50px;  }
.margin-bot-10p  { margin-bottom: 10px;  }
.margin-1        { margin: 1vw;          }
.margin-05       { margin: .5vw;         }
.margin-null     { margin: 0;            }