/*
Theme Name: Bytewise Coding
Author: Hiba Abdel Karim
Author URI: http://example.com
Description: A short description of the theme.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: your-theme
Tags: custom-background, custom-logo, custom-menu, featured-images, flexible-header
*/

:root {
  --primary: #0033cc;
  --secondary: #71d971;
  --dark-green: #3fb13f;
  --text-color: #322e2f;
  --light-grey: #b8b8b8;
  --white: #fff;
}

body {
  color: var(--text-color);
}
html {
  margin: 0 !important;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

h1 {
  font-family: "Montserrat", sans-serif;
}
h2,
h3 {
  font-family: "Roboto", sans-serif;
}
span,
p {
  font-family: "Rubik", sans-serif;
}
h4,
h5,
h6,
* {
  font-family: "Raleway", sans-serif;
}
ul {
  list-style-type: none;
  font-family: "Rubik", sans-serif;
}
.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

@media (min-width: 1400px) {
  .container {
    max-width: 1420px;
  }
}

@media (min-width: 1600px) {
  .container {
    max-width: 1520px;
  }
}

@media (min-width: 1720px) {
  .container {
    max-width: 1650px;
  }
}

.btn {
  text-decoration: none;
  border-radius: 10px;
  font-weight: 700;
  transition: 0.2s ease;
}
.btn-green {
  background-color: var(--dark-green);
}
.btn-primary {
  background-color: var(--primary);
  color: var(--white);
  border: 1px solid var(--primary);
}
@media screen and (min-width: 1024px) {
  .btn-primary:hover {
    color: var(--primary);
    background-color: transparent;
  }
}
.btn-sm {
  padding: 15px 30px;
  font-size: 1rem;
}
.btn-md {
  padding: 20px 60px;
  font-size: 1.2rem;
}

.primary-text {
  color: var(--primary);
}
.green-text {
  color: var(--dark-green);
}

.blue-highlight {
  -webkit-text-stroke: 2px var(--primary);
}
.highlight-green {
  -webkit-text-stroke: 2px var(--dark-green);
}

@media screen and (max-width: 720px) {
  .btn-md {
    padding: 15px 60px;
    font-size: 1.1rem;
  }
}