/*
Coder:
File: bootstrap-breakpoint3.css
Date: 02/02/2024
Site: Our_BS5_CrashCourse2024-02-02-Stg4-Final

Comments:
This page features ROYGBIV color-themed borders and font colors


*/
body {
  background-color: whitesmoke;
}

th#breakPointTh{
    width: 80px;
}

th#breakPointTh::before{
    content: "XS";
    color: red;
    font-size: 2rem;
    font-weight: bold;
    position: relative;
    top: 10px;
    right: 0px;
    font-family: 'Courier New', Courier, monospace;
    border-radius: 50%;
    border: 3px solid red;
    /* padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px; */
    padding: 5px;
    background-color: white;
  }

td#browserWidthTd{
    color: red;
}

/* This box class is purely used for explaining how the bootstrap grid system works. */
.box {
  background-color: lightblue;
  border: 1px solid blue;
  min-height: 50px;
  font-size: 2rem;
}

@media (min-width: 576px) {
    th#breakPointTh::before {
    content: "SM";
    padding-left: 5px;
    padding-right: 5px;
    border: 3px solid orange;
  }

  td#browserWidthTd{
    color: orange;
  }
}

@media (min-width: 768px) {
    th#breakPointTh::before {
    content: "MD";
    padding-left: 5px;
    padding-right: 5px;
    border: 3px solid yellow;
  }

  td#browserWidthTd{
    color: yellow;
    text-shadow: 1px 1px 1px black;
  }
}

@media (min-width: 992px) {
    th#breakPointTh::before {
    content: "LG";
    padding-left: 5px;
    padding-right: 5px;
    border: 3px solid green;
  }

  td#browserWidthTd{
    color: green;
    text-shadow: none;
  }

}

@media (min-width: 1200px) {
    th#breakPointTh::before {
    content: "XL";
    padding-left: 5px;
    padding-right: 5px;
    border: 3px solid blue;
  }

  td#browserWidthTd{
    color: blue;
  }
}

@media (min-width: 1400px) {
    th#breakPointTh::before {
    font-size: 1.8rem;
    content: "XXL";
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 5px;
    padding-bottom: 5px;
    border: 3px solid magenta;
  }

  td#browserWidthTd{
    color: magenta;
  }
}