frontend/src/stylesheets/style.css

/* globals */
* {
    box-sizing: border-box;
    margin: 0px;
    border: 0px;
}

/* fonts */
@font-face {
    font-family: 'Fedra Arabic';
    src: url('../assets/fonts/Fedra Arabic Reg_beta.ttf') format('truetype');
}

@font-face {
    font-family: 'bebas';
    src: url('../assets/fonts/BEBAS___.ttf') format('truetype');
}

@font-face {
    font-family: 'majalla';
    src: url('../assets/fonts/majalla 2.ttf') format('truetype');
}

@font-face {
    font-family: 'MyriadPro Regular';
    src: url('../assets/fonts/MyriadPro-Regular.otf') format('otf');
}

@font-face {
    font-family: 'interstate';
    src: url('../assets/fonts/Interstate-Regular.bmap') format('bmap'),
    url('../assets/fonts/Interstate-Bold.bmap') format('bmap');
}

.arabic-text {
    font-family: "Fedra Arabic", serif;
}

.english-text {
    font-family: interstate, serif;
}

/* variables */
:root {
    --858-light-gray-color: #ebebeb;
}

/* App */
.App {
    max-width: 960px;
    margin: 0 auto;
}

/* header */
header {
    padding-top: 1em;
}

.site-logo {
    max-width: 300px;
    text-align: center;
}

.counter {
    position: absolute;
    right: 0;
    top: 0;
    padding: 2em;
}

/* search */
.search-button {
    background: white;
    bottom: -18px;
    position: relative;
}

.search-button img {
    max-width: 50px;
}

.search-box {
    padding: 1em;
    width: 50%;
    background: var(--858-light-gray-color);
}

.search-box::placeholder {
    color: black;
    text-align: center;
    font-size: 1.5em;
    color: gray;
}
@media screen and (max-width: 700px){
    .search-box::placeholder {
        font-size: 1em;
    }
}
@media screen and (max-width: 400px){
    .search-box::placeholder {
        font-size: .75em;
    }
}
/* Video item*/
.video-thumbnail {
    max-width: 300px;
    transition: all .4s ease-in-out;
}

.video-thumbnail:hover {
    transform: scale(1.1);
}

.video-thumbnail-container {
    position: relative;
    overflow: hidden;
}

/* section heading*/
.section-title {
    border-bottom: 2px dotted black;
    padding: 1em;
    margin-bottom: 1em;
    position: relative;
}