/* Custom CSS for Bootstrap 5 Bart Simpson template designed for INFO1005 Website Design - 2025 */
/* Date: September 2025 */
/* Author: Website Design Team */


/* sets the default rem size for an entire page (for all sizing to be relative to) */

html {
  font-size: 1rem;
  scroll-behavior: smooth;
  scroll-padding-top: 4rem;
}

body {
  font-family: 'Montserrat', sans-serif !important;
  background-color: #ff0000;
opacity: 1;
background-image:  linear-gradient(135deg, #ffffff 25%, transparent 25%), linear-gradient(225deg, #ffffff 25%, transparent 25%), linear-gradient(45deg, #ffffff 25%, transparent 25%), linear-gradient(315deg, #ffffff 25%, #ff0000 25%);
background-position:  10px 0, 10px 0, 0 0, 0 0;
background-size: 10px 10px;
background-repeat: repeat;
  margin: 0 auto;
  padding: 0;
}
/* Landing page - Start - CSS generated by Copilot GitHub AI */

.bg-image {
  background-image: url('../img/pattern1.png');
  background-size: cover;
  background-position: center;
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  }

.overlay {
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  }

.landing-content {
  position: relative;
  z-index: 1;
  color: #fff;
  text-align: center;
  top: 40vh;
  }


  .my-bgcolor{
    background-image: url('../img/pattern5.png');

    background-color: #d33434 !important;
  }
/* Landing page - End - CSS generated by Copilot GitHub AI */

/* NAVBAR - Start - CSS generator source: https://work.smarchal.com/twbscolor/ */
.navbar {
  background: rgb(0, 0, 0);
}

.nav-link, .navbar-brand {
  color: white;
  cursor: pointer;
}

.nav-link {
  margin-right: 1rem !important;
  border-radius: 100px;
}

.nav-link:hover{
  background: white;
  color: rgb(0, 0, 0);
  border-radius: 100px;
}

.navbar-brand:hover {
  background: white;
  padding: 5px;
  border-radius: 100px;
}

.navbar-collapse {
  justify-content: flex-end;
border: 0;
}

.navbar-toggler{
  background: rgb(255, 0, 0) !important;
border: 0;
  color: white;
}

.collapse .navbar-collapse .navbar-toggler-icon

{
  background: rgb(0, 0, 0) !important;
border: 0;
  color: white;
}

a.active {
	background: rgb(255, 0, 0);
  border-radius: 100px;
}

/* NAV - End */
.my-name{
  color: #000000 ;
}
/* ELEMENT STYLES - Start  */

h1, h2, h3, h4, h5 {
  font-family: 'Oswald', sans-serif;
}

h1 {
  color: rgb(0, 0, 0);
  padding-top: 4rem;
  padding-bottom: 1rem;
  font-size: 3rem;
}

h2 {
  color: rgb(0, 0, 0);
  padding-top: .5rem;
  font-size: 2.5rem;
}

h3 {
  padding-bottom: 0.3rem;
  padding-top: 1rem;
	color: rgb(0, 0, 0);
}

h4 {
  font-size: 1rem;
  padding-bottom: 1rem;
  text-transform: uppercase;
  color: rgb(0, 0, 0);
}

p, ul, ol, li, a {
  font-family: 'Montserrat', sans-serif;
  color: rgb(0, 0, 0);
}

p.intro {
  color: white;
  font-size: 1.1em;
  padding-top: 1em;
  text-align: left;
}

/* ELEMENT STYLES - End */


/* SEMANTIC STYLES - Start */

/* You can add a background image and instructions in CSS */
header {
 
  background-repeat: no-repeat;
  background-size: auto;
  background-position: center;
  }

/* This allows you to create a border between the main and aside */
.main {
  border: 0;
    border-left: 4px solid rgb(255, 0, 0);
    padding-left: 3rem;
    margin: 20px 0;
  }
  
  .aside {
    padding-right: 3rem;
    margin: 20px 0;
  }

/* SEMANTIC STYLES - Finish */

/* HERO SOCIAL MEDIA - Start */

a.headsocial i {
  color: rgb(0, 0, 0);
}

a.headsocial:hover i {
  color: rgb(68, 68, 68);
}

/* HERO SOCIAL MEDIA - End */

/* STANDOUT TEXT - Start */

span.standout {
  color: aqua;
  font-weight: 700;
}

/* STANDOUT TEXT - End */

/* FOOTER SOCIAL MEDIA - Start */

a.footsocial i {
  color: rgb(255, 255, 255);
}

a.footsocial:hover i {
  color: rgb(255, 0, 0);
}

/* FOOTER SOCIAL MEDIA - End */


.footer-color{
  background-color: black;
  padding-top: 0% !important;
  margin-bottom: 0% !important;
}

/* START Progress bars style for Skill Level */
/* IDEA Customise progress bar size and colours */
.progress {
  height: 50px;
  margin: 20px;
  }

.adobe {
  background-color: green;
  }

.micro {
  background-color: red;
  }

.socmedia {
  background-color: purple;
  }
  /* END Progress bars style for Skill Level */

/* CARD MEMBERSHIP - Start */
.card {
  border: 5px solid rgb(255, 0, 0) !important;
 }
 /* CARD MEMBERSHIP - End */
 

/* Changing images using transform https://webcode.tools/css-generator */

/* This will apply to all images unless you have a specific class */
img.invert:hover {
  transform: rotate(180deg);
}

/* Button CSS */

button{
	border: 1px solid rgb(255, 0, 0);
	background: rgb(100, 85, 57);
	color: #fff;
  }

  button a{
  	color: #fff;
        }

    button a:hover {
      color: rgb(255, 0, 0);
      text-decoration: none;
      }

/* This styles your iframe for your PDF to make sure it expands to the full width of the container/column it is in */
      .resume {
        width: 100%;
      }

/* This will change all of your social media icon links - if you want to focus on specific ones add a unique class */

  a i {
color: rgb(0, 0, 0);
  }

  a i:hover {
    color: rgb(0, 0, 0);
  }
  
  /* This changes your navbar image so that it fits within the navbar space. You could just create the image at this size to avoid this instruction */

  .bart {
    width: 40px;
    border-radius: 100px;
  }


/* Navigatable responsive lightbox - Start: Created using GitHub Copilot */
        .portfolio-img {
            cursor: pointer;
            object-fit: cover;
            height: 200px;
            width: 100%;
        }
        .modal-img, .modal-video {
            width: 100%;
            max-height: 60vh;
            object-fit: contain;
        }

/* Navigatable responsive lightbox - End */

/* Cursor Typewritter Effect - Start: Bootsnipp */

.home {
margin-bottom: 0;
background: white;
height: 750px;
align-items: center;
}

.intro {
font-size: 5rem;
color: rgb(0, 0, 0);
}

.typewrite {
padding: 0;
font-size: 5rem;
display: inline-block;
color: rgb(0, 0, 0);
}

.break:after {
content: '\A';
white-space: pre;
}



/* .col {
  background-color: yellowgreen;
} */
/* Cursor Typewritter Effect - End */

/* MEDIA QUERIES - Start */
/* Examples of customising Bootstrap's media queries at different 'snapping' points - for example, change the size of your browser window and watch the <p> text colour change. Don't EVER change the pixel variables or you will be creating snapping points between Bootstrap's default snapping points - just add your styles in the brackets of the @media queries */

/* // Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {

  p {
    color: purple;
  }

  .main {
    border: none;
  }

}

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
  p {
    color: rgb(0, 0, 0);
  }

  .main {
    border: none;
  }

}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
  p {
    color: blue;
  }
}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  p {
    color: rgb(255, 0, 200);
  }
}

/* // Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  p {
    color: rgb(0, 0, 0);
  }
}

/* // Extra Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1400px) {
  p {
    color: #FB079A;
  }
}


/* MEDIA QUERIES - End */

/* Custom CSS for Bootstrap 5.3 Bart Simpson template designed for INFO1005 Website Design - 2025 */